Customizing the New Lightbox

leftquarkleftquark SmugMug Product TeamPosts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
Hiya folks!
In the next few weeks we'll be rolling out our "New Lightbox" to everyone and everywhere on your sites. You've been experiencing it for a few months within the Organizer and we're pleased to launch this improved experience everywhere. The new design incorporates a ton of feedback from all of you and fixes, by default, many of the Customizations you have made to your Lightboxes. The new Lightbox will _not_ inherit any of your old customizations, so if there was a specific customization you'd like returned, you'll have to customize this new Lightbox. We've taken the most popular customizations and are providing some sample CSS for those of you that would like to tweak the new Lightbox when it launches in a few weeks.

Here are some options you can add to personalize your Lightbox:

Warning: As always, use at your own risk. These can break at any time should we make improvements to the Lightbox in the future.

Add these to your theme's "Advanced CSS" section in the Theme editor.

1. Increase the Size of the Icons:
/*
1. Increase Icon Size

The CSS below increases the size of the right icons, left icons,
and navigation buttons.

To target only the left icons replace `.sm-lightbox-v2-navbar`
with `.sm-lightbox-v2-navbar-primary`

To target only the right icons replace `.sm-lightbox-v2-navbar`
with `.sm-lightbox-v2-navbar-secondary`
*/
.sm-user-ui .sm-lightbox-v2-navbar .sm-button {
    padding: 0;
}

.sm-user-ui .sm-lightbox-v2-navbar .sm-icon-large {
    width: 36px;
    height: 36px;
}

.sm-user-ui .sm-lightbox-v2-navbar .sm-icon-small {
    width: 22px;
    height: 23px;
}

.sm-user-ui .sm-lightbox-v2-nav-button .sm-icon {
    height: 44px;
    width: 44px;
}
appw91m4p704.png

2. Make the Lightbox Background color different from your Theme's "Primary Color"
/*
2a. Change the LB background color

This can be done in the customizer by setting your theme's
"Primary Color". If you want a different color for your lightbox
background then your site's "Primary Color" use the following CSS.
*/
.sm-user-ui .sm-lightbox-v2,
.sm-user-ui .sm-lightbox-v2-navbar,
.sm-user-ui .sm-lightbox-v2-sidebar {
    background-color: DeepSkyBlue; /* or #000, #8B008B, etc */
}
wnx32jjpjh9q.png

2b. Make the Lightbox Background Transparent
/*
For a transparent background use rgba()
Note: The swipe interaction will move content behind the action bars
so this is recommended on non-touch devices
*/
html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-modal-mask.sm-lightbox-v2-modal-mask[data-opacity="opaque"],
html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-lightbox-v2-navbar,
html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-lightbox-v2-sidebar {
    background: none;
}

html:not(.sm-platform-ios):not(.sm-platform-android).sm-user-ui .sm-lightbox-v2 {
    background-color: rgba(0, 0, 0, 0.85);
}
fc16wkp7fwsh.png

3. Move the image buttons and sidebar from the left, to the right:
/*
3. Move the image buttons and sidebar to the right on desktop &
tablet landscape viewports

!!Note tooltips glitch out with this customization until we update
our tooltips, which is planned soon
*/
@media screen and (min-width: 961px) {
    .sm-user-ui .sm-lightbox-v2 {
        grid-template-areas: "rightnav content sidebar leftnav";
        grid-template-columns: 60px auto max-content 60px;
    }
}
tgijfuhsv09c.png

4. Change the Sidebar to be a (non-draggable) overlay:
/*
4. Render the sidebar as a (non draggable) overlay on desktop &
tablet landscape viewports.

Note: Looks best on images with minimal text, EXIF, and/or map
sidebar content.
*/
@media screen and (min-width: 961px) {
    .sm-user-ui .sm-lightbox-v2 {
        grid-template-areas: "leftnav content rightnav";
        grid-template-columns: 60px auto 60px;
    }

    .sm-user-ui .sm-lightbox-v2-sidebar {
        position: absolute;
        left: 80px;
        top: 20px;
        max-height: calc(100vh - 40px);
        border: 1px solid gray;
    }

    .sm-user-ui .sm-lightbox-v2-sidebar-content {
        padding: 24px;
    }
}
j599ovrrfbtv.png
SmugMug Director of Product / dGrin Afficionado
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
«134567

