I'm happy to see the caption back, thank you. Now I'd like to use the code provided above to move the buy button and caption and title below my image. When I do this, because my lightbox background is white, the title and caption are barely visible. How do I change the title and caption to black? Also, is there a way to change the caption font size?
Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.
Edge. No captions.
Please, SmugMug, fix this on your end, or tell me how to fix it myself.
I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.
Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.
Edge. No captions.
Please, SmugMug, fix this on your end, or tell me how to fix it myself.
I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.
@JSS44 said:
I'm happy to see the caption back, thank you. Now I'd like to use the code provided above to move the buy button and caption and title below my image. When I do this, because my lightbox background is white, the title and caption are barely visible. How do I change the title and caption to black? Also, is there a way to change the caption font size?
Did I miss something earlier, or has there been a change in the last few days to include the caption as well as the title briefly at the foot of the Lightbox image?
What code can I add to suppress the caption, i.e. just show the title?
I've had to edit this a few hours after the original post. I had a second option in here that had some issues and I had to adjust the code on the basic option a bit. So if you saw the earlier version, please disregard.
Since I have some of the same goals, I've been playing with this. Here's some tentative code. Since SmugMug's code is in flux, all is subject to change. And as you'll read below, there are some odd
ins-and-outs here.
The following suppresses captions ONLY WHEN A TITLE IS PRESENT. The code's simple, except there is one little glitch. Smugmug decided that when the title and caption are both present, it was best to remove the photo details icon. So if you start with both and apply the code below, the title, now alone, will not have an icon. But if you started with just a title, Smugmug put the icon in, so it will remain. Kind of a mixed situation. Except on mobile. There, SmugMug never displayed both caption and title together in the first place. There never was an opportunity for a mixed situation. Caption or no caption, if there's a title, you always get the title and the icon on a mobile device. It may be possible, with more work, to restore the icon when it's not present. That's still TBD and probably isn't worth doing until SmugMug's code stabilizes a bit more.
/* Removes the caption in lightbox photo buttons line at the botton of the image
ONLY WHEN A TITLE IS PRESENT.
The title will remain, but on a desktop there will be no photo details icon in this case.
There will be an icon on a mobile display.
If you didn't start out with both a title and caption, nothing will change.
It may be possible to restore the icon in the first case -- maybe -- but that needs research.
2019-08-26. Use advisedly: subject to breakage/change/side-effects as SM updates their code.*/
.sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {
visibility:hidden;
}
Note that my original version here used display:none instead of visibility:hidden. The latter manages the spacing better.
I had a second option to always suppress captions, even if they were the only thing present. Unfortunately, what I wrote removed the caption but left the scrim, the little darkening of the image, behind it. That's OK if there's also a title -- the case above -- but not OK if the caption is alone. At the moment I don't see a way around that.
. . .
Added August 27: In the cold, clear light of morning, the following variation seems best. The second line works the spacing issues. Still no icon though, and at the moment I don't see a way to sneak it in.
.sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {display:none; }
.sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;}
Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?
I've just noticed that the captions in the lightbox are only showing for landscape oriented images. For portrait images, still no captions? Is this intentional?
@JSS44 said:
Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?
Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.
Edge. No captions.
Please, SmugMug, fix this on your end, or tell me how to fix it myself.
I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.
Can you share a link where this happens? I don't see this on your site, or anyone else's photos who have been commenting on this thread. Have you checked other folks sites (just look at their Signatures and you can jump to their photos).
@JSS44 said:
Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?
There are two conditions I've mentioned. (1) Captions don't appear, (2) With Firefox, captions appear but only for a fraction of a second then they disappear. You are not seeing those conditions on the Lightbox on my site? Or, on what part of the Lightbox window do you see captions?
I see no captions on the Lightbox on my site with the following:
Windows 7 - Chrome
Windows 10 - Chrome
Windows 10 - Edge (also the errant reload we've talked about causes the image to render oversharpened)
iMac - Chrome
iMac - Safari (and also the 'X' close button is missing - another thing that needs to be fixed)
iPhone 7plus - Safari
With Windows 10 Firefox, the caption appears for a fraction of a second, then instantly disappears. The caption appears, for a fraction of a second only, in the upper right hand corner within the image. (My images include a white surrounding canvas.)
Those are all that I've checked.
For a particular example, on my website: Click '1979-1984' in the Menu. Click 'Thumbs/Captions'. You see the thumbnail images with the captions underneath (the captions are just numerals for the images in sequence order). Click on the first image (with caption '1'). Now you are in Lightbox looking at that image. There is no caption there for me on that first image or any other image in the sequence, as listed above with those systems/browsers. And this holds for the other Lightboxes on my site that I have spot checked. You see otherwise?
I looked at other people's sites and do see captions.
@blouie said:
leftquark, thank you for your help.
For a particular example, on my website: Click '1979-1984' in the Menu. Click 'Thumbs/Captions'. You see the thumbnail images with the captions underneath (the captions are just numerals for the images in sequence order). Click on the first image (with caption '1'). Now you are in Lightbox looking at that image. There is no caption there for me on that first image or any other image in the sequence, as listed above with those systems/browsers. And this holds for the other Lightboxes on my site that I have spot checked. You see otherwise?
I looked at other people's sites and do see captions.
What is your website? Might be helpful to add it to your signature...
That's what SmugMug support told me to add in order to hide the "View Photo Details" button. And it does work to hide the "View Photo Details" button, but it also hid the captions. (But it did not hide the "Full Screen" button nor the "X" button" - I added another CSS to hide the "Full Screen" button, but, of course, I am keeping the 'X' button).
What I want on the Lightbox is exactly this, and nothing else (as it was before the new Lightbox):
the image
the caption (in the lower left of the window)
'X' close button (the upper right of the window seems to be the default, and I guess that's okay)
(And for the 'X' close button, I want to remove the hover popup that says the word "Close".)
So, as I mentioned, what I want to do is hide the "View Photo Details" button but automatically display the captions themselves.
When I take off that CSS, it brings back the "View Photo Details" button, now in white, with a gray shading behind it, inside the area of my image. And to see the captions in black (now placed next to the left arrow), you have to click the "View Photo Details" button, which then shifts the image from the center of the window toward the right.
I don't want any of that extraneous, distracting junk.
I just want the caption, in black, in the lower left, always there, no clicking for it, no other buttons - just as it was before the new Lightbox.
@blouie said:
I just want the caption, in black, in the lower left, always there, no clicking for it, no other buttons - just as it was before the new Lightbox.
With that said, I'd love to keep getting a better understanding of your workflow such that having captions on top of the photo is crucial. How do you and your customers use those captions?
I use caption field mostly on my sport photos, to give information about athlete's name, name of the event etc. Lots of photos from events. My clients need to immediately see filename (to be honest, right now I use Title field for filename (add them automatically in Photomechanic), since old LB didn't show filenames when captions were present) and captions (rider name, horse name, event name). Most of them view on mobile nowadays. Quick basic info was always available before both in mobile and computer and it was important for us.
The situation is obviously going to be in flux for a while as SmugMug continues making changes in the Lightbox. I removed the CSS code suggested at the beginning of this thread so I can see what's going on currently.
It would be very helpful if SmugMug folks could create a change log something like this: https://www.photools.com/release-notes/. The 'Product Updates' pages are too behind and not detailed enough to follow what's going on. At some future point it would be very valuable to have a stable page that listed CSS options that could be used (something like the initial list in this thread, but with more detail on how to address specific display behaviors).
A suggestion for the left-side Details panel: It would be very helpful if there were a option to have buttons/up-down arrows to roll up/unroll the different sections there. For example, Camera Info is not something my users would normally want to see (but might on occasion); being able to hide this via a rollup would allow the map to be seen for example without having to scroll. This would be much preferable to having the behavior hard-coded because it would allow for individual, short-term needs.
I assume the map section will be working sometime in the future?
Lastly, why isn't there an option in this forum software to cancel a draft post?
After the Caption was added, now the Details icon appears to have been removed from the foot of the image - is that correct?
Keeping up with this constantly moving feast is doing my head in. When will the new presentation of the Lightbox be locked down, at least for a month or two, so I can stabilise my site? I feel I'm chasing a moving target at present.
_I've had to edit this a few hours after the original post ....
Added August 27: In the cold, clear light of morning, the following variation seems best. The second line works the spacing issues. Still no icon though, and at the moment I don't see a way to sneak it in.
.sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {display:none; }
.sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;}
These changes are working great for my landscape oriented images but the title text on portrait images is staying white. Is there a way to change that? (The captions aren't showing at all on portrait images at the moment--even when I leave the title and caption to display over the image rather than below it-- but I'm hoping that will change.) I really appreciate the help.
These changes are working great for my landscape oriented images but the title text on portrait images is staying white. Is there a way to change that? (The captions aren't showing at all on portrait images at the moment--even when I leave the title and caption to display over the image rather than below it-- but I'm hoping that will change.) I really appreciate the help.
In order to get captions back with that code, I had to delete the code to hide the "View Photos Details" button. So the result is that I got the caption, and it was positioned and colored perfectly, but the unwanted "View Photo Details" button comes back, and the unwanted gray shading at the bottom of my image comes back.
Comments
The caption back without the "Show Photo Details" button?
I removed the "Show Photo Details" button. How can I show the caption in the lower left of the window?
Also, how can I remove the "Full Screen" button?
.sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I'm happy to see the caption back, thank you. Now I'd like to use the code provided above to move the buy button and caption and title below my image. When I do this, because my lightbox background is white, the title and caption are barely visible. How do I change the title and caption to black? Also, is there a way to change the caption font size?
Hikin' Mike, it worked. Thanks very much.
Captions:
Chrome. No captions.
Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.
Edge. No captions.
Please, SmugMug, fix this on your end, or tell me how to fix it myself.
I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.
No issues with Chrome or Firefox using Win7.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
.sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p, .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2 { color: black; } .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p { font-size: 30px; }Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
@W.W. Webster said:
I've had to edit this a few hours after the original post. I had a second option in here that had some issues and I had to adjust the code on the basic option a bit. So if you saw the earlier version, please disregard.
Since I have some of the same goals, I've been playing with this. Here's some tentative code. Since SmugMug's code is in flux, all is subject to change. And as you'll read below, there are some odd
ins-and-outs here.
The following suppresses captions ONLY WHEN A TITLE IS PRESENT. The code's simple, except there is one little glitch. Smugmug decided that when the title and caption are both present, it was best to remove the photo details icon. So if you start with both and apply the code below, the title, now alone, will not have an icon. But if you started with just a title, Smugmug put the icon in, so it will remain. Kind of a mixed situation. Except on mobile. There, SmugMug never displayed both caption and title together in the first place. There never was an opportunity for a mixed situation. Caption or no caption, if there's a title, you always get the title and the icon on a mobile device. It may be possible, with more work, to restore the icon when it's not present. That's still TBD and probably isn't worth doing until SmugMug's code stabilizes a bit more.
/* Removes the caption in lightbox photo buttons line at the botton of the image ONLY WHEN A TITLE IS PRESENT. The title will remain, but on a desktop there will be no photo details icon in this case. There will be an icon on a mobile display. If you didn't start out with both a title and caption, nothing will change. It may be possible to restore the icon in the first case -- maybe -- but that needs research. 2019-08-26. Use advisedly: subject to breakage/change/side-effects as SM updates their code.*/ .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis { visibility:hidden; }Note that my original version here used display:none instead of visibility:hidden. The latter manages the spacing better.
I had a second option to always suppress captions, even if they were the only thing present. Unfortunately, what I wrote removed the caption but left the scrim, the little darkening of the image, behind it. That's OK if there's also a title -- the case above -- but not OK if the caption is alone. At the moment I don't see a way around that.
. . .
Added August 27: In the cold, clear light of morning, the following variation seems best. The second line works the spacing issues. Still no icon though, and at the moment I don't see a way to sneak it in.
.sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {display:none; } .sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;}Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?
I've just noticed that the captions in the lightbox are only showing for landscape oriented images. For portrait images, still no captions? Is this intentional?
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background-color: transparent;}Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Can you share a link where this happens? I don't see this on your site, or anyone else's photos who have been commenting on this thread. Have you checked other folks sites (just look at their Signatures and you can jump to their photos).
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sorry, that doesn't work but this does:
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark { background: none;}leftquark, thank you for your help.
There are two conditions I've mentioned. (1) Captions don't appear, (2) With Firefox, captions appear but only for a fraction of a second then they disappear. You are not seeing those conditions on the Lightbox on my site? Or, on what part of the Lightbox window do you see captions?
I see no captions on the Lightbox on my site with the following:
Windows 7 - Chrome
Windows 10 - Chrome
Windows 10 - Edge (also the errant reload we've talked about causes the image to render oversharpened)
iMac - Chrome
iMac - Safari (and also the 'X' close button is missing - another thing that needs to be fixed)
iPhone 7plus - Safari
With Windows 10 Firefox, the caption appears for a fraction of a second, then instantly disappears. The caption appears, for a fraction of a second only, in the upper right hand corner within the image. (My images include a white surrounding canvas.)
Those are all that I've checked.
For a particular example, on my website: Click '1979-1984' in the Menu. Click 'Thumbs/Captions'. You see the thumbnail images with the captions underneath (the captions are just numerals for the images in sequence order). Click on the first image (with caption '1'). Now you are in Lightbox looking at that image. There is no caption there for me on that first image or any other image in the sequence, as listed above with those systems/browsers. And this holds for the other Lightboxes on my site that I have spot checked. You see otherwise?
I looked at other people's sites and do see captions.
What is your website? Might be helpful to add it to your signature...
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Thanks, Hikin' Mike. I just added the URL to my profile.
Well, you have this hiding all of the buttons, including the captions and titles.
.sm-user-ui .sm-lightbox-v2-photo-buttons { display:none }Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
That's what SmugMug support told me to add in order to hide the "View Photo Details" button. And it does work to hide the "View Photo Details" button, but it also hid the captions. (But it did not hide the "Full Screen" button nor the "X" button" - I added another CSS to hide the "Full Screen" button, but, of course, I am keeping the 'X' button).
What I want on the Lightbox is exactly this, and nothing else (as it was before the new Lightbox):
the image
the caption (in the lower left of the window)
'X' close button (the upper right of the window seems to be the default, and I guess that's okay)
(And for the 'X' close button, I want to remove the hover popup that says the word "Close".)
So, as I mentioned, what I want to do is hide the "View Photo Details" button but automatically display the captions themselves.
You are not seeing anything because you have CSS hiding everything.
Removing your CSS and the numbers show in the caption.
My Website index | My Blog
When I take off that CSS, it brings back the "View Photo Details" button, now in white, with a gray shading behind it, inside the area of my image. And to see the captions in black (now placed next to the left arrow), you have to click the "View Photo Details" button, which then shifts the image from the center of the window toward the right.
I don't want any of that extraneous, distracting junk.
I just want the caption, in black, in the lower left, always there, no clicking for it, no other buttons - just as it was before the new Lightbox.
Try this:
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"], .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"] {display: none;} .sm-user-ui .sm-lightbox-v2-hideable {opacity: 1 !important;} .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] { position: fixed; bottom: 20px; left: 20px; cursor: default; } .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}You'll have to remove some of your old code first.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I use caption field mostly on my sport photos, to give information about athlete's name, name of the event etc. Lots of photos from events. My clients need to immediately see filename (to be honest, right now I use Title field for filename (add them automatically in Photomechanic), since old LB didn't show filenames when captions were present) and captions (rider name, horse name, event name). Most of them view on mobile nowadays. Quick basic info was always available before both in mobile and computer and it was important for us.
The situation is obviously going to be in flux for a while as SmugMug continues making changes in the Lightbox. I removed the CSS code suggested at the beginning of this thread so I can see what's going on currently.
It would be very helpful if SmugMug folks could create a change log something like this: https://www.photools.com/release-notes/. The 'Product Updates' pages are too behind and not detailed enough to follow what's going on. At some future point it would be very valuable to have a stable page that listed CSS options that could be used (something like the initial list in this thread, but with more detail on how to address specific display behaviors).
A suggestion for the left-side Details panel: It would be very helpful if there were a option to have buttons/up-down arrows to roll up/unroll the different sections there. For example, Camera Info is not something my users would normally want to see (but might on occasion); being able to hide this via a rollup would allow the map to be seen for example without having to scroll. This would be much preferable to having the behavior hard-coded because it would allow for individual, short-term needs.
I assume the map section will be working sometime in the future?
Lastly, why isn't there an option in this forum software to cancel a draft post?
jcharmon.smugmug.com
Is there a way to make it transparent or match the background of the lightbox?
Perfect, thank you.
After the Caption was added, now the Details icon appears to have been removed from the foot of the image - is that correct?
Keeping up with this constantly moving feast is doing my head in. When will the new presentation of the Lightbox be locked down, at least for a month or two, so I can stabilise my site? I feel I'm chasing a moving target at present.
Thanks, Jim, I appreciate it!
These changes are working great for my landscape oriented images but the title text on portrait images is staying white. Is there a way to change that? (The captions aren't showing at all on portrait images at the moment--even when I leave the title and caption to display over the image rather than below it-- but I'm hoping that will change.) I really appreciate the help.
Try this instead:
.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon, .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label, .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2, .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4 {color:black}Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Hi Hikin' Mike,
That didn't work.
In order to get captions back with that code, I had to delete the code to hide the "View Photos Details" button. So the result is that I got the caption, and it was positioned and colored perfectly, but the unwanted "View Photo Details" button comes back, and the unwanted gray shading at the bottom of my image comes back.