Upcoming Lightbox improvements (2019 edition)

Last year many of you will recall that we announced improvements to the way you and your visitors browse photos in the "Lightbox". Those improvements have been living in the Organizer for you to experience and provide your feedback. We listened and decided that additional improvements could be made to make your browsing experience even better. Our design team went back to the drawing board, we tested several design concepts with many of you and have been tirelessly working to build an even more amazing Lightbox.

I'm pleased to announce that our new Lightbox is now available for you to experience within the Organizer. Open any photo in the Organizer and you can see the beautiful and more functional browsing experience.

Not only is the new Lightbox gorgeous, but we've made it easier for you and your visitors to engage and take actions on your photos.

The new design is clean, with only the photos title and buy button overlapping the photo. Since most screens are wider than your photos, we've taken advantage of the empty space next to your photos to incorporate actions and information. The action buttons like sharing, downloading, commenting can be found to the left of the photo. Viewing the photos title, caption and metadata is also included in this space to the left. These action buttons, as well as the navigation arrows, have their own space on the left and right of your photo, ensuring they never overlap with your photo.

Additional photo information and actions are done in this sidebar on the left. Instead of the Sharing, Commenting and Buying experiences living on top of your photo, they now live next to it, so you and your visitors can enjoy the photo while also taking those actions.

The buying experience has also been integrated next to the photo, making it easier for you and your customers to purchase prints and gifts of your photos.

We've also built this to look amazing on mobile and tablet devices. The entire experience has been built with these devices in mind and swiping and interacting with your photos has been vastly improved.

Lastly, we built this with Customization in mind, since we know many of you love to tweak and personalize your experiences. A number of the most common Customizations are built into this Lightbox (for example, captions never overlap the photos, and tooltips indicate what the various icons stand for). Although the Lightbox can't be customized in the Organizer, when it makes its way into galleries and content blocks, we'll be providing sample CSS code to do a number of personalizations to the Lightbox. Stay tuned for those in a later post. For those of you that had started to Customize the previous version of the new Lightbox, those customizations will need to be rebuilt, though some may continue to work.

We're really excited to continue to roll this out across all experiences on Lightbox but are starting from within the Organizer for now. Please post here, write to our heroes and let us know your thoughts. All of us have fallen in love with this new Lightbox and we hope you do as well.

Comments

In addition to a number of improvements, we've also removed or changed some functionality and I wanted to make sure all of you are aware:
1) The Sizes button has been removed.

As previously discussed, we'll collect feedback on this decision and are considering adding a "Zoom" feature in the future (though no plans to prioritize this at the moment).

2) A number of the Tools have been removed, specifically: “Collect”, “Develop with PicMonkey”, and “Crop Thumbnail”

Collect can be performed in the Organizer, which is a better interface for Collecting a photo. Drag a photo to another gallery and choose “Collect”

PicMonkey is still Flash based with no clear path to getting away from Flash. We’ll look for alternate editing tools in the future.

Crop Thumbnail will soon become obsolescent as we move SmugMug style thumbnails away from using thumbnail size images. We'll consider adding a new tool in the future to allow you to set the point of interest on a photo (and hopefully can migrate your crop's to the point of interest so old photos retain their cropping).

3) A number of the Tools were omitted but will be added soon: “Show (or Hide)“, “Make a Copy”, and “Replace”

We’ll add them back soon! Stay tuned

4) The Photo Info option to display metadata has been merged with the “Photo Details” (Title, Caption and Keywords)

Choosing the “Photo Details” option or clicking on the title will launch the Photo Details Panel and display the information.

5) We’ve changed how Show Filenames works.

If “Show Filenames” is on, we’ll now show it in the Photo Details view, in addition to Title and Caption (it used to only show if there was no caption).

If no Title is set but Show Filenames is ON, we’ll use the filename for the title on top of the photo.

I expect most of you will love this, as it’s been a long-standing feature request.

6) The “Map” currently is not displayed as part of the Photo Details. It will be added in soon but was omitted to get this launched sooner.

