Customizing the New Lightbox

leftquark

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;
}

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 */
}

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);
}

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;
    }
}

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;
    }
}

leftquark

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;
    }
}

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;
    }
}

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;
    }
}

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;
    }
}

Big thanks to our Sorcerer @AJLemos for putting these together.

leftquark

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.

Allen

You left out adding labels to buttons?

leftquark

@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.

picturebike

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.

leftquark

@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.

picturebike

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/

leftquark

@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

picturebike

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

JSS44

@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' Mike

@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.

Paris

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?

leftquark

@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!

leftquark

@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!

jjesp

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

dedricramseyphoto

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.

leftquark

@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.

brandofamily

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?

Allen

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?

leftquark

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

leftquark

@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.

Allen

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.

camner

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?

camner

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 Ulven

I made a few little changes to the new lightbox already

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*/
}

leftquark

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:

camner

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" ?

hadron

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.

leftquark

@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.

camner

@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..."