Fixing the Caption in the Lightbox

frisson · November 3, 2020

Hello,

I am trying to find if there is a clever way to control how the captions are displayed in the Lightbox. If a caption is particularly long, it gets truncated, which is normal I suppose, but it looks incomplete and does not look very professional. I would prefer to suppress part of the caption. I tried putting in line breaks, padding the caption with spaces, but these are ignored in the lightbox...though they do show up in the photo details when you click on the image. I can of course choose the option to not show the caption on the light box...but then I do not see it in the photo details either. Is there a way to control this? Is there a way to suppress all or part of the caption on the lightbox and still have it visible in the photo details?
Thanks

Hikin' Mike · November 3, 2020

This will hide the captions in the Lightbox, but allow it to display the captions on Photo Details. Add that to your theme's custom CSS section. If you don't know how to do that, there is a tutorial in my signature.

/**
* Hides Captions in Lightbox
*****************************************/
.sm-user-ui .sm-button-label p {display: none;}

frisson · November 3, 2020

Thanks, that worked nicely.

Is there any magic that I can use to display only part of the caption or to get the lightbox to recognize line breaks?

Hikin' Mike · November 3, 2020

@frisson said:
Thanks, that worked nicely.

Is there any magic that I can use to display only part of the caption or to get the lightbox to recognize line breaks?

Not that I know of. It's all or nothing.

Allen · November 3, 2020

I only show a part of caption that shows on the photo.
Also is the actual caption I use class name to hide parts from the photo info caption.
I use this especially on my videos. I do like all the lines being combines so added dots per line.

Smart Gallery: https://www.photosbyat.com/MyKeywords/Bird-Videos/n-gF9bt/
Here is the actual html of a caption.

Carolina Wren <span class="spacer_LB_caption"> • </span> <br>
Riverwoods Park and Trail <span class="spacer_LB_caption"> • </span> <br>
(Riverwoods Conservation Area) <span class="spacer_LB_caption"> • </span> <br>
West end of St. Charles Rock Road <span class="spacer_LB_caption"> • </span> <br>
City of Bridgeton <span class="spacer_LB_caption"> • </span> <br>
St. Louis County, Missouri <span class="spacer_LB_caption"> • </span> <br>
2020-09-15
<br><span class="showLBtitle"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><center><span class="noShowSmart">
<a href="/MyKeywords/Bird-Videos/i-dskL4CM/A">
<span style="color:yellow">Click here to open video in lightbox/full screen</span></a>
</span>

<span class="noShowGallery">
<a href="/Birds/2020-Birding/Birding-2020-September/2020-09-15-Bridgeton-Trail/i-dskL4CM/A">
<span style="color:yellow">Click here to open video in lightbox/full screen</span></a>
</span></center>

BTW, notice on short videos Smug blurs the first about 12 seconds.

Jtring · November 4, 2020

@frisson said:
Thanks, that worked nicely.

Is there any magic that I can use to display only part of the caption or to get the lightbox to recognize line breaks?

There is a way to get most of what you are after, although there are issues. First the good ...

The following piece of CSS will allow regular line breaks (entered with a carriage return, not an HTML br tag) to show in the caption on top of the photo in the lightbox. By itself, that would result in a two-line caption. But this also cuts off the caption after the first line.

