Collage Landscape show captions under the images

BradfordBennBradfordBenn Registered Users Posts: 2,506 Major grins
edited April 17, 2015 in SmugMug Customization
Hello DGrinners -

I am trying to caption images more often to help tell the story in a gallery. I prefer the Collage Landscape Gallery for the appearance. However I am a little stumped with either customizing or missing a setting. In the gallery http://photos.bradfordbenn.com/Links/Standing-Desk-Project-2015/i-Wkvzrvw I had to change to "SmugMug" style to have the title and captions show under the enlarged image. If the gallery is in Collage Landscape Mode the caption is not fully exposed, not only does one have to hover over it it does not wrap well.

What I could like to do is have the image show as a thumbnail but have the caption underneath it using the Shadow style that is available. Is that possible? I would be happy with just the Captions. In a perfect world I could do something like this:
Cool Title
Some cool text that tells a story.

Thank you.
-=Bradford

Pictures | Website | Blog | Twitter | Contact

Comments

  • JtringJtring Registered Users Posts: 675 Major grins
    edited April 5, 2015
    I have set up my Collage Landscape galleries to do something like what you are after. My basic CL setup has 12px between pictures, large photos, info under the pictures, and an icon buy button. Then I have some custom CSS to allow more space between pictures vertically and to let full captions show. Below is a small variation of what I have in place. I only use captions, but here I've broken out the code for titles and captions because they may want different handling.
    /* FULL TITLE AND CAPTION IN COLLAGE LANDSCAPE STYLE GALLERIES:
    Allows for multi-line titles and captions in galleries using the collage landscape display.
    The first group below deals with titles; the second captions.
    J. T. Ringland 2015-04-05*/
    .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p.sm-tile-title {
        overflow: auto;
        white-space: normal;
        height: 1.3em;
        font-size:18px;
        font-weight:bold;
        margin: .2em 0 0;
    }
    .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p.sm-tile-caption {
        overflow: auto;
        white-space: normal;
        height: 6.5em;
        font-size:15px;
        margin: .1em 0 .2em;
    }
    
    The overflow and white-space properties let the full captions show. You may want to diddle the other parameters. The height parameter defines how much vertical space is available for the title and caption. The font-size and font-weight are what you would expect. Margin gives values for top, sides, and bottom. If you want SmugMug's defaults for any of these, just remove lines. On the class lists at the beginning of each group, mind the spaces: it's intentional that some classes have spaces between them and some not.

    You can see this in action on my site. See the sig below. My CSS is listed at http://jtringl.smugmug.com/CSS. Feel free to take and use of any of my code.

    Usual disclaimers. Back up first. No guarantees. I adjust my code as seems right to me, so don't expect that what you see this month will still be there next. And I'm just a hiker and photographer who knows some CSS, not a code developer or official SmugMug support person, so I'm not really in position to provide much help outside the occasional Dgrin post.
    Jim Ringland . . . . . jtringl.smugmug.com
  • BradfordBennBradfordBenn Registered Users Posts: 2,506 Major grins
    edited April 5, 2015
    Thank you Jim. I will go tweak some. I kinda thought there would be an option I was just missing.
    -=Bradford

    Pictures | Website | Blog | Twitter | Contact
  • BradfordBennBradfordBenn Registered Users Posts: 2,506 Major grins
    edited April 15, 2015
    Thanks. That still didn't work, I might just do it as a blog post instead and link to the pictures inline.
    -=Bradford

    Pictures | Website | Blog | Twitter | Contact
  • JtringJtring Registered Users Posts: 675 Major grins
    edited April 17, 2015
    Sorry it didn't work. The problem with the CSS approach is that you often have to fiddle around to get the code to work at all ... and then tweak some more to get the results you want in the context of your theme and other settings. I'm all the more amazed at folks like Nickthedude or Leftquark who manage to put out CSS that seems universal.
    Jim Ringland . . . . . jtringl.smugmug.com
Sign In or Register to comment.