UPDATED: Gallery/Folder Titles and Captions Now Display a 2nd Line

leftquark

All,
Up until now, Gallery and Folder Titles would only display 1 line of text. If the titles were longer, we would cut it off and add "...". As of today, we now display 2 lines of the title, and then append the "...". If you need more space for the titles, you could increase the size of the photo used, or use some of the CSS customizations available. This new update works for all styles: Grid, Collage Landscape, etc.

I did notice there were some conflicts with my CSS that I had previously added to my pages. If you notice any conflicts, I recommend commenting out (using /* */) the old code until you verify everything is set.

Additionally, some other customizations may be impacted, such as the centering of titles. I've provided an update to my own Title Centering CSS Customization here: http://www.aaronmphotography.com/Customizations/Sitewide/Center-GalleryName-Text

Allen

This is what I was using for multi-lines. The auto height in this worked for 2, 3 or more lines.
With your change the 3rd line is mostly hidden. Is your new CSS more !important then this?

In "all folders" CSS
.sm-tiles-grid ul li a p {
font-size:95%!important;
padding-left:0!important;
padding-right:0!important;
color:gold!important;
text-align:center;
overflow:visible!important;
white-space:normal!important;
height:auto!important}

example
http://www.photosbyat.com/Birds/2006-Birding/Birding-2006-July-August

Looks like I need this added but auto height is not working.
line-height: 10pt;

Allen

Also all Gallery and Folder Titles are pushed to the right and not centering like some left padding or margin
is added. I can not find where this is applied. Any help?

Or more left padding then right shifting all to the right.
Or whatever, they're not centering.

BigRed

Allen wrote: »

Also all Gallery and Folder Titles are pushed to the right and not centering like some left padding or margin
is added. I can not find where this is applied. Any help?

Or more left padding then right shifting all to the right.
Or whatever, they're not centering.

Looks like maybe it's reserving space for the page/folder/gallery icon, even if hidden with CSS??

Allen

BigRed wrote: »

Looks like maybe it's reserving space for the page/folder/gallery icon, even if hidden with CSS??

Not sure but some of the short titles are pushed to the left, nowhere near center.

BigRed

leftquark wrote: »

All,
... we now display 2 lines of the title, and then append the "...".

My longer titles are not showing the "..."

BigRed

BigRed wrote: »

Looks like maybe it's reserving space for the page/folder/gallery icon, even if hidden with CSS??

Allen wrote: »

Not sure but some of the short titles are pushed to the left, nowhere near center.

Previously, this code of yours (see here) would not only hide the icons but would also free up space for the titles (which it doesn't do any more)

.sm-tile-folder .sm-tile-type-icon:after, 
.sm-tile-album .sm-tile-type-icon:after {
  display: none;
}

ChancyRat

My third line wrap is also not working. I don't have Allen's code, though, I have this in the sitewide css:

/* Place Titles on Thumbnails in Folders.
   Will wrap the long gallery titles in the grid format. */
.sm-tiles-grid .sm-tile-info p:nth-of-type(1) {
  box-shadow: 1px 1px 1px 0px #4A4B4C;
  text-align: center;
  margin-left: 5px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-size: 20px !important;
  overflow: visible !important;
  white-space:normal !important;
  height: auto !important;
 background-color: rgba(255, 255, 175, 1) !important;
}

How can I get 3-4 line wrapping reinstated for gallery thumbnails?

EDIT to add example, 4th gallery in this folder: http://www.joinrats.com/ModifyBehavior

Su2z

leftquark wrote: »

Additionally, some other customizations may be impacted, such as the centering of titles. I've provided an update to my own Title Centering CSS Customization here: http://www.aaronmphotography.com/Customizations/Sitewide/Center-GalleryName-Text

Thank you! I like this change

Jtring

leftquark wrote: »

All,
... As of today, we now display 2 lines of the title, and then append the "...". If you need more space for the titles, you could increase the size of the photo used, or use some of the CSS customizations available. ...

The change also applies to captions. One interesting quirk of this latest change is that the mechanism SM used to allow for 2 line captions is a little different for webkit browsers (like Chrome) and non-webkit browsers (like Firefox). This change required me to patch my site's CSS and I though I'd share it. This is meant as a starting point for others who like to play with this stuff. I expect most sites would need to diddle with this rather than use it directly. (Unfortunately, I've learned the hard way that I'm not really skilled enough to write bullet-proof CSS that always works on other folks sites, so allow me to respectfully decline in advance if you need for customization help.) Anyway, here's what I have:

.sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p {
    overflow: auto;
    max-height: 6.7em;
    font-size:15px;
}
.sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info {
    padding-bottom: 20px;
}
.sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-tile-info-text {
    -webkit-line-clamp: 5;
}

Notes:

• This applies to collage landscape ("row-organic") layout, but I'd guess it would work for collage portrait if you replace "row-organic" with "column-organic" and for thumbnails if you replace "row-organic" with "grid". I've not tried this.
• The overflow command inserts a scroll bar if the caption is too big. Optional, but I like to have it.
• The max-height makes space for 5 rows in my display -- I confess to verbosity -- and this is all that is needed for Firefox. The 6.7em is dependent on the particulars of my site and would likely need adjustment for other sites.
• The -webkit-line-clamp is also needed to show those 5 rows in Chrome. (I had never even heard of the line clamp command before this!)
• The font-size and padding-bottom entries make things more pretty to my eye.

Added note: My site places the captions below L-sized thumbnails in a collage landscape gallery layout, which is what the above was written to address. I'm not sure what would happen if one applied this to a site with captions on top of the thumbnails or with really small thumbnails. Because I use "grid" for the navigation content boxes on pages and folders, the above doesn't apply there. However, the same lower-level classes apply to displays both in galleries and in the navigation content boxes, so if the grid model were used for both, it is possible to write CSS code that adjusts both. (And working through all of that illustrates why writing general bullet-proof add-on CSS is such an art.)

leftquark

Just as a heads up, you no longer need CSS to hide the tile icons. Just turn it off in the content blocks' settings (which is much cleaner/more intuitive and won't conflict with SM code).

BigRed

leftquark wrote: »

Just as a heads up, you no longer need CSS to hide the tile icons. Just turn it off in the content blocks' settings (which is much cleaner/more intuitive and won't conflict with SM code).

Yay! Definite improvement.