7) Pinch to Zoom on Android will not work at launch. We’re working on adding it back in.

8) Tapping the Buy button no longer opens a menu, it immediately launches the add to cart options in a sidebar

Do you anticipate all the various CSS tricks work the same way with the new version as the old, or will we see issues there? (I'm not sure if I should expect to see them in organizer or not, though as I write this I'm thinking most of mine are on the collage grid not the lightbox; most, not all, I need to review them and see what I may not be seeing).

I like it. With that said, it doesn't solve any particular problem I had (at least none come to mind). But everything I tried worked, it seemed fast (or no slower), the images were sharp and clear at the rendered size.

@Ferguson said:
Do you anticipate all the various CSS tricks work the same way with the new version as the old, or will we see issues there? (I'm not sure if I should expect to see them in organizer or not, though as I write this I'm thinking most of mine are on the collage grid not the lightbox; most, not all, I need to review them and see what I may not be seeing).

Some of the class names will change since we didn't want CSS customizations designed for the old Lightbox to interfere with all the design changes in the new one, but otherwise it should be similar to do some of the same tweaks. We'll provide a list of some of the more popular/basic ones to get all of you going.

The Organizer won't show any customizations -- you'll have to wait until we integrate this into galleries and content blocks to test those out!

@Ferguson said:
I like it. With that said, it doesn't solve any particular problem I had (at least none come to mind). But everything I tried worked, it seemed fast (or no slower), the images were sharp and clear at the rendered size.

Glad to hear! It should perform better, has simpler user experiences, works better on mobile, and paves the way for some big improvements that we're also excited to get out (specifically to our Pro customers trying to sell their photos).

@Allen said:
How do get rid of that ugly buy button on top of the photo.

If the Shopping Cart is disabled, the buy button will not be displayed for your visitors. As owners, you'll always see the Buy button. Once this is integrated into Galleries and Content Blocks you can use CSS to hide it from yourself, if that's what you'd prefer. We'll also have a setting where you can move the buy into the left side where all the other actions are, if you'd prefer it over there instead of on-top of your photo.

Do you mean how to hide it after it's been opened? That's good feedback and something we're already working on. Right now you can click on the icon that caused the sidebar to open (for example, if you're viewing Sharing, click share again and it will close). We're experimenting with clicking on the photo to close the sidebar, as well as having a small "close" button in the top right of the sidebar.

@Allen said:
You're going to piss off my family when they can't read newspaper cuttings. They need to be viewed at original size.

You can always enable downloading and they can download the newspaper cutting to their computer and zoom in and scroll using a much better interface than our Lightbox. Others have asked for the ability to "Zoom" on the photo, which is something we could consider adding in the future. I know you've expressed the desire for this and I haven't forgotten how strongly you're hoping to have that be implemented.

Allen, I've edited your message so it stays on on-topic and we can continue to discuss the Lightbox.

I know you've made the request to be able to zoom in on parts of a photo. And I know you're very passionate about it. It's something we'll consider adding in the future but are not planning at this time. I'd be happy to give status updates in the coming months

I objected before also, I think giving up sizes while not having zoom is a darn shame. but there just doesn't seem to be a village of peasants with torches and pitchforks willing to protest its demise, just 2-3 of us.

I still object, and always will, to the cavalier way Smugmug takes away features always promising a great new replacement in the future, but apparently in the FAR future. Kind of like our administration wants to take away health care, and sometime later in the future they will provide a great,. wonderful -- the best every -- replacement. No time frame on the replacement, no details, just "we will take care of it". Hmmm... I guess with a name like Left-quark there can't be any connection right?

Allen, this is a poor, awful workaround, but extract all the "original" size URL's, and put them in as IMG tags in a separate page (e.g. just the gallery description). All the images will get sucked in in original resolution and they can scroll around in their browser.

It's a lot of work to grab those URL's (probably some way to automate it), but the result appears to work, in a brief test at least.

Leaving little-used features in the product means we don't get to thrill the majority of you while we support only a very small subset of our customers. Cutting things that so few of our customers use will help us build better products faster, and it'll mean we can then get to these kinds of improvements more quickly and more frequently.