Comments

  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    5. Make the image full width (navbars will overlap the photo):
    /*
    5. Make image full width (so navbars overlap image) on desktop &
    tablet landscape viewports.
    */
    @media screen and (min-width: 961px) {
        .sm-user-ui .sm-lightbox-v2 {
            display: flex;
        }
    
        .sm-user-ui .sm-lightbox-v2-navbar,
        .sm-user-ui .sm-lightbox-v2-sidebar,
        .sm-user-ui .sm-lightbox-v2[data-lightbox-mode="default"] .sm-lightbox-v2-nav-button,
        .sm-user-ui .sm-lightbox-v2[data-lightbox-mode="slideshow"] .sm-lightbox-v2-nav-button {
            background: rgba(0, 0, 0, 0.5);
        }
    
        .sm-user-ui .sm-lightbox-v2-navbar,
        .sm-user-ui .sm-lightbox-v2-sidebar {
            position: absolute;
            top: 0;
        }
    
        .sm-user-ui .sm-lightbox-v2:not([data-lightbox-mode="default"]):not([data-lightbox-mode="slideshow"]) .sm-lightbox-v2-navbar-primary,
        .sm-user-ui .sm-lightbox-v2:not([data-lightbox-mode="default"]):not([data-lightbox-mode="slideshow"]) .sm-lightbox-v2-sidebar {
            height: 100vh;
        }
    
        .sm-user-ui .sm-lightbox-v2-sidebar {
            left: 60px;
        }
    
        .sm-user-ui .sm-lightbox-v2-navbar-primary {
            left: 0;
        }
    
        .sm-user-ui .sm-lightbox-v2-navbar-secondary {
            right: 0;
        }
    }
    
    iilr09edwqms.png

    6. Change the Slideshow Slide Transition Effect:
    coming soon

    7. Move the image buttons to the top:
    /*
    7. Move the image buttons to the top on desktop &
    tablet landscape viewports.
    
    Note: Tool tips are odd in that they overlap the buttons to the right
    until we replace them with a smarter version, coming soon
    */
    @media screen and (min-width: 961px) {
        .sm-user-ui  .sm-lightbox-v2-primary-controls-list {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, 0);
            display: flex;
            align-items: center;
        }
    
        .sm-user-ui .sm-lightbox-v2-primary-controls-list .sm-button-square[data-selected="true"]::after {
            border-top: 3px solid hotpink;
            border-left: 0;
            top: 0;
            left: 0;
            width: 100%;
        }
    
        .sm-user-ui .sm-lightbox-v2-icon-button-compact {
            height: 48px;
        }
    }
    
    yl3409qliayz.png
    c615vi9eqm9h.png

    8. Move the "Title" and "Buy" buttons below the photo
    /*
    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;
        }
    }
    
    0jqae3otzg8a.png

    Display the Title, Caption and Keyboard at the Bottom:
    /*
    9. Render title, caption, and keywords at bottom on desktop
    & tablet landscape viewports.
    
    Works best for short text content (title, caption, & keywords) and
    disabled camera info and map. Also works good for images with just
    a title or just a caption. Adjust bottom row accordingly.
    */
    @media screen and (min-width: 961px) {
        .sm-user-ui .sm-lightbox-v2[data-lightbox-mode="info"] {
            grid-template-areas: "leftnav content rightnav"
                "sidebar sidebar sidebar";
            grid-template-columns: 60px auto 60px;
            grid-template-rows: 1fr 180px; /* Adjust 180px height based on average amount text content */
        }
    
        .sm-user-ui .sm-lightbox-v2[data-lightbox-mode="info"] .sm-lightbox-v2-sidebar {
            width: auto;
        }
    }
    
    kjz9dgvgnk06.png

    Big thanks to our Sorcerer @AJLemos for putting these together.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited July 26, 2019
    Since the New Lightbox is only live in the Organizer, which ignores all Customizations (including these CSS ones), I can turn on the New Lightbox for any of you that would like to try to customize your Lightbox. Send me a Private Message and I can enable it for your account; your visitors will still see the old lightbox until we launch this live.
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,677Registered Users Major grins

    You left out adding labels to buttons?

    Al - Just a volunteer here having fun
    My Website | My Blog
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Allen said:
    You left out adding labels to buttons?

    The new design includes "Tooltips" in place of having labels on the icons, since there isn't room for label below or next to the icons. One of the other customization layouts might be better for adding labels.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • picturebikepicturebike Major grins Posts: 158Registered Users Major grins

    Does this mean as soon as this becomes live both my business smug sites are going to change from how they appear now ? my main concern is currently i have numbers showing in the corners of the photos so my clients can let me know what photos they want to order. I really don't want to loose this as will cause me big problems as i have a high turn over of clients viewing and then contacting me to order with the picture numbers. Someone from this forum kindly did the code for the numbers for me years ago and i dont know how to re do it.

  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @picturebike said:
    Does this mean as soon as this becomes live both my business smug sites are going to change from how they appear now ? my main concern is currently i have numbers showing in the corners of the photos so my clients can let me know what photos they want to order. I really don't want to loose this as will cause me big problems as i have a high turn over of clients viewing and then contacting me to order with the picture numbers. Someone from this forum kindly did the code for the numbers for me years ago and i dont know how to re do it.

    Hi @picturebike: would you mind sharing a link to one of your sites so I can take a look and see how we can best solve your needs.

    I’ll also mention one other improvement which might help you: in the new Lightbox we’ve improved the Show Filenames option in gallery settings... it will display the filename in addition to your title and caption. If you enabled that option in your Gallery Settings, you could have your clients send you the list of filenames instead of image numbers.

    For me, it’s easier to have the list of filenames and find them in Lightroom or Photomechanic than to have to take the photo numbers and figure out which photo that is. If I upload a new photo then it throws the photo numbers off, so filenames are again more useful.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • picturebikepicturebike Major grins Posts: 158Registered Users Major grins

    Hi heres a link to how my images are displayed, you should see a number in the left corner, Im told for some reason the numbers dont always show on some mobiles and tablets. Thanks Harry
    https://picturebike.smugmug.com/Sports/Mildenhall/Mildenhall-25-7-19/Mildenhall-25-7-19-ADULTS/

  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @picturebike said:
    Hi heres a link to how my images are displayed, you should see a number in the left corner, Im told for some reason the numbers dont always show on some mobiles and tablets. Thanks Harry
    https://picturebike.smugmug.com/Sports/Mildenhall/Mildenhall-25-7-19/Mildenhall-25-7-19-ADULTS/

    It looks like you have the photo numbers on top of the gallery photos, not in the Lightbox (the Lightbox is what opens after you click on a photo), so you should be unaffected

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • picturebikepicturebike Major grins Posts: 158Registered Users Major grins

    Ok thats good news, hopefully be ok then. Thank You

  • JSS44JSS44 Big grins Posts: 46Registered Users Big grins

    @leftquark said:
    Since the New Lightbox is only live in the Organizer, which ignores all Customizations (including these CSS ones), I can turn on the New Lightbox for any of you that would like to try to customize your Lightbox. Send me a Private Message and I can enable it for your account; your visitors will still see the old lightbox until we launch this live.

    Apologies for posting here but not sure I know how to send a message correctly here (I tried). I would like the new lightbox turned on for both of my accounts, please: foundviewgallery.com and jodystuartphotography.com. Thank you.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

    @JSS44 said:
    Apologies for posting here but not sure I know how to send a message correctly here (I tried). I would like the new lightbox turned on for both of my accounts, please: foundviewgallery.com and jodystuartphotography.com. Thank you.

    Click on his profile and there is a blue envelope icon and 'Message' link.

  • ParisParis Major grins Posts: 126Registered Users Major grins

    So... am I right in assuming that the only thing that will undergo change is the LightBox page - i.e the page that displays the large photo after the thumbnail is clicked.
    And everything else pertaining to the look and format of my site will not be altered?

  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Paris said:
    So... am I right in assuming that the only thing that will undergo change is the LightBox page - i.e the page that displays the large photo after the thumbnail is clicked.
    And everything else pertaining to the look and format of my site will not be altered?

    You’re correct!

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @JSS44 said:

    @leftquark said:
    Since the New Lightbox is only live in the Organizer, which ignores all Customizations (including these CSS ones), I can turn on the New Lightbox for any of you that would like to try to customize your Lightbox. Send me a Private Message and I can enable it for your account; your visitors will still see the old lightbox until we launch this live.

    Apologies for posting here but not sure I know how to send a message correctly here (I tried). I would like the new lightbox turned on for both of my accounts, please: foundviewgallery.com and jodystuartphotography.com. Thank you.

    You should be all set!

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • jjespjjesp Big grins Posts: 21Registered Users Big grins

    I have put some space in between the image and the top of the browser (the browser tabs). Is this still possible?

    Jan Jespersen Photography
    http://www.janjespersenphotography.dk
  • dedricramseyphotodedricramseyphoto Posts: 8Registered Users Big grins
    Are there plans to add a customization to have the lightbox navigation buttons be "always on"? Its a customization that currently exists. If not, perhaps change the 'on' time to be adjustable, as I do like how the new box keeps the buttons on for a bit, then they fade out.
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @dedricramseyphoto said:
    Are there plans to add a customization to have the lightbox navigation buttons be "always on"? Its a customization that currently exists. If not, perhaps change the 'on' time to be adjustable, as I do like how the new box keeps the buttons on for a bit, then they fade out.

    There is a Lightbox customization setting that will leave the navigation buttons always on.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • brandofamilybrandofamily Just a Guy with a Camera Illinois USAPosts: 1,976Registered Users Major grins

    I tried "2. Make the Lightbox Background color different from your Theme's "Primary Color"" in the organizer lightbox, but the color does not go all the way to the edge under the controls.... there is still a black bar on each side. Is the issue that I am in the organizer not regular lightbox?

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,677Registered Users Major grins
    edited August 7, 2019

    Where is the best place to add the CSS for the new lightbox? I was thinking "entire site" because
    the LB is accessed from galleries and from possibly every page, Homepage, galleries, folders and
    Pages, now via added widgets. Also from Organizer. Theme is no good because you'd loose the CSS
    when changing themes. Or it would be a PITA transferring it with every theme change, even if you
    remembered.

    BTW, does "entire site" even cover the lightbox?

    Al - Just a volunteer here having fun
    My Website | My Blog
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    I typically toss it in the Theme's CSS since I only have 2 theme's that I typically use and that's the safest place. Entire Site should also work

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @brandofamily said:
    I tried "2. Make the Lightbox Background color different from your Theme's "Primary Color"" in the organizer lightbox, but the color does not go all the way to the edge under the controls.... there is still a black bar on each side. Is the issue that I am in the organizer not regular lightbox?

    Correct -- the Organizer ignores all customization settings. I'll enable the New Lightbox for you so you can play with it outside of the Organizer.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,677Registered Users Major grins

    When the new lightbox is live will the CSS live in "entire site"? I would think so as there can be a lightbox popup on every type of page.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • camnercamner Beginner grinner Posts: 62Registered Users Big grins

    In the old Lightbox, the Title had a darker background so that the Title was more visible. In the new Lightbox, that seems not to be the case (see screenshot). Is there either an option for this or a customization that will make that work?

  • camnercamner Beginner grinner Posts: 62Registered Users Big grins

    Will there be any kind of visual cue that will let users know that there is a Caption, or is the only way to see if a Caption exists to click on the hamburger?

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins
    edited August 9, 2019

    I made a few little changes to the new lightbox already :smile:

    What I wanted is to have the title and the caption stand out more in the sidebar, while the camera info and the keywords easy could "go more into the background". Also I decided to separate the caption from the keywords and the keywords from the camera info by a line in my accent color.

        /* Adaptions to the new lightbox as of 20190809*/
        /*adding a slim line below the keywords and the caption */
        .sm-lightbox-v2 .sm-image-metadata-caption
        , .sm-lightbox-v2 .sm-image-metadata-keywords{
          padding-bottom: 15px;
          border-bottom: solid #496486 1px;
        }
    
        /*change the color of the keywords and the camera info, but not the headers*/  
            .sm-lightbox-v2 .sm-image-metadata-keywords .sm-keywords-keyword
            , .sm-lightbox-v2 .sm-imageinfo-container
            , .sm-lightbox-v2 .sm-imageinfo-value{
              color: #496486;
            }
        /* END OF Adaptions to the new lightbox as of 20190809*/
    

    The result looks like this:

    @camner to give your title that darker background color you could try to use this:

    .sm-lightbox-v2-photo-title {
    background-color: black !important; /*chose whatever color and transparency setting would work for you here*/
    }
    
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    A couple of you mentioned you thought your visitors wouldn't know to click on the photo details to see the captions, so I quickly hacked together some CSS to add text underneath the title, if there's a title, to let the user know to click for more...

    I haven't run this by the engineering team, so they may have some better code. I'm also putting this improvement by our design team to see if they something we can implement for everyone without needing custom CSS.

    /* If the Photo has a Title, add text below it to let the viewer know if they click on it, they can read more information, like the caption */
    .sm-lightbox-v2 [data-elem-id="lightbox_image_title"] h2:after {
        content: 'Read More...';
        color: white;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 1px;
        top: 75px;
        position: absolute;
        left: 64px;
    }
    
    /* Move the whole bottom bar up a bit, to give some room for the "Read More" text */
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
        padding: 36px 12px 15px 20px;
    }
    

    It looks like this:

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • camnercamner Beginner grinner Posts: 62Registered Users Big grins
    edited August 11, 2019

    Thanks, @leftquark, for this.

    But, it seems to me that the logic isn't quite right. "if there is a Title then display the words Read More" will likely lead to image viewers clicking when there is, in fact, nothing more to read.

    Shouldn't the logic be ""if there is a Title AND A CAPTION then display the words Read More" ?

  • hadronhadron Big grins Posts: 81Registered Users Big grins
    edited August 11, 2019

    For my users, they should not have to click any button to see the captions. I don't use Titles.
    So as long the NO Camera Info option is supported across my whole site, not just a gallery, that should work for me.

  • leftquarkleftquark SmugMug Product Team Posts: 3,619Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @camner said:
    it seems to me that the logic isn't quite right. "if there is a Title then display the words Read More" will likely lead to image viewers clicking when there is, in fact, nothing more to read.

    Shouldn't the logic be ""if there is a Title AND A CAPTION then display the words Read More" ?

    All of my photos have captions, so i'm pretty much covered ... but even if they didn't, there's still keywords and metadata also to be included in the "more..."

    If we implement something like this for everyone, we'd make sure there was actually more content to be read if we showed it.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • camnercamner Beginner grinner Posts: 62Registered Users Big grins

    @leftquark said:
    All of my photos have captions, so i'm pretty much covered ... but even if they didn't, there's still keywords and metadata also to be included in the "more..."

    If we implement something like this for everyone, we'd make sure there was actually more content to be read if we showed it.

    Fair point. That said, it seems to me that there two kinds of information:
    1. Info that I, as the photographer, feel is necessary to understand the photo in a manner as close to my intent as possible
    2. Info that is NOT essential, but may be of interest to some viewers

    Let's call type 1 info "push" info, and type 2 info "pull" info.

    For me, the "push" info consists of:
    1. Most importantly, the image itself
    2. The Title
    3. The Caption

    For me, everything else is "pull" info.

    The problem, of course, is that the location of the line between "push" info and "pull" info depends upon the photographer, and so there can be no universal definition.

    So, the ideal is to provide a manner to allow individual photographers to choose the location of the line between "push" and "pull" info.

    One of the things that attracted (pulled?) me to SM is that unlike many competitors, SM actively tries to support, as best it can, the idiosyncrasies of each client.

    Presumably, with flexible and well designed CSS on SM's end, we can choose the "push" vs "pull" line as we wish through personal customization.

    The only thing I find a bit difficult is that it is hard to figure out what CSS descriptors do what. Or, more to the point, how the descriptors need to be cascaded to get the desired result. So many elements require lots of descriptors to address them. And, by necessity SM pulls a lot of info into a web page from various places, making it difficult to figure out how to customize.

    Since the Lightbox seems to be something that many people want to customize, something that would really be useful for someone (a volunteer?) to do, once the new Lightbox is up and running, is to go beyond providing specific tweaks and provide a lexicon of CSS descriptors, what they do as well providing info on how to address specific Lightbox elements. I'd love to be such a volunteer, but my knowledge is not sufficient to be of much use. For example, I don't really quite understand why the CSS you provided above means "if a Title exists, display "Read More..."

Sign In or Register to comment.