New: Customize Your Lightbox

HaraldE · April 7, 2015

My basic interest is with Caption, not interested in other components (like Title and Keywords) In some of my photos the Caption is empty so do not want any text or marking indication an empty Caption

If the Caption and Title are very much linked then I say show both. If not I say I am only interested in Caption and do not want Title to be shown

Your questions are interesting since I haven't gven too much thought on this

leftquark wrote: »

1: When you say "always be shown" do you just mean that the title and caption don't disappear after a few seconds?

1: YES. The Caption stays and the Title I am not interested in

leftquark wrote: »

2: Do you want it to display down the page, keeping your image as large as possible but requiring the user to scroll to see the caption ?

2: I believe this is a NO. The visitor should see the caption without having to ask for it.

leftquark wrote: »

3: Do you want to shrink the photo so the caption has room on the page, without requiring the user to scroll?

3: I believe this is a YES. Again, the visitor should not have to scroll for seeing the Caption.
If possible no shrink if the Caption is empty

leftquark wrote: »

- Do you want the image to remain large but have the caption overlay the image, as if the small box with the caption has been hovered on and rolls up over the photo?

4: NO, The current banner that shows the Caption is wrong (in my eyes) since it should not overlap the photo

Also, I am not a CSS user so please give me a hint on where to store it, thanks

And a new question, from me. Will any CSS added effect the way the SmugMug mobile app displays downloaded photos?

Thanks for help.

leftquark · April 7, 2015

HaraldE wrote: »

My basic interest is with Caption, not interested in other components (like Title and Keywords) In some of my photos the Caption is empty so do not want any text or marking indication an empty Caption

Most what of you'd like to control can be set with our new Lightbox Settings. Here's how you can do it:

1) Navigate to a gallery
2) Go into the Customizer by clicking "Customize -> Content and Design."
3) Under the Content tab you should see a section that says "On All Galleries" or "On Just This Page" and under there a row for "Lightbox". Click the wrench that appears next to Lightbox.
4) Set "Auto Hide Controls" to OFF. This will turn captions on at all times.
5) Set "Title" to OFF. This will turn off titles.
6) Set "Keywords" to OFF to turn off keywords.

HaraldE wrote: »

3: I believe this is a YES. Again, the visitor should not have to scroll for seeing the Caption.
If possible no shrink if the Caption is empty