For things that are used by the larger community of SmugMuggers, we try to avoid removing them without a short term improvement planned. For example, you'll notice the Map is missing from the metadata of the photo and we're already planning to add that back in within the next few weeks.

@leftquark said:
Leaving little-used features in the product means we don't get to thrill the majority of you while we support only a very small subset of our customers. Cutting things that so few of our customers use will help us build better products faster, and it'll mean we can then get to these kinds of improvements more quickly and more frequently.

I get that, though not in the same way you seem to mean it.

Your description would seem to apply best to features you have no intention to replace. That makes sense -- niche features lightly used may have to just be sacrificed. That's good business.

But you rarely say that. Usually you say something like (as I think you did in this case), we plan to replace X with Y, but Y won't be along until sometime in the indefinite future. In this case sizes goes away in favor of zoom, and you (I think) believe zoom is more useful, more compatible, and will be used by more people. Did I misunderstand?

To me that's a different matter than sacrificing something for the greater good. When it is planned to REPLACE something for the greater good -- plan the replacement to deploy when you remove the feature.

"Crop Thumbnail will soon become obsolescent as we move SmugMug style thumbnails away from using thumbnail size images. We'll consider adding a new tool in the future to allow you to set the point of interest on a photo (and hopefully can migrate your crop's to the point of interest so old photos retain their cropping)."

@leftquark said:
Leaving little-used features in the product means we don't get to thrill the majority of you while we support only a very small subset of our customers. Cutting things that so few of our customers use will help us build better products faster, and it'll mean we can then get to these kinds of improvements more quickly and more frequently.

I get that, though not in the same way you seem to mean it.

Your description would seem to apply best to features you have no intention to replace. That makes sense -- niche features lightly used may have to just be sacrificed. That's good business.

But you rarely say that. Usually you say something like (as I think you did in this case), we plan to replace X with Y, but Y won't be along until sometime in the indefinite future. In this case sizes goes away in favor of zoom, and you (I think) believe zoom is more useful, more compatible, and will be used by more people. Did I misunderstand?

To me that's a different matter than sacrificing something for the greater good. When it is planned to REPLACE something for the greater good -- plan the replacement to deploy when you remove the feature.

My apologies and thanks for your feedback — sometimes in my eagerness to provide great support, I may not convey the timeline and intention that I really mean. DGrin is great because it gives us into how and why you operate. We may act on that information immediately, or we may store it as it helps paint a bigger picture for our vision. I’ll make sure to be more clear in the future when your feedback helps us make an immediate decision or if it’s just something we might use later on.

In this particular discussion around the Sizes button, I appreciated learning that most of you are using it for a different scenario: zooming. That insight is helpful should we ever decide to replace the Sizes tool but at the time of the decision, and currently, I had no intention of replacing that functionality. Similarly with removing “Develop with PicMonkey” and the “Collect” option in the Tools menu — there is no planned replacement at this time. But we’ve always been listeners with a desire to solve your problems, and if the SmugMug community tells us that we can do better, then we’ll do better. The insight into the Zoom feature could be used at a future time to help us build a better product but right now there’s no intended replacement for these tools.

@Allen said:
"Crop Thumbnail will soon become obsolescent as we move SmugMug style thumbnails away from using thumbnail size images. We'll consider adding a new tool in the future to allow you to set the point of interest on a photo (and hopefully can migrate your crop's to the point of interest so old photos retain their cropping)."

Does that mean no more zooming? No more squares?

SmugMug style galleries can always be set to use square thumbnails — that will still exist. How frequently do you zoom in on the photo as part of its cropping? Could you describe a few scenarios where you do this? As we develop the tool to select the point of interest, this kind of insight will help us build a tool that can meet your (the SM community) needs.

@Allen said:
With the side bar open can we get the photo moved right some with the arrows just off the photo?
They is plenty of room with that existing large space on right now.

