Your images appear perfectly tack sharp to me in the lightbox. Viewing in Chrome on a retina screen.
With my own testing, I found that whatever Smugmug is doing with the display copies, it's doing a bad job. On my screen, anything X3 or under looks very fuzzy, so I've regrettably had to set my display copy to a size slightly larger than I'm comfortable with (iPad Retina X4), in order to get sharp copies when the browser scales the image to fill the screen. I too tried fiddling with code to get the smaller sizes to appear sharper, but it caused the jagged edges and other problems depending on the browser and resolution used.
I'm honestly no expert with any of this, but feel this really shouldn't be something we should have to deal with. Every other photo service be it Flickr, 500px, Squarespace, Behance, Format etc that are designed to work with high resolution images, they all provide fantastic pixel perfect scaling on any screen.
I think we're going to undo the image-rendering changes that are causing the jagged edges. It's improved the sharpness on some photos but it's feeling like overall it's creating worse images.
Do you have a couple examples where the old Lightbox looked soft? Even better, do you have a few examples where you've also put the photos on other services so we can compare?
(FWIW, I've looked at Flickr, and 500px and they do the exact same thing we do: load a larger image and resize it down using CSS. So I'd like to see if there's something about the display copy that's different)
@leftquark said:
I think we're going to undo the image-rendering changes that are causing the jagged edges. It's improved the sharpness on some photos but it's feeling like overall it's creating worse images.
I certainly agree. But moving on, is there some other way you plan to address the sharpness loss when moving from display copies to fills?
(I can, of course, re-introduce crisp image rendering locally via custom CSS. That comes with a downside. I then need to review the site image-by-image and insert special code to turn it off on the 2 to 10% of images where it does damage.)
@Shinrya said:
Every other photo service be it Flickr, 500px, Squarespace, Behance, Format etc that are designed to work with high resolution images, they all provide fantastic pixel perfect scaling on any screen.
If you can show us the same image on the various platforms, we can keep investigating, but so far, I don't see any of them doing anything special. They just display a display copy and let the browser handle it. Most photos look amazing in the SmugMug lightbox, so I'd like to compare the ones that don't to the other services and see if we can understand better.
These were my findings, from viewing the various sizes on my screen (Retina 15" Macbook Pro) in Chrome. Also tested in Windows 10.
Setting my display copies to anything lower than X3, resulted in noticeably fuzzier images when viewed in the Lightbox, either at their native size, or set to 'fill'.
With display copy set to X3, there was a minimal difference in sharpness between X3 and X4 when both are set to 'fill' the screen. I assume this is the browser doing the scaling??
To rule out the possibility this being an issue with retina screen scaling, I also viewed the lightbox with my screen resolution set to its native "2880x1800", which removes the pixel doubling. Again I noticed that X4 viewed at 100% looked pretty sharp, then moving down to X3 and smaller, the image took a dive in sharpness when viewed natively 100%.
That being said, I have viewed my lightbox on another PC with a standard LCD monitor, and honestly couldn't tell any difference in sharpness between the sizes. So perhaps this is just a thing with browser scaling and retina type displays.
@leftquark I took your suggestion and compared a few images against their counterparts uploaded on Flickr & 500px. I will concede that there is in-fact no difference in sharpness between there and smugmug lightbox. The only exception is if lightbox images are set to X2 or lower size, then they are definitely displaying fuzzy on my screen regardless whether viewed 100% or set to 'fill'.
A large number of design updates and bug fixes should be going out today (or already are out). These updates are still restricted to the Lightbox when launched from within the Organizer. Your galleries are still using the old Lightbox.
While working through these updates we haven't felt that the stability of the code was up to the standards we are comfortable with and we also have some big ideas on how we can design a much better looking and user friendly Lightbox. We had initially sought out to rebuild Lightbox (looking and acting the same) using new coding practices that would let us place the Lightbox in additional spots, like the Slideshow and Carousel, but in stepping back we can see that there's a number of user experience improvements that could be made.
We'll be taking a brief pause to rebuild the foundation for Lightbox and introduce a much better experience. Stay tuned.
tl;dr: We've made a number of improvements to the Lightbox in the Organizer so you could have a great experience there, but we'll be working on an even better lightbox with an estimated release date sometime around March or April.
@Shinrya said: @leftquark I took your suggestion and compared a few images against their counterparts uploaded on Flickr & 500px. I will concede that there is in-fact no difference in sharpness between there and smugmug lightbox. The only exception is if lightbox images are set to X2 or lower size, then they are definitely displaying fuzzy on my screen regardless whether viewed 100% or set to 'fill'.
As a result of the bug fixes above, we've removed the "added sharpness" that was creating the jaggies.
I just went into Organizer and the 1st photo I opened in Lightbox, I'm still counting and the overlay never did hide. Firefox 64.0
retry
Opened another in LB and overlay IMMEDIATELY hid. Wiggle mouse and overlay came back and now won't hid.
Can not find any pattern of what's happening.
It looks really bad sized full browser. Need some kind of small gap/border on all sides.
Changed from this browser tab to tab with LB photo and overlay is gone. Any mouse movement brings back overlay.
Overlay interferes with viewing photos when using side arrows. Overlay needs to remain hidden until mouse moves off of arrows.
Now I have to move mouse off arrow to hid overlay. Slows down clicking thru photos.
Looks like I'm forced into seeing the photo full browser.
I think losing the sizes is really a bad idea. So you're telling visitors what size you think they NEED to see? BS I want to see whatever size I want to see.
The elements will hide themselves after 1.5 seconds of no mouse movement. If your mouse remains over any of the elements (navigation arrows, title, caption, buttons, etc), the overlay will remain until the mouse is removed from them, since you're presumably about to click on them and you don't want to click on a missing button.
Personally I find it a little too fast, and I'd love to see the first photo when the LB opens keep the elements opened longer than on subsequent photos when I'm trying to browse photos and then have it hide so I can see the photo.
I'm a little confused, Allen, because what you describe sounds like you want to be able to navigate by clicking on invisible navigation arrows. Wouldn't that be weird, to click on something that wasn't there? We display the navigation arrows when your mouse is near them so you can actually click on them. You can always let the overlay be hidden and then use your keyboard arrows to navigate.
Lightbox in all of its existence has displayed the photo full screen. We recently attempted to add a slight framing around the photo and the community overwhelmingly said "bring back full sized photos."
I think the nav arrows should remain visible when hovered but the rest of overlay hidden when you click thru photos.
To see overlay just move mouse. Otherwise hide/show arrows with overlay.
The browser is hardly ever the same ratio as the photos. I'm referring to the two sides that
bump the sides. Needs a slight dark margin. The photo and browser touching interferes with the eye seeing the photo boundaries.
BTW, I have to switch browser tabs to get overlay to hide. Then re-hover photo is show overlay. Then
the overlay stays forever when I move mouse off browser window. Or seems like different at times.
"said "bring back full sized photos.""
No complaint with that but photos are many different ratios so this makes no sense unless they resize
the browser with every size change. Two sides will have a blank area unless the browser is resized.
All I'm saying is that any part of a photo should never touch a frame. That's why mats were invented.
Edit: notice the current LB is correct with the photo not touching browser 4 sides. It adds a slight margin on the two sides.
Hi all - Happy 2019!
I am in search of some new CSS that will change just the background of the bottom area of the area of the lightbox (the area which contains the title, caption, keywords on the left AND the icons on the right). Suggestions ?
Are there no photographers on here that actually realize you do not touch the frame/background/browser to the photo?
It's very bad practice to not have some kind of mat/margin around a photo for separation.
This is especially bad using "Fill" as default. "Fill" is the worst setting for viewing a lot of photos.
The "Sizes" button needs to be retained.
Example of new Organizer lightbox:
Current LB. Notice mat/margin separation from browser.
Notice much shorted overlay at bottom.
Much clearer with margin all around.
BTW
This is what I get opening a photo in Organizer LB. The overlay never goes away without a bunch of clicking around. Latest FF
Without clicking around, using nav arrows or keyboard the overlay remains for all photos.
The default "Fill" looks like crap.
@leftquark said:
As @Allen and @Jtring pointed out, the caption is displayed on any mouse movement and remains displayed for 3 seconds after all mouse movement has stopped. If the mouse is positioned over the caption, the caption will display indefinitely.
Based on your feedback we wanted to get rid of the potential for the title and caption to always cover a small portion of the photo (which the old lightbox does), and we also wanted to get rid of the wonky slide up and down effect that so many people had used customizations to get rid of. The downside was that in many situations, viewers didn't realize that a title and caption existed and could be viewed. That led us to settle on displaying the caption unless there's 3 seconds without the mouse being placed over the caption. This , then, has the downside of having the effect that Allen mentions above: moving the mouse to navigate to the next/previous photo causes the caption to always be displayed.
Part of the process of releasing this in small pieces is so that we can gather feedback like this before we roll it out in a way that all your visitors will interact with the new lightbox. We'll continue to collect feedback on this interaction and if we get more of this feedback, we'll work with our design and user experience team to see if we can come up with additional solutions.
So, I came to the forums to figure out how to fix this issue. I'm unclear of what is supposed to be changed though. My understanding skimming through here is ultimately, we should have the option to have the lightbox title/toolbar NOT overlay the image, correct? Right now, it still overlays with mouse movement, which is a problem since 99% of family use the mouse to move to the next image (also not sure how it looks on mobile off hand). I can hide it completely, but I still want options available to folks. Is this option still coming as I don't see it in the Organizer lightbox view.
@jerryr said:
Hi all - Happy 2019!
I am in search of some new CSS that will change just the background of the bottom area of the area of the lightbox (the area which contains the title, caption, keywords on the left AND the icons on the right). Suggestions ?
For the new lightbox, at least as it stands now, the code below will do the job. Updates may be needed with the next iteration of SM's code development. .sm-lightbox-v2 .sm-lightbox-v2-ui-bottom {background-color:green;}
You probably would have launched a new Dgrin thread if you wanted the code for the existing lightbox, but just in case that's what you're after, try the snippet below. Same idea. The class structure is klutzier in the old lightbox. .sm-user-ui .sm-lightbox .sm-lightbox-panel-grid .sm-lightbox-panel {background-color:purple}.
I'm pleased to announce that we've made some major updates to the new Lightbox -- in fact we went back to the drawing board and redesigned and rebuilt it to make your browsing experience even better. Head on over to the Organizer or this thread to read more.
I hadn't seen this thread before so I was blindsided by the new lightbox which (as far as I can tell) was rolled out last night. I came here to say bravo, and thank you! I think it's a great improvement, especially on mobile. Swipe and pinch are profoundly better. I had been wishing for that for a long time. I know the SmugMug mobile app already worked that way but I don't expect my clients to download an app to view my photos, nor do I tell them to. This makes my site work like it has finally caught up with the times! As a fellow web application developer, I am very impressed with this and with SmugMug in general. You are lucky to have such a talented team.
-Jack
An "accurate" reproduction of a scene and a good photograph are often two different things.
I won't lose sleep over loss of the sizes button, but it does seem like yet another case of removing something that is useful, promising a rosey further where we won't need it and then... waiting.
I do have a use case for the sizes button. I do some business head shots. These typically get displayed on company websites at small sizes. It was nice to be able to tell a client to choose a small size like "S" or "M", right click and save. Otherwise they might use a very large version, perhaps even original, which slows down their page.
Also, the X4 size was 2048 pixels wide for a horizontal shot. This is the optimum size for posting on Facebook in order to minimize their otherwise heavy handed resizing and compressing.
-Jack
An "accurate" reproduction of a scene and a good photograph are often two different things.
Comments
Your images appear perfectly tack sharp to me in the lightbox. Viewing in Chrome on a retina screen.
With my own testing, I found that whatever Smugmug is doing with the display copies, it's doing a bad job. On my screen, anything X3 or under looks very fuzzy, so I've regrettably had to set my display copy to a size slightly larger than I'm comfortable with (iPad Retina X4), in order to get sharp copies when the browser scales the image to fill the screen. I too tried fiddling with code to get the smaller sizes to appear sharper, but it caused the jagged edges and other problems depending on the browser and resolution used.
I'm honestly no expert with any of this, but feel this really shouldn't be something we should have to deal with. Every other photo service be it Flickr, 500px, Squarespace, Behance, Format etc that are designed to work with high resolution images, they all provide fantastic pixel perfect scaling on any screen.
Follow me on:
Instagram | Facebook | Flickr
I think we're going to undo the
image-renderingchanges that are causing the jagged edges. It's improved the sharpness on some photos but it's feeling like overall it's creating worse images.Do you have a couple examples where the old Lightbox looked soft? Even better, do you have a few examples where you've also put the photos on other services so we can compare?
(FWIW, I've looked at Flickr, and 500px and they do the exact same thing we do: load a larger image and resize it down using CSS. So I'd like to see if there's something about the display copy that's different)
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I certainly agree. But moving on, is there some other way you plan to address the sharpness loss when moving from display copies to fills?
(I can, of course, re-introduce crisp image rendering locally via custom CSS. That comes with a downside. I then need to review the site image-by-image and insert special code to turn it off on the 2 to 10% of images where it does damage.)
If you can show us the same image on the various platforms, we can keep investigating, but so far, I don't see any of them doing anything special. They just display a display copy and let the browser handle it. Most photos look amazing in the SmugMug lightbox, so I'd like to compare the ones that don't to the other services and see if we can understand better.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
These were my findings, from viewing the various sizes on my screen (Retina 15" Macbook Pro) in Chrome. Also tested in Windows 10.
To rule out the possibility this being an issue with retina screen scaling, I also viewed the lightbox with my screen resolution set to its native "2880x1800", which removes the pixel doubling. Again I noticed that X4 viewed at 100% looked pretty sharp, then moving down to X3 and smaller, the image took a dive in sharpness when viewed natively 100%.
That being said, I have viewed my lightbox on another PC with a standard LCD monitor, and honestly couldn't tell any difference in sharpness between the sizes. So perhaps this is just a thing with browser scaling and retina type displays.
@leftquark I took your suggestion and compared a few images against their counterparts uploaded on Flickr & 500px. I will concede that there is in-fact no difference in sharpness between there and smugmug lightbox. The only exception is if lightbox images are set to X2 or lower size, then they are definitely displaying fuzzy on my screen regardless whether viewed 100% or set to 'fill'.
Follow me on:
Instagram | Facebook | Flickr
A large number of design updates and bug fixes should be going out today (or already are out). These updates are still restricted to the Lightbox when launched from within the Organizer. Your galleries are still using the old Lightbox.
While working through these updates we haven't felt that the stability of the code was up to the standards we are comfortable with and we also have some big ideas on how we can design a much better looking and user friendly Lightbox. We had initially sought out to rebuild Lightbox (looking and acting the same) using new coding practices that would let us place the Lightbox in additional spots, like the Slideshow and Carousel, but in stepping back we can see that there's a number of user experience improvements that could be made.
We'll be taking a brief pause to rebuild the foundation for Lightbox and introduce a much better experience. Stay tuned.
tl;dr: We've made a number of improvements to the Lightbox in the Organizer so you could have a great experience there, but we'll be working on an even better lightbox with an estimated release date sometime around March or April.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
As a result of the bug fixes above, we've removed the "added sharpness" that was creating the jaggies.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I just went into Organizer and the 1st photo I opened in Lightbox, I'm still counting and the overlay never did hide. Firefox 64.0
retry
Opened another in LB and overlay IMMEDIATELY hid. Wiggle mouse and overlay came back and now won't hid.
Can not find any pattern of what's happening.
It looks really bad sized full browser. Need some kind of small gap/border on all sides.
Changed from this browser tab to tab with LB photo and overlay is gone. Any mouse movement brings back overlay.
Overlay interferes with viewing photos when using side arrows. Overlay needs to remain hidden until mouse moves off of arrows.
Now I have to move mouse off arrow to hid overlay. Slows down clicking thru photos.
Looks like I'm forced into seeing the photo full browser.
I think losing the sizes is really a bad idea. So you're telling visitors what size you think they NEED to see? BS I want to see whatever size I want to see.
My Website index | My Blog
The elements will hide themselves after 1.5 seconds of no mouse movement. If your mouse remains over any of the elements (navigation arrows, title, caption, buttons, etc), the overlay will remain until the mouse is removed from them, since you're presumably about to click on them and you don't want to click on a missing button.
Personally I find it a little too fast, and I'd love to see the first photo when the LB opens keep the elements opened longer than on subsequent photos when I'm trying to browse photos and then have it hide so I can see the photo.
I'm a little confused, Allen, because what you describe sounds like you want to be able to navigate by clicking on invisible navigation arrows. Wouldn't that be weird, to click on something that wasn't there? We display the navigation arrows when your mouse is near them so you can actually click on them. You can always let the overlay be hidden and then use your keyboard arrows to navigate.
Lightbox in all of its existence has displayed the photo full screen. We recently attempted to add a slight framing around the photo and the community overwhelmingly said "bring back full sized photos."
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I think the nav arrows should remain visible when hovered but the rest of overlay hidden when you click thru photos.
To see overlay just move mouse. Otherwise hide/show arrows with overlay.
The browser is hardly ever the same ratio as the photos. I'm referring to the two sides that
bump the sides. Needs a slight dark margin. The photo and browser touching interferes with the eye seeing the photo boundaries.
BTW, I have to switch browser tabs to get overlay to hide. Then re-hover photo is show overlay. Then
the overlay stays forever when I move mouse off browser window. Or seems like different at times.
"said "bring back full sized photos.""
No complaint with that but photos are many different ratios so this makes no sense unless they resize
the browser with every size change. Two sides will have a blank area unless the browser is resized.
All I'm saying is that any part of a photo should never touch a frame. That's why mats were invented.
Edit: notice the current LB is correct with the photo not touching browser 4 sides. It adds a slight margin on the two sides.
My Website index | My Blog
Hi all - Happy 2019!
I am in search of some new CSS that will change just the background of the bottom area of the area of the lightbox (the area which contains the title, caption, keywords on the left AND the icons on the right). Suggestions ?
SmugMug Sites - Creative Examples
Favorite Images and SmugMug Designs
Are there no photographers on here that actually realize you do not touch the frame/background/browser to the photo?
It's very bad practice to not have some kind of mat/margin around a photo for separation.
This is especially bad using "Fill" as default. "Fill" is the worst setting for viewing a lot of photos.
The "Sizes" button needs to be retained.
Example of new Organizer lightbox:
Current LB. Notice mat/margin separation from browser.
Notice much shorted overlay at bottom.
Much clearer with margin all around.
BTW
This is what I get opening a photo in Organizer LB. The overlay never goes away without a bunch of clicking around. Latest FF
Without clicking around, using nav arrows or keyboard the overlay remains for all photos.
The default "Fill" looks like crap.
My Website index | My Blog
So, I came to the forums to figure out how to fix this issue. I'm unclear of what is supposed to be changed though. My understanding skimming through here is ultimately, we should have the option to have the lightbox title/toolbar NOT overlay the image, correct? Right now, it still overlays with mouse movement, which is a problem since 99% of family use the mouse to move to the next image (also not sure how it looks on mobile off hand). I can hide it completely, but I still want options available to folks. Is this option still coming as I don't see it in the Organizer lightbox view.
CSS Block To Flow Down To Children Folders/Pages/Galleries
[URL="http://feedback.smugmug.com/forums/17723-smugmug/suggestions/1104583-a-bulk-
gallery-download-button-for-my-visitors"]bulk download option for clients[/URL]
For the new lightbox, at least as it stands now, the code below will do the job. Updates may be needed with the next iteration of SM's code development.
.sm-lightbox-v2 .sm-lightbox-v2-ui-bottom {background-color:green;}You probably would have launched a new Dgrin thread if you wanted the code for the existing lightbox, but just in case that's what you're after, try the snippet below. Same idea. The class structure is klutzier in the old lightbox.
.sm-user-ui .sm-lightbox .sm-lightbox-panel-grid .sm-lightbox-panel {background-color:purple}.Perfect- thank you ! works like a charm...
SmugMug Sites - Creative Examples
Favorite Images and SmugMug Designs
I'm pleased to announce that we've made some major updates to the new Lightbox -- in fact we went back to the drawing board and redesigned and rebuilt it to make your browsing experience even better. Head on over to the Organizer or this thread to read more.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I hadn't seen this thread before so I was blindsided by the new lightbox which (as far as I can tell) was rolled out last night. I came here to say bravo, and thank you! I think it's a great improvement, especially on mobile. Swipe and pinch are profoundly better. I had been wishing for that for a long time. I know the SmugMug mobile app already worked that way but I don't expect my clients to download an app to view my photos, nor do I tell them to. This makes my site work like it has finally caught up with the times! As a fellow web application developer, I am very impressed with this and with SmugMug in general. You are lucky to have such a talented team.
An "accurate" reproduction of a scene and a good photograph are often two different things.
I do have a use case for the sizes button. I do some business head shots. These typically get displayed on company websites at small sizes. It was nice to be able to tell a client to choose a small size like "S" or "M", right click and save. Otherwise they might use a very large version, perhaps even original, which slows down their page.
Also, the X4 size was 2048 pixels wide for a horizontal shot. This is the optimum size for posting on Facebook in order to minimize their otherwise heavy handed resizing and compressing.
An "accurate" reproduction of a scene and a good photograph are often two different things.