I've gone ahead and added Nick Sherlock's CSS code to your site, by using a CSS Content Block on your "All Galleries" page. To do this I repeated steps 1-3 above. Under the "Content" tab I scrolled down to "HTML & CSS" and dragged a CSS content block to the bottom of the page. I then copied the code from Nick (http://www.sherlockphotography.org/Customisations/Lightbox-captions) into the block and clicked OK and Published. Let me know if you would like it removed.

HaraldE wrote: »

And a new question, from me. Will any CSS added effect the way the SmugMug mobile app displays downloaded photos?

CSS will only effect the way your site when viewed on a web-browser like Safari, Chrome, Firefox or Internet Explorer. The CSS does not effect anything in the iOS or Android apps

HaraldE · April 7, 2015

leftquark wrote: »

Most what of you'd like to control can be set with our new Lightbox Settings.

I've gone ahead and added Nick Sherlock's CSS code to your site

Brilliant ... all lights are green. Thanks a lot for the help and explanation. I saw the long CSS block you had added. So now I know where to add CSS things. Layout looks good as Owner and also when signing in as Visitor.

However, all the code in CSS block gave me mixed feelings. My head said "Take it away ... you have no idea what this means or what it will do" while my heart was full of "This really looks good, just what you want, don't listen to that nut-brain in top drawer"

My heart won and I will keep it and cross my fingers that nothing goes wrong.

So, again thanks and make a mark on your tally for Happy Users, Harald

brandofamily · April 7, 2015

Hey there leftq, any thought on my issue posted in post #17 above?

samuel70 · April 7, 2015

Hi,
I can't seem to find the Lightbox section under "All Galleries".
Any help ?

H1PCWHPEhaUhHcHwjJuc2g47QjWLTXC5RvYfywhOzpeXMidzNZUDVR5MHoei0Nm_6f1Y3_l0fzBhWmA=w1896-h794

H1PCWHPEhaUhHcHwjJuc2g47QjWLTXC5RvYfywhOzpeXMidzNZUDVR5MHoei0Nm_6f1Y3_l0fzBhWmA=w1896-h794

leftquark · April 7, 2015

brandofamily wrote: »

Hey there leftq, any thought on my issue posted in post #17 above?

Brando, let me take a look! Are you just trying to center the caption in the Lightbox?

leftquark · April 7, 2015

samuel70 wrote: »

I can't seem to find the Lightbox section under "All Galleries". Any help ?

Make sure that you navigate to a gallery first, then launch the Customizer. If you start from a Folder, Page, or your Homepage, we don't have a gallery where we can show you what the Customizations will look like and we want to make sure we can visually show you what each setting will do!

leftquark · April 7, 2015

HaraldE wrote: »

However, all the code in CSS block gave me mixed feelings. My head said "Take it away ... you have no idea what this means or what it will do" while my heart was full of "This really looks good, just what you want, don't listen to that nut-brain in top drawer"

My heart won and I will keep it and cross my fingers that nothing goes wrong.

Harald,
That's an extremely valid concern and one I wish more people shared. You're right, any time you use one of these CSS Customizations there is some risk that it may break in the future as we innovate and improve the website. I'll do my best to give you all a heads up when new features may break Customizations by posting in the Product News forum (click here to get daily emails with my posts).

Lastly, the Support Heroes are here 24/7/365 and can always help if something happens or you need a fix!

Going forward we're looking at building in features so that you don't have to use CSS to do some of these tweaks.

brandofamily · April 7, 2015

leftquark wrote: »

Brando, let me take a look! Are you just trying to center the caption in the Lightbox?

I'd like it to show all the time and be centered. I really only caption my "published" gallery....
Use the link in the original post for that gallery. Thanks.

leftquark · April 8, 2015

brandofamily wrote: »

I'd like it to show all the time and be centered. I really only caption my "published" gallery....
Use the link in the original post for that gallery. Thanks.

This should do the trick:

/* Center the LB caption and give it some more width */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
  max-width: 1000px !important; /* Make sure this # and the # below match */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Give the caption some more width */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info>p {
  max-width: 1000px !important; /* Make sure this # and the # above match */
}

brandofamily · April 8, 2015

leftquark wrote: »

This should do the trick:

/* Center the LB caption and give it some more width */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
  max-width: 1000px !important; /* Make sure this # and the # below match */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Give the caption some more width */
.sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info>p {
  max-width: 1000px !important; /* Make sure this # and the # above match */
}

Thanks! Works as advertised.
Any idea on making it show all the time without the glitches caused by the other code?
(Border I added pushes away from pic all the way to edge of screen even after deleting the line of code that keeps the pic from automatically going full screen as directed.)

leftquark · April 8, 2015

brandofamily wrote: »

Thanks! Works as advertised.
Any idea on making it show all the time without the glitches caused by the other code?
(Border I added pushes away from pic all the way to edge of screen even after deleting the line of code that keeps the pic from automatically going full screen as directed.)

Yay -- glad it worked. I don't see it on your site though -- the captions are left aligned in the original link. (Just want to make sure I gave you code that works!)

I asked someone else what they mean by "caption always showing" because there are many ways to do it -- some possible and some easier than others. Setting "Auto Hide Controls" to OFF in the Lightbox settings will make it so the first 2-3 lines of the caption are always displayed. That's the simplest and preferred method. We could display it down, below the screen and not cover the image when viewed, as well. Lastly, we could shrink the photo and give room for the caption but that somewhat defeats the purpose of the Lightbox as it's meant to be the place people go to see the photo large. Shrinking it to fit a caption seems better suited for SmugMug gallery style, for example.

Let me know what you'd like and I can get back to you!

brandofamily · April 9, 2015

leftquark wrote: »

Yay -- glad it worked. I don't see it on your site though -- the captions are left aligned in the original link. (Just want to make sure I gave you code that works!)

I asked someone else what they mean by "caption always showing" because there are many ways to do it -- some possible and some easier than others. Setting "Auto Hide Controls" to OFF in the Lightbox settings will make it so the first 2-3 lines of the caption are always displayed. That's the simplest and preferred method. We could display it down, below the screen and not cover the image when viewed, as well. Lastly, we could shrink the photo and give room for the caption but that somewhat defeats the purpose of the Lightbox as it's meant to be the place people go to see the photo large. Shrinking it to fit a caption seems better suited for SmugMug gallery style, for example.

Let me know what you'd like and I can get back to you!

I added, then removed the code you gave me. It centers the caption but conflicts with the tools on the right. What I'd really like is for the caption to be centered but right under the image. Like 20px below the image, not at the very bottom of the screen next to the tools. I don't think this is possible though...

dunno

samuel70 · April 9, 2015

leftquark wrote: »

Make sure that you navigate to a gallery first, then launch the Customizer. If you start from a Folder, Page, or your Homepage, we don't have a gallery where we can show you what the Customizations will look like and we want to make sure we can visually show you what each setting will do!

Great, Thanks !

AceCo55 · April 13, 2015

I must be doing something wrong. I went to a gallery > Customize etc ALL GALLERIES etc ... LIGHTBOX etc ... and turned OFF titles, captions, keywords
Saved ... but I can still see the title (which says "Add title")
Does it take time for the changes to take effect?
... or more likely, can you suggest what I might have done wrong?

leftquark · April 13, 2015

AceCo55 wrote: »

I must be doing something wrong. I went to a gallery > Customize etc ALL GALLERIES etc ... LIGHTBOX etc ... and turned OFF titles, captions, keywords
Saved ... but I can still see the title (which says "Add title")
Does it take time for the changes to take effect?
... or more likely, can you suggest what I might have done wrong?

It should take effect immediately. I see that titles are set to OFF and are hidden when I look as if I'm the site owner. If you close the browser and re-open it do you still see the titles being shown as "Add Title"?

AceCo55 · April 14, 2015

Hi Aaron - thanks for looking. You were right - log out and re-start - I no longer see the "Add Title" ... GREAT

I have asked some supplementary questions in the customization thread.

bokehlover71 · April 15, 2015

Still I see some pixels of the hidden caption below the title in the Lightbox. Isn't it possible to do something with this?

leftquark · April 16, 2015

bokehlover71 wrote: »

Still I see some pixels of the hidden caption below the title in the Lightbox. Isn't it possible to do something with this?

Hi bokehlover71, I noticed you have captions turned ON in the lightbox. Did you mean to turn it OFF? Do you want the captions ON but just displayed a bit lower? If so, try this CSS code:

/* Move the lightbox captions down a bit so they're off screen */
.sm-lightbox-caption {
  margin-top: 11px;
}

bokehlover71 · April 16, 2015

leftquark wrote: »

Hi bokehlover71, I noticed you have captions turned ON in the lightbox. Did you mean to turn it OFF? Do you want the captions ON but just displayed a bit lower?

Yes, I want the captions, but just not visible all the time. Thanks a lot!

Edit: But I see now that if there are no captions (most of my pictures don't have any), the top of the next line below, with a link to the originating album, also is visible. How can I display this text lower too?

Edit 2: OK, I found a way to remove that text completely. I don't need it anyway.

New: Customize Your Lightbox

Comments