The navigation arrows will always* live outside the photo, at the edge of the screen, taking advantage of the extra width since monitors are typically wider than photos. On tablet devices the navigation arrows will be removed some most viewers are already trained to swipe on the photos to navigate.

= The only time where the navigation arrows move on-top of the photo is when there may not be enough height to fit all of the action buttons (fullscreen, play slideshow, share, comments, etc); here the navigation arrows would have overlapped the buttons but instead move on top of the photo. It looks like you shrunk your browser down to a small size to get this scenario to occur. Once the new Lightbox is included in galleries you can always use CSS to customize that behavior as you desire.

You folks did well. I like the clean design. I rather like having the title/caption/keyword and basic photo information up all at once. Having the copyright immediately visible is very welcome.
But there are always niggles
...

To the extent possible, I'd prefer never having text on top of the image. Is there some way to move the title (or the VIEW PHOTO DETAILS message when there is no title) off the image, to the side, above, or below, when there's space? User custom CSS can probably do something here, but it won't be trivial to have it adapt to where the available space is.
.

Along the same lines, I look forward to having the buy button as part of the list of lightbox controls at the far left. Hiding it via CSS is a likely option for me too.
.

The solid background on the buy button is a design element that is totally unlike any other on the page. If it can't move, a transparent background would be much more in keeping with the rest. That one's easy in user CSS, of course.
.

Yes, do make it more obvious how to close the big information sidebar.
.

I can only test the mobile lightbox via Firefox's Responsive Design tools, but while things look good in portrait orientation, the situation in landscape orientation seems inferior to the current mobile lightbox. While I don't love the current approach of text overlaying image, the new approach of toggling between an image display and a text display seems worse. Is that really what's going to happen or is that an artifact of Firefox's tool?
.

I too miss the sizes button, although I recognize I'm one of the very few who worries about the sharpness difference between display copies and browser-scaled images.

To the extent possible, I'd prefer never having text on top of the image. Is there some way to move the title (or the VIEW PHOTO DETAILS message when there is no title) off the image, to the side, above, or below, when there's space? User custom CSS can probably do something here, but it won't be trivial to have it adapt to where the available space is.

“Photo Details” has a button in the left side action buttons, so you could always use CSS to hide the one on top of the photo and direct your viewers to use the action button on the left?

Along the same lines, I look forward to having the buy button as part of the list of lightbox controls at the far left. Hiding it via CSS is a likely option for me too.

The solid background on the buy button is a design element that is totally unlike any other on the page. If it can't move, a transparent background would be much more in keeping with the rest. That one's easy in user CSS, of course.

We’ll be taking advantage of the Lightbox Customization settings to have an option to move the buy button to the left, so you won’t need CSS for that

I can only test the mobile lightbox via Firefox's Responsive Design tools, but while things look good in portrait orientation, the situation in landscape orientation seems inferior to the current mobile lightbox. While I don't love the current approach of text overlaying image, the new approach of toggling between an image display and a text display seems worse. Is that really what's going to happen or is that an artifact of Firefox's tool?

I haven’t tried FF’s tools to see if what you’re seeing is correct but it does sound close ... in Landscape orientation, viewing the photo details (title, caption, keywords, etc) will take over the screen and none of the photo will be visible. We tried a number of designs for landscape orientation on phones but unfortunately Safari/Chrome add so much visual bloat on the screen that there’s almost no visible space left for any information, let alone trying to fit the photo and some information. Viewers who select the Photo Details are deliberately try to view specific information and we wanted to make sure that was as easy as possible to read. Dismissing the Photo Details is much more clear and easier using an arrow and a specific area for dismissing it, versus the old design, where you had to hope you tapped in the proper area.

@Allen said:
"Crop Thumbnail will soon become obsolescent as we move SmugMug style thumbnails away from using thumbnail size images. We'll consider adding a new tool in the future to allow you to set the point of interest on a photo (and hopefully can migrate your crop's to the point of interest so old photos retain their cropping)."

Does that mean no more zooming? No more squares?

