Captions outside the lightbox

JakobyJakoby Registered Users Posts: 2 Beginner grinner
Smugmug is almost perfect ... if they can just implement this one feature in a future release...
Please enable the ability for captions to be positioned outside of the image. It would allow the caption text to contrast more against a plain background, and not take away from the image itself.
That's it, that's all I beg for.

Comments

  • StanCunninghamStanCunningham Registered Users Posts: 8 Big grins

    Whoops, I was hoping I could do this

  • Mike55YUMike55YU Registered Users Posts: 7 Big grins

    This works for me, although I am told it is not "good" code. Anyhow you can try it if you want. You can readily customize the top: (number of negative pixels to determine how far below the image you want to place the caption), font-size, background-color, etc.

    /* caption center */
    

    sm-gallery .sm-tile-info {

    max-width: 600PX;
    text-align: center;
    color: #000!important;
    position: relative;
    left: 300px;
    top: -80px;
    font-size:24px;
    background-color: #f9f9f5;
    }

    or .sm-tile-caption in the first line if you have trouble with this.

  • tom_brennantom_brennan Registered Users Posts: 4 Big grins
    edited January 30, 2024

    Try this CSS, from https://dgrin.com/discussion/267219/lightbox-help

    /*
    8. Render title and buy button below image on desktop
    & tablet landscape viewports.
    */
    @media screen and (min-width: 961px) {
        .sm-user-ui .sm-lightbox-v2-content {
            height: calc(100% - 72px);
        }
    
        .sm-user-ui .sm-lightbox-v2-photo-buttons {
            padding: 0;
            bottom: -60px;
        }
    
        .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
            background: none;
        }
    }
    

    Essentially, it shrinks the lightbox by 72px, so the caption (generally!) sits below the image.

    If you need to know where to add this to your site, see here:
    https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

    I have it on "All Galleries"

Sign In or Register to comment.