Restrict Caption length

flieger28 · January 31, 2015

Hi,

i have a site with a few galleries and from Time to time i like to put many Infos under a picture. But i wonder if there is an option to cut the text. I would like to have a maximum number of characters on the Gallery Page, kind of a preview. The whole text should only be seen when watching the particular photo. Right now it looks not really nice. Is there a way?

Thanks in advance

rainforest1155 · February 1, 2015

You can disable the info display below a photo. From within a gallery, go to customize > "content and design". There, hold your mouse over the gallery content and click the wrench button. Now click on the gallery style that you use in you gallery and you'll be presented with the settings for it. Adjust the info style setting as you'd like. Setting it to off, should hide the captions below the photo tiles.

Allen · February 1, 2015

It's either show or not show the caption for a photo. But hiding parts of the caption can be done with CSS.

In the caption using html add a span around what you don't want to show.
text

Then in CSS add two rules, one to "display:none" everywhere and another to turn it back on
for lightbox.

Down side, you'd have to edit every caption you'd want this to apply.

flieger28 · February 2, 2015

Thanks Allen and rainforest
Finally i choose the version rainforested posted. Even I like Allens fix, and in my opinion it is the smarter one, Allens resolution is not a care free solution.

leftquark · February 2, 2015

There's some things that could be done to limit it and add a "show more" button ... using code similar to:

.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-caption {
    height: 9em !important;
    overflow: hidden;
    line-height: 1.5em;
    position:relative;
}
.sm-gallery .sm-tile .sm-tile-caption:after {
    background-color: white;
    padding-left:4em;
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    color:#FF2050;
    content:"Read more »";
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%);
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );    
}

It looks like you have a solution but if you'd like me to throw together this in more detail, let me know.

Restrict Caption length

Comments