SmugMug style galleries can always be set to use square thumbnails — that will still exist. How frequently do you zoom in on the photo as part of its cropping? Could you describe a few scenarios where you do this? As we develop the tool to select the point of interest, this kind of insight will help us build a tool that can meet your (the SM community) needs.

I've have the vast majority of bird photo thumbnails back to 2005 cropped and zoomed. Probably close to 60,000 photo thumbs out of 100,000(?).

Here is an example of one page. Before and after "zoom and crop" that was just done today, few minutes ago.
As you can see the thumbs is the gallery did save and change but these changes will be gone tomorrow.
For some reason they are changed back hours later? So there is a huge malfunction here.
Actually thumbs changed back through 14 years were all reset???? 1000's of hours of work gone.

The main purpose of this, using Smugmug style, is peeps can scan page to page and only click thumb on photos they want to see larger.
That's why I hate collages. Scrolling forever thru many photos. And if you want to go back and look at one that's interesting there's no way to get to it without scrolling from the beginning again.

@Allen said:
That's why I hate collages. Scrolling forever thru many photos. And if you want to go back and look at one that's interesting there's no way to get to it without scrolling from the beginning again.

Actually you don't have to go to the beginning. If you click on an image in the collage, then close the lightbox, it returns with the image selected in the top row. I complained shortly after it debuted that it should leave the image in the same spot, it still doesn't., but it does not require you to scroll all the way down again.

@Allen said:
That's why I hate collages. Scrolling forever thru many photos. And if you want to go back and look at one that's interesting there's no way to get to it without scrolling from the beginning again.

Actually you don't have to go to the beginning. If you click on an image in the collage, then close the lightbox, it returns with the image selected in the top row. I complained shortly after it debuted that it should leave the image in the same spot, it still doesn't., but it does not require you to scroll all the way down again.

I'm referring to after you scroll PAST a photo you'd like to see it again. Or maybe a few that you'd like to review again.
You have no idea what the number in gallery is.
Example: after scrolling through gallery I want to buy a few. How in the world will I ever find the ones I want to buy without scrolling through everything again? Even if I can remember what ones I want. What if there is a series of almost identical photos?

I didn't invent it, I found it around here somewhere, if interested I can find the code again. I switched to collage as I thought it was visually more impactful with negligible non-image space, but there are a lot of quirks surrounding how and where text appears (and if, in terms of numbering). But I also found it easier to scan a lot of images quickly - thumbnails are so small (though I was unaware until your posting that you could zoom the thumbnails -- that's very cool -- I'd offer that the collage images might be nice if zoomable.

Looks great Leftquark! Nice and modern fluid design, and great to finally have that annoying bottom bar out of the way.

If I can put forward one major suggestion again, can we pretty pretty please have live image previews for products shown in the shopping carts. So many other sites show a mock-up of the photo on the medium e.g. canvas/ metal / paper etc, but Smugmug still uses these random images of kids and dogs which personally I find really off-putting and potentially damaging to the image I'm trying to build with my SM site.

Or, even as a work around would it be possible to upload our own product images? Just as we can with customizing the current shopping carts Prints, Desk Art, Downloads etc banners?

@Shinrya said:
If I can put forward one major suggestion again, can we pretty pretty please have live image previews for products shown in the shopping carts. So many other sites show a mock-up of the photo on the medium e.g. canvas/ metal / paper etc, but Smugmug still uses these random images of kids and dogs which personally I find really off-putting and potentially damaging to the image I'm trying to build with my SM site.

It's definitely something we'd love to add some day but as we dive into what's important to help all of you sell prints we've found there's some bigger impact items that will help you sell more. I'll pass the vote for this onto the team though!

I really like the display of titles along with the captions. I haven't used titles much, but this may push me to adding them to my pictures. If that happens, I'd find it really nice to have a Gallery Setting / Organizer/ LR Plugin option to sort by title on gallery photos. Right now there are a few galleries that I sort by caption. The first part of the caption on those is essentially a sorting key, a phrase that would likely want to become the new title. It you are going so "all in" on titles -- and lightbox v2 does -- you really need to support them as much as you support captions.