.sm-user-ui .sm-lightbox-v2-photo-buttons p {
    white-space:pre-line;
    display: -webkit-box
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

Just so you know what's going on here:
The first line identifies that the following properties are to be applied to the caption at the bottom of a photo in the lightbox.
The second line tells the system to preserve line breaks. ("pre" = preserve)
The third through fifth lines cut things off after one line.

Now the bad.

First, an ellipsis still shows. I know of no way to get rid of it here. For other CSS-experienced people: the usual text-overflow property doesn't work with line-clamp.

Second, while the turning on line breaks should be stable, support for cutting things off after one line using -webkit-line-clamp is fairly recent and some browsers may not do it. In some cases, you could get stuck with a two line caption, the parts before and after the line break. For example, Firefox only supported this starting in early 2019. If someone still has an old version, they'll get the two lines. Internet Explorer never supported it. (But then IE probably has other problems with SmugMug.) I'm a PC person so I can't test Safari, but the second reference below indicates it should work. I have verified that this does work on the most recent Windows versions of Chrome, Firefox, and Edge. I haven't tested any Android browsers. And, of course it's not clear what the future will bring. The -webkit-line-clamp property only appears in a working draft of the Internet's CSS specifications.

References:
My thanks to @leftquark for pointing me at "white-space: pre-wrap": https://www.aaronmphotography.com/Customizations/Gallery/Caption-Line-Breaks , although this particular page dates to the old lightbox
Second, https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp for the full scoop on -webkit-line-clamp

Jtring · November 4, 2020

By the way, have you considered using titles? You can put in a short title and then suppress the caption with

.sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {
    display: none;
}

This only suppresses the caption if a title is present. Both title and caption will show in the details panel. The lightbox display of titles is quite good. I don't use them because SmugMug doesn't allow galleries to be sorted by title, but if they ever add that capability, I'll be using titles and the approach described here.

frisson · November 4, 2020

Thanks, both options go a long way toward what I was looking for.
:
But i do not quite understand what you mean by:

@Jtring said:
By itself, that would result in a two-line caption. But this also cuts off the caption after the first line.

I put several line breaks in my caption for how I wanted it to be formatted in the photo details. All the line breaks were respected on the lightbox, resulting in the entire caption spread out over several lines. I did not see the ellipsis.

frisson · November 4, 2020

I should add that I tried this on both Firefox and Chrome and all the line breaks were respected in both cases.. As far as I know both apps are up to date on my computer.

Jtring · November 4, 2020

Looks like somehow we are either misunderstanding each other or there is some difference between the test I did and your site. Maybe you could post a link to your site so I could take a look. (Or if you don't want to post it publicly, message me.)

A few more words, if it helps. The caption that appears in the photo details section at the left in the lightbox will have all the line breaks. The caption that appears on top of the picture normally has all line breaks stripped out and gets truncated when the first line runs out of room. The code I posted deals with that second caption. With the -webkit-line-clamp stuff, that caption is cut off after the first line break, and it's there I get an ellipsis at the end of that line. If you just had this code:

.sm-user-ui .sm-lightbox-v2-photo-buttons p {
white-space:pre-line;
}

which omits the -webkit-line-clamp line and the two before in the first CSS snippet, and you've had a line break early in the caption, my tests would have suggested you should see a two line caption on top of the picture. I don't have this code live on my site now, so I can't point you at an example. But, again, pass on a link and maybe I can see how things differ between what you are seeing and what I see on my tests.

frisson · November 4, 2020

Thanks for your help. Here is a link to an example:

https://www.robertboire.ca/In-Work/In-work/Test/i-HSWMHcC/A

I had hoped to truncate the caption after the first line - ie the date - in the lightbox

Jtring · November 4, 2020

I made a classic mistake! I omitted a semicolon. Here is the correct CSS, with a critical semi-colon at the end of the third line. Accept my apologies and try this.

.sm-user-ui .sm-lightbox-v2-photo-buttons p {
    white-space:pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

frisson · November 4, 2020

That successfully truncated after the second line... but there are some small residual traces of characters in the third line. Take a look right at the bottom of the image under the date:

https://www.robertboire.ca/In-Work/In-work/Test/i-HSWMHcC/A

Jtring · November 4, 2020

@frisson said:
That successfully truncated after the second line... but there are some small residual traces of characters in the third line. Take a look right at the bottom of the image under the date:

https://www.robertboire.ca/In-Work/In-work/Test/i-HSWMHcC/A

That's weird. I wonder how I missed that last night in my testing. None-the-less, it's fixable. Add this

.sm-user-ui .sm-lightbox-v2-photo-title-and-caption p {
    padding-bottom: 0px;
}

frisson · November 5, 2020

Well I was going to write back that it didn't do anything...then I double checked and realized I had forgot the period before sm... period, semicolon...so annoying.

So, finally it works perfectly.. There are so many things that need to be adjusted by CSS on Smugmug that could simply be options in the setup.

Thanks a lot for your help I really appreciate it!

Jtring · November 5, 2020

One more fix is needed. You can see the issue in the NightTraffic picture in your sample gallery. The caption line can be cut off prematurely. On Night Traffic, only the last "m" gets cut off. I've replicated the issue on a test gallery on my site and can get worse behavior. Basically, the width of the box that contains the caption can get set incorrectly. I'm not sure why. My best guess is that it's one of those "features" with -webkit-line-clamp and its related properties. Add one more item to the "Now the bad" list I had on my first post in this thread. This line-clamp stuff really is a bit on the fringes of CSS ... even though all the major browsers support it and SmugMug uses it in their code.

In any case, let me propose the following full set of code, which addresses this and the earlier issues. I've inserted some comments too.

/* Enables line feeds on lightbox captions and cuts off the caption after the first line */
.sm-user-ui .sm-lightbox-v2-photo-buttons p {
    white-space:pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
/*Adjusts spacing to work around incomplete removal of the later caption lines.*/
.sm-user-ui .sm-lightbox-v2-photo-title-and-caption p {
    padding-bottom: 0px;
}
/*Adjusts the container box for the caption so it is not clipped prematurely.*/
.sm-user-ui .sm-lightbox-v2-photo-buttons > button,
.sm-user-ui .sm-lightbox-v2-photo-buttons > button > div {
    width: inherit;
}

I've been thinking about doing something very much like you wanted, although without the titles. This has given me a chance to work through the issues.

Fixing the Caption in the Lightbox

Comments