How to make figcaption wrap to 2 lines if needed

Backlight 4, 5 & 6 Support
#1

I’ve tried enabling CSS but I’m not able to change the height of figcaption or enable word wrap. Some of my captions are longer than the width of the thumbnails. How can I do this?

#2

The css may be different depending on the image presentation you’re using. And whether it’s Pangolin or Kookaburra might make a difference.

Can you supply a link to an album that’s using long captions?

#3

Here you go, thanks Rod.

#4

Ah, this is in an album set.
Have you tried changing the Line Height in the template?
Thumbnail Grid > Titles

#5

try this in your custom css:

.albums-iconic .album-title {
white-space:normal;
text-wrap: wrap;
}
#6

That’s it, thanks Rod. I always struggle with CSS finding the right combination of selectors. I had tried the Thumbnail Grid → Titles but that just increases the space between the thumbnails - not the lines of text. It would be good to add that as a wish list item for Matthew.

#7

The problem with doing this is inconsistent looking layout. Some album sets could look different than others depending on the length of just one album title

#8

But using Classic thumbnail grid having some descriptions longer than others doesn’t bother me when it looks like this:

The thing is I’m using the LR album title for the thumbnail description and the title on the album page and I don’t want to be restricted in album title length or have to write a thumbnail description and a page title separately for every album. This works OK for me.

#9

That’s what counts :slightly_smiling_face:

#10

OK so now I have to do the same on the thumbnails page. Wrap the description if it’s longer than one line which it is here:

OZA White-handed gibbons - see first thumbnail.

I tried using these CSS classes (since there’s a span and no p tag) but it’s not working. I’d like to use the Label {ColorLabel} field since I’ve used up some of the other descriptive ones. Can you edit this for me so it works?

.gallery .thumbnail-background {
white-space:normal;
text-wrap: wrap;
line-height: 1.5em;
padding-top:5px;
}

Thanks.

#11

if I remember correctly, the metadata information in album thumbnails is placed in list items <li>

#14

Right. I was looking at the span tag above that. This appears to target the right space but I can’t get it to increase the line-height or make the text wrap.

ul.image_metadata li.metadata-one  {
    white-space:normal;
    text-wrap: wrap;
    line-height: 2.5em;
    padding-top:5px;
    }
#15

I got it to wrap when I added height: 3em; with line-height: 1.5em;

1 Like
#16

That did it. Thanks Daniel. I was missing the height for the container.

1 Like