The display with the info box open is so good that you might consider having it open be the default when launching the lightbox (with a clear "close" button). Or maybe make defaulting to an open info display be a gallery set-up choice.

I was reviewing the CSS I had written (using the Stylus plugin) to modify last autumn's proposed v2 box. Today's new approach is so much better. That old one was really clunky in comparison. Have the design team take a bow.

I haven't hit any bugs or visual glitches. Not all your roll-outs have been this clean. Have the execution and QA teams take a bow.

As for my potential custom CSS for lightbox v2, the list is short. I'll get rid of the big buy button if SM doesn't. I'll adjust a few font sizes, font colors (shades of gray), and spacings on the information sidebar, with the goal of upping the visual emphasis on the title and caption a tad and reducing it on everything below. To further simplify, I may remove the button to show more camera information when not logged in. (I occasionally check those details, but they seem like overkill for general viewers.) I may reduce the size of the title overlaying the picture, but I'll not hide it. But that's probably going to be about it: just small tweaks. I've got all of up locally using the Stylus browser plugin now. No problems working with the lightbox v2 CSS.

I'm still contemplating what to do for the problems I perceive with the sharpness of some browser-scaled images, problems I can no longer "fix" by using the sizes button to show display copies. I'm considering the option of reloading the images on my site so the posted "originals" (smaller than the original originals) just fit without scaling in the lightbox display on my QHD (2560x1440) screen. To allow for margins, controls, and browser stuff when I don't go full screen, I've been testing a posting size of 2440 x 1320 -- 120px less than the screen each way. I can ask the Lightroom plugin to sharpen my larger local images appropriately for the size reduction. Images uploaded with Adobe's standard level of sharpening for the screen very closely match SM's display copies. That optimizes for QHD, which seems less than the best policy, but it solves my issues and the regrets don't seem that large. Users with smaller screens would see SM's standard browser-down-scaled images, but it appears most aren't sensitive to the issues I'm seeing. Users with 4K screens (and beyond) get maximum sharpness but at the cost of a smaller image with a bigger mat than they would with larger originals. That's mixed, but 4K is not a huge fraction of web traffic. Yet.

@Jtring said:
I really like the display of titles along with the captions. I haven't used titles much, but this may push me to adding them to my pictures.

That's actually one of the reasons we pushed forward with this design -- we hoped it would motivate people to tell more of their stories with their photos. When we tested this design during our early prototyping phase we heard similar comments. Being able to share the story of the photo is so important to many of you and we want to help facilitate that.

@Jtring said:
If that happens, I'd find it really nice to have a Gallery Setting / Organizer/ LR Plugin option to sort by title on gallery photos.

I'll mentally add you to the list of customers asking for this feature request. It's something I'd personally love as well, fwiw.

@Jtring said:
The display with the info box open is so good that you might consider having it open be the default when launching the lightbox (with a clear "close" button). Or maybe make defaulting to an open info display be a gallery set-up choice.

That's great feedback! We have some similar thoughts which you'll see be released in the next month or two that take a step towards that but we'll consider this for future improvements.

@Jtring said:
I was reviewing the CSS I had written (using the Stylus plugin) to modify last autumn's proposed v2 box. Today's new approach is so much better. That old one was really clunky in comparison. Have the design team take a bow.
I haven't hit any bugs or visual glitches. Not all your roll-outs have been this clean. Have the execution and QA teams take a bow.

Thank you! The team feels very humbled reading that. One of the main reasons why we stopped proceeding with the previous design was that from a UX perspective we were struggling with a number of interactions but more importantly, we wanted to step back and re-architect it technically to be really stable and support growing it in the future. Viewing photos is so important that we wanted to make sure the Lightbox had a really strong foundation.

@Jtring said:
As for my potential custom CSS for lightbox v2, the list is short. ... No problems working with the lightbox v2 CSS.

Glad to hear -- let us know if you run into any snags and if we can help. We'll be publishing a list of some CSS tweaks in about a month and if we can add class identifiers to anything if we missed them.