@Hpix said:
Was my follow-up comment deleted? Seems to have disappeared. Of course, censoring customers doesn't change the unacceptable facts.
We’re not a fan of censoring here - in fact the opposite! Your comment was off-topic to this thread so I spun it off onto its own discussion so we could continue there! We’re here to thrill and have open discussion so please be a helpful party to the topics at hand and contribute with an open mind so the entire community can grow!
I've been using the Stylish plug-in in Firefox to explore customized CSS for Lightbox Version 2. I've not worked with other browsers yet. I have mostly positive things to report. Warning: a somewhat nerdy report follows.
I had no trouble working my way around the CSS and making the mods to move to the sort of layout I wanted. Rather than describe things in a lot of detail, there's a screen shot (reduced to 1/2 size) below. The goal was to not cover the image in "show less mode" but still include the controls and all but the longest captions. I don't use titles. I'm willing to show keywords only in the "show more mode". And I don't need the buy button. Overall I'm pretty happy with what I was able to do. Lightbox-v2 has a nicely flexible class structure. I've got things working in the 1024 to 737px wide range too -- slightly different layout -- but revert to the SM design at 736px. By the way, my handling of the two-line caption space with the ellipsis comes from this very clever page.
I was very happy to see the data-zoom-in attribute attached to the .sm-lightbox-v2-container class. It looks like you are going to turn the sizes button into a zoom after all, which is a good thing. Maybe just add a little padding above and below on .sm-lightbox-v2-content[data-zoom-in="true"] to make space for the controls.
I note the lightbox background is controlled by the .sm-modal-mask class, and that gets set before any reference to Lightbox-v2 shows up in the CSS. That's not surprising since the lightbox gets laid on top of the mask. If you ever plan to use this class for background masks in other places, please be careful to set up the class names to distinguish between the cases. There is no opportunity to use something like .class-with-lightbox-v2-in-it .sm-modal mask as an identifier. Those of us who want to change the color of the mask in the lightbox may or may not want to do the same thing elsewhere. (I don't know of any other cases where you use masks, but I don't know every nook and cranny in the site.)
Although the new lightbox doesn't use the image-rendering property (and the specialize values) we discussed earlier, it looks like there's something to make the sharpness of fill-size images more consistent with the display copies. In Firefox, fill images in Lightbox-v2 appear to be are sharper that what the old lightbox did on fills normally, if maybe a little less sharp than what image-rendering: -moz-crisp-edges; produced. And it is certainly the case that image-rendering: -moz-crisp-edges; in Lightbox-v2 can often oversharpen. I have image rendering up on my site using the old lightbox and while image-rendering: -moz-crisp-edges; performs nicely for me most of the time, it can do bad things occasionally. For example, pictures of signs with small text can end up with quite mangled text. (On my site, I've had to make special arrangements to return to image-rendering:auto; for a handful of photos.) So it looks like you've worked to balance the sharpening / artifact issues quite well in Lightbox-v2. That's worthy of praise since managing sharpness is about 50% science and 90% art (to paraphrase Yogi Berra).
Anyway, this is what I think Lightbox-v2 should look like in "show less mode" for screen widths over 1024px ... and can with a bit of custom CSS.
@Allen said:
I can not get to the bottom scroll bar. Mousing over towards the bar and the overlay pops up and hides teh bar.
I have to tilt the mouse wheel to initiate side scrolling.
I'm not sure I follow Allen, sorry. Are you talking about in the new Lightbox or Jtring's customization? The New Lightbox shouldn't have any overlay that shows up when mousing over anything. Would you help clarify for me so I can understand?
@Jtring said:
I have mostly positive things to report. Warning: a somewhat nerdy report follows.
I had no trouble working my way around the CSS and making the mods to move to the sort of layout I wanted.
Lightbox-v2 has a nicely flexible class structure.
That's great to hear -- we worked hard to ensure this was more customizable than the previous version!
I know you said you mostly did this in Firefox -- have you tried this in other browsers? Truncating to lines is an oddly difficult task because all the browsers handle things differently.
@Jtring said:
I note the lightbox background is controlled by the .sm-modal-mask class, and that gets set before any reference to Lightbox-v2 shows up in the CSS. That's not surprising since the lightbox gets laid on top of the mask. If you ever plan to use this class for background masks in other places, please be careful to set up the class names to distinguish between the cases. There is no opportunity to use something like .class-with-lightbox-v2-in-it .sm-modal mask as an identifier. Those of us who want to change the color of the mask in the lightbox may or may not want to do the same thing elsewhere. (I don't know of any other cases where you use masks, but I don't know every nook and cranny in the site.)
I'll talk about this with the team - maybe we can start adding some class names here so it makes it clear it's LB only.
@Jtring said:
Although the new lightbox doesn't use the image-rendering property (and the specialize values) we discussed earlier,
Those are going through QA right now -- they're coming!
I know you said you mostly did this in Firefox -- have you tried this in other browsers? Truncating to lines is an oddly difficult task because all the browsers handle things differently.
I just ported my CSS over to the Stylish extension in Chrome. The results are almost identical, save a small (few pixel) alignment difference in the 1024 to 737px regime (in that truncated text!) that I probably won't even try to work until you have a more final version up. That result doesn't surprise me. Nothing I wrote looks particular browser-specific. That fix for line truncation, in particular, just uses careful spacing, not -webkit-line-clamp, but yes, browsers do behave in slightly different ways. Take at look at the linked site. It's a rather nice solution. I have no tools in place to test any of the other browsers.
(Added note: That few-pixel alignment issue is there above 1024px too. I didn't catch it right away. It's small: 1.6px.)
@Jtring said:
Although the new lightbox doesn't use the image-rendering property (and the specialize values) we discussed earlier,
Those are going through QA right now -- they're coming!
Careful here. As I noted, image-rendering: -moz-crisp-edges; is real nice for me most of the time, but occasionally fails miserably. What you have currently in Lightbox-v2, which looks different from the old lightbox, seems pretty good from what I've explored so far.
By the way, I don't think Allen was referring to my code. He doesn't have it. The problem is more generic. When you choose a size in Lightbox-v2 that requires scroll bars, the bottom box is "on top" of the scroll bar, making it inaccessible. Hence my suggestion to add a little padding below the image.
@Allen said:
I can not get to the bottom scroll bar. Mousing over towards the bar and the overlay pops up and hides teh bar.
I have to tilt the mouse wheel to initiate side scrolling.
I'm not sure I follow Allen, sorry. Are you talking about in the new Lightbox or Jtring's customization? The New Lightbox shouldn't have any overlay that shows up when mousing over anything. Would you help clarify for me so I can understand?
my handling of the two-line caption space with the ellipsis comes from this very clever page.
I know you said you mostly did this in Firefox -- have you tried this in other browsers? Truncating to lines is an oddly difficult task because all the browsers handle things differently.
I just ported my CSS over to the Stylish extension in Chrome. The results are almost identical, save a small (few pixel) alignment difference in the 1024 to 737px regime (in that truncated text!) ... (Added note: That few-pixel alignment issue is there above 1024px too. I didn't catch it right away. It's small: 1.6px.)
That visual impact of that alignment issue in Chrome varies with the browser zoom! I depends on the handling of pixel fractions, which is different in different browsers. It's fixable by defining line height in terms of whole-number pixels rather than em, but ... ack ... what a got-cha. I bet your developers just love this sort of stuff.
By the way, while I noted I was using the Stylish add-on/extension to do my development, I just converted to Stylus. It's quite similar. I gather that after changing owners, Stylish has been doing surreptitious data collection on users' systems. (Not nice!) They got caught at it just a few months ago.
The image-rendering changes are live. As you mentioned, there's no perfect solution but we've been trying to get some improved sharpening out so we can test it with a larger set of images and see what works and what doesn't. We'll continue to tweak as we learn how it's working.
@leftquark said:
The image-rendering changes are live. As you mentioned, there's no perfect solution but we've been trying to get some improved sharpening out so we can test it with a larger set of images and see what works and what doesn't. We'll continue to tweak as we learn how it's working.
Let me share one of my problem images with you. I have local CSS up to apply the image rendering changes to the old lightbox. This image is one where I had to turn it off. Here is the bottom half of that image in the old lightbox (with image-rendering:auto; which is the default of nothing special) at default "fill" sizing. I'd call this a workable image, if one that appears to be near the limits of what I can display on my screen. Some of that text is in the few-pixel range. This and the others below are screenshots from Firefox 62/Win 7, on a 1920 x 1200 monitor. The window is 898px wide. The fill image is a scaled-down X3.
For reference, here is the X2. Since it's unscaled in the browser, image-rendering changes are moot. To my eye, although smaller, this is clearly sharper than fill image above.
Here's the fill image in Lightbox-v2, taken today with image-rendering:-moz-crisp-edges. It has some of my custom CSS (using Stylus) but none of these touch the image. Take a look at the chopped off, flattened, or pixelized letters. Because of the different margins, the image here is a little smaller than the original lightbox fill or X2 images, but the artifacts don't change much if I expand the window a bit. This sort of image is quite unusual in my photography, but I'll bet it's not for some of the event photographers. I think all would agree this is unacceptable. If I apply image-rendering:-moz-crisp-edges in the old lightbox, it looks much like this too.
I've done just a little exploring otherwise and I may get back with other observations. From what I've seen so far, I think my earlier thoughts stand. Earlier, I noted fill images in Lightbox-v2 without image-rendering:-moz-crisp-edges seemed be sharper that fills in the unmodified old lightbox but less so than in the old lightbox when I add image-rendering:-moz-crisp-edges. The old lightbox level of sharpening with image-rendering:-moz-crisp-edges works well on most of the images I take with landscape subject matter. I also noted that fill images in Lightbox-v2 with image-rendering:-moz-crisp-edges can oversharpen even when they don't produce troublesome artifacts. (Note: I rewrote this paragraph a few hours after the original posting. This may be more clear, if a little wordy.)
(By the way, while I'm looking at all this, I noted something real odd in the Lightbox-v2. When I asked for the X2 for this particular image in Lightbox-v2, I got an X4 scaled to 961 wide x 1280 high! The "real" X2 -- the one I get in the old lightbox -- is 721 x 960. The X2's are up to 1280 wide and up to 960 high, so it sort of looks like Lightbox-v2 is calling for an image with a larger dimension of 1280, no matter the orientation/aspect ratio. And in this example, that's way bigger than the X2.)
Thanks for the deep dive. Now that it's live we're trying to review with a wide range of photos and see what works best. We'll keep tweaking as best as we can.
@Jtring said:
(By the way, while I'm looking at all this, I noted something real odd in the Lightbox-v2. When I asked for the X2 for this particular image in Lightbox-v2, I got an X4 scaled to 961 wide x 1280 high! The "real" X2 -- the one I get in the old lightbox -- is 721 x 960. The X2's are up to 1280 wide and up to 960 high, so it sort of looks like Lightbox-v2 is calling for an image with a larger dimension of 1280, no matter the orientation/aspect ratio. And in this example, that's way bigger than the X2.)
@leftquark said:
Is your monitor a retina screen by any chance?
Nope, just an ancient Hewlett Packard LP2475w, but I am running Windows 7 with 125% display scaling. To balance, I typically run Firefox at 80% zoom. That's what it takes to render images on the screen at the same size you send. So, for example, in the old lightbox, the X2 came out just as expected when I used the developer tools to take a look at the details. (Oddly, Chrome sometimes want to be at 80% to get the display "right" and sometimes it wants to be at 100%. Everything I reported here was on Firefox, though.)
Added note: Just to check, I reset Windows to standard 100% display scaling and ran Firefox at 100% zoom. Same results. X2's are fine in the old lightbox. Calling for an X2 in Lightbox-v2 brings up the same larger 961 x 1280 image, scaled down from an X4. And as of this morning, it's now Firefox 63.
In the last few days, I've continued to explore sharpness differences in the new and old versions of the lightbox and with crisp and auto (default) image rendering. All is on Win 7 with 125% scaling, Firefox 63 with 80% scaling (so images come out "right"), 1920 x 1200 monitor. I've also looked at the X2 display copies since these are comparable in size to the fills on my monitor. The order for increasing apparent sharpness is generally v1fill-auto, v2fill-auto, X2 display copy, v1fill-crisp, v2fill-crisp. Here "v1fill-auto" means lightbox version 1 fill-sized image, with image-rendering set to auto (the nothing-special default). "crisp" means image-rendering is set to -moz-crisp-edges.
I used the phrase apparent sharpness because the sharpness differences between v1 and v2 are entirely due to image size (how the browser renders the same source image at different sizes, how the monitor displays them, and how my eye perceives things). If I use the developer tools to expand a v2 fill to exactly the same size as a v1 fill, they look identical. On reflection, I guess I shouldn't be surprised by that. From what I've read, some of what we perceive as sharpness is really local contrast, how fast (spatially) brightness changes. A smaller image packs the same brightness change into a little shorter distance. Still, naively, I would have thought the decrease in resolution would balance that out. Apparently not for the size differences here, at least not on images with lots of contrast to start with.
In going through several galleries, my sense is that 2/3 to 3/4 of my images are just fine in the lightbox v2 with crisp rendering. (And, indeed, the extra sharpness is often welcome.) The others seem a little crispy / oversharped compared to the display copies, which are what I used as a reference when I posted them originally.
I've found a two more images where the crisp image rendering causes aliasing. This remains a tiny fraction, on the order of 1% of what I've looked at, but the damage there is really noticeable. I cited this one earlier. In addition, both this and this have problems if I keep crisp rendering on. (In the regular lightbox, it's off for all three. So if you click the links you'll see non-aliased images.) The first new one is just another text problem. The second new one, however, is a natural scene: a plant picture from my garden, albeit one with some straight high-contrast lines. Below are three excerpts from the lower left corner of that image.
The X2 display copy. Reference for what's "right".
The lightbox version 1 fill, with auto image rendering. A tad soft.
The lightbox version 2 fill, with crisp image rendering. Note the jagged parts.
So what to do? I guess if were to make a recommendation, I'd say crisp image rendering has to be a no-go unless there is an easy way to turn it off on an image-by-image basis. I can't imagine a 1% catastrophe rate would be OK. The smaller images in lightbox version two help, even with auto rendering. As long as the display copies are still available for sharpness-obsessed people like me, that seems like the best workable option on the table at the moment. Or do you folks at SM have something else up your sleeve?
On my ipad pro, the fullscreen lightbox only works ok in portret mode, in landscape mode, the horizontal size appears to be calculated always from the portret orientation, so thry are too small. Rotating the screen to portret orientation makes it fullscreen again...
I wonder, can i specify somewhere i want the lightbox or slideshow to open in fullscreen by default?
@Dutchphoto said:
On my ipad pro, the fullscreen lightbox only works ok in portret mode, in landscape mode, the horizontal size appears to be calculated always from the portret orientation, so thry are too small. Rotating the screen to portret orientation makes it fullscreen again...
I wonder, can i specify somewhere i want the lightbox or slideshow to open in fullscreen by default?
Clarifucation, the slideshow fullscreen mode is the only mode that has the problem, not the regular lightbox
I'll look into this. Just to confirm: are you looking at the new lightbox in the Organizer, or the old one in a gallery?
The new lightbox is Live inside the Organizer only. We had temporarily enabled it for all Basic accounts (you're on a higher plan since you've customized your site) so if you're looking at the gallery slideshow then it'll be the old Lightbox. I checked out Slideshows in the Organizer and they appear to be OK and don't exhibit this bug. Let me know if you notice anything differently.
We've temporarily disabled the new Lightbox from Basic accounts while we work through some user experience improvements. All accounts will see the old Lightbox when viewing items in galleries and content blocks.
The new Lightbox is still available for account owners inside the Organizer.
Once the improvements are made we plan to roll the new Lightbox out to all users, all over SmugMug. I imagine this will happen in the next month or less. I'll post a heads up and some CSS customization tweaks before it goes live.
A couple of the improvements we're working on:
Removing the "framing" around the photo. Photos will display full-screen if the maximum display size allows for it.
Removing the "sizes" button
Reducing the amount of space the "show more" area covers the photo
Only displaying "Show More" if a title, caption or keywords have been set
Improved "swipe" experience when navigating between photos on touch devices
Two screen prints of lightbox, one from Organizer, other from gallery, both fill size. The insert is from Organizer.
3367 x 2245 photo size
Organizer looks like garbage compared to the one in gallery.
@Allen said:
You remove the sizes and there is no way can I see a photo in lightbox without seeing all the jaggies.
As far as I can tell, when not using display copies, the image rendering SM has in the test lightbox generates picture-damaging jaggies whenever there's a curved edge or angled straight edge that is at once fairly long, smooth, and high contrast.
Earlier I estimated the catastrophe rate with that approach was about 1% for my pictures. Having looked at a wider range of galleries, that's low. Probably 2 or 3% would be a better guess for out-and-out failures. It would be more like 10% if you count pictures that look OK in the new lightbox by themselves, but which are clearly less representative of the originals than an old-lightbox fill image if you make a 3-way comparison.
Hey David, Are you aware that your lightbox is messed up? You have written text displayed next to the icons, i.e. Close, Leave a Comment, Sizes, info etc.
It's all garbled though and not displaying correctly.
Hey David, Are you aware that you're lightbox is messed up? You have written text displayed next to the icons, i.e. Close, Leave a Comment, Sizes, info etc.
It's all garbled though and not displaying correctly.
I am. Haven't taken out the older code yet. Something for a snow-day eventually.
Were you able to see the jaggies in the organizer lightbox?
My Smugmug
"You miss 100% of the shots you don't take" - Wayne Gretzky
Comments
.
We’re not a fan of censoring here - in fact the opposite! Your comment was off-topic to this thread so I spun it off onto its own discussion so we could continue there! We’re here to thrill and have open discussion so please be a helpful party to the topics at hand and contribute with an open mind so the entire community can grow!
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've been using the Stylish plug-in in Firefox to explore customized CSS for Lightbox Version 2. I've not worked with other browsers yet. I have mostly positive things to report. Warning: a somewhat nerdy report follows.
I had no trouble working my way around the CSS and making the mods to move to the sort of layout I wanted. Rather than describe things in a lot of detail, there's a screen shot (reduced to 1/2 size) below. The goal was to not cover the image in "show less mode" but still include the controls and all but the longest captions. I don't use titles. I'm willing to show keywords only in the "show more mode". And I don't need the buy button. Overall I'm pretty happy with what I was able to do. Lightbox-v2 has a nicely flexible class structure. I've got things working in the 1024 to 737px wide range too -- slightly different layout -- but revert to the SM design at 736px. By the way, my handling of the two-line caption space with the ellipsis comes from this very clever page.
I was very happy to see the data-zoom-in attribute attached to the .sm-lightbox-v2-container class. It looks like you are going to turn the sizes button into a zoom after all, which is a good thing. Maybe just add a little padding above and below on
.sm-lightbox-v2-content[data-zoom-in="true"]to make space for the controls.I note the lightbox background is controlled by the .sm-modal-mask class, and that gets set before any reference to Lightbox-v2 shows up in the CSS. That's not surprising since the lightbox gets laid on top of the mask. If you ever plan to use this class for background masks in other places, please be careful to set up the class names to distinguish between the cases. There is no opportunity to use something like
.class-with-lightbox-v2-in-it .sm-modal maskas an identifier. Those of us who want to change the color of the mask in the lightbox may or may not want to do the same thing elsewhere. (I don't know of any other cases where you use masks, but I don't know every nook and cranny in the site.)Although the new lightbox doesn't use the image-rendering property (and the specialize values) we discussed earlier, it looks like there's something to make the sharpness of fill-size images more consistent with the display copies. In Firefox, fill images in Lightbox-v2 appear to be are sharper that what the old lightbox did on fills normally, if maybe a little less sharp than what
image-rendering: -moz-crisp-edges;produced. And it is certainly the case thatimage-rendering: -moz-crisp-edges;in Lightbox-v2 can often oversharpen. I have image rendering up on my site using the old lightbox and whileimage-rendering: -moz-crisp-edges;performs nicely for me most of the time, it can do bad things occasionally. For example, pictures of signs with small text can end up with quite mangled text. (On my site, I've had to make special arrangements to return toimage-rendering:auto;for a handful of photos.) So it looks like you've worked to balance the sharpening / artifact issues quite well in Lightbox-v2. That's worthy of praise since managing sharpness is about 50% science and 90% art (to paraphrase Yogi Berra).Anyway, this is what I think Lightbox-v2 should look like in "show less mode" for screen widths over 1024px ... and can with a bit of custom CSS.
I can not get to the bottom scroll bar. Mousing over towards the bar and the overlay pops up and hides teh bar.
I have to tilt the mouse wheel to initiate side scrolling.
My Website index | My Blog
I'm not sure I follow Allen, sorry. Are you talking about in the new Lightbox or Jtring's customization? The New Lightbox shouldn't have any overlay that shows up when mousing over anything. Would you help clarify for me so I can understand?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
That's great to hear -- we worked hard to ensure this was more customizable than the previous version!
I know you said you mostly did this in Firefox -- have you tried this in other browsers? Truncating to lines is an oddly difficult task because all the browsers handle things differently.
I'll talk about this with the team - maybe we can start adding some class names here so it makes it clear it's LB only.
Those are going through QA right now -- they're coming!
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 ported my CSS over to the Stylish extension in Chrome. The results are almost identical, save a small (few pixel) alignment difference in the 1024 to 737px regime (in that truncated text!) that I probably won't even try to work until you have a more final version up. That result doesn't surprise me. Nothing I wrote looks particular browser-specific. That fix for line truncation, in particular, just uses careful spacing, not -webkit-line-clamp, but yes, browsers do behave in slightly different ways. Take at look at the linked site. It's a rather nice solution. I have no tools in place to test any of the other browsers.
(Added note: That few-pixel alignment issue is there above 1024px too. I didn't catch it right away. It's small: 1.6px.)
Careful here. As I noted, image-rendering: -moz-crisp-edges; is real nice for me most of the time, but occasionally fails miserably. What you have currently in Lightbox-v2, which looks different from the old lightbox, seems pretty good from what I've explored so far.
By the way, I don't think Allen was referring to my code. He doesn't have it. The problem is more generic. When you choose a size in Lightbox-v2 that requires scroll bars, the bottom box is "on top" of the scroll bar, making it inaccessible. Hence my suggestion to add a little padding below the image.
This is using the LB in the Organizer. Isn't this where we were told to see it?
My Website index | My Blog
That visual impact of that alignment issue in Chrome varies with the browser zoom! I depends on the handling of pixel fractions, which is different in different browsers. It's fixable by defining line height in terms of whole-number pixels rather than em, but ... ack ... what a got-cha. I bet your developers just love this sort of stuff.
By the way, while I noted I was using the Stylish add-on/extension to do my development, I just converted to Stylus. It's quite similar. I gather that after changing owners, Stylish has been doing surreptitious data collection on users' systems. (Not nice!) They got caught at it just a few months ago.
The image-rendering changes are live. As you mentioned, there's no perfect solution but we've been trying to get some improved sharpening out so we can test it with a larger set of images and see what works and what doesn't. We'll continue to tweak as we learn how it's working.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Let me share one of my problem images with you. I have local CSS up to apply the image rendering changes to the old lightbox. This image is one where I had to turn it off. Here is the bottom half of that image in the old lightbox (with image-rendering:auto; which is the default of nothing special) at default "fill" sizing. I'd call this a workable image, if one that appears to be near the limits of what I can display on my screen. Some of that text is in the few-pixel range. This and the others below are screenshots from Firefox 62/Win 7, on a 1920 x 1200 monitor. The window is 898px wide. The fill image is a scaled-down X3.
For reference, here is the X2. Since it's unscaled in the browser, image-rendering changes are moot. To my eye, although smaller, this is clearly sharper than fill image above.
Here's the fill image in Lightbox-v2, taken today with image-rendering:-moz-crisp-edges. It has some of my custom CSS (using Stylus) but none of these touch the image. Take a look at the chopped off, flattened, or pixelized letters. Because of the different margins, the image here is a little smaller than the original lightbox fill or X2 images, but the artifacts don't change much if I expand the window a bit. This sort of image is quite unusual in my photography, but I'll bet it's not for some of the event photographers. I think all would agree this is unacceptable. If I apply image-rendering:-moz-crisp-edges in the old lightbox, it looks much like this too.
I've done just a little exploring otherwise and I may get back with other observations. From what I've seen so far, I think my earlier thoughts stand. Earlier, I noted fill images in Lightbox-v2 without image-rendering:-moz-crisp-edges seemed be sharper that fills in the unmodified old lightbox but less so than in the old lightbox when I add image-rendering:-moz-crisp-edges. The old lightbox level of sharpening with image-rendering:-moz-crisp-edges works well on most of the images I take with landscape subject matter. I also noted that fill images in Lightbox-v2 with image-rendering:-moz-crisp-edges can oversharpen even when they don't produce troublesome artifacts. (Note: I rewrote this paragraph a few hours after the original posting. This may be more clear, if a little wordy.)
(By the way, while I'm looking at all this, I noted something real odd in the Lightbox-v2. When I asked for the X2 for this particular image in Lightbox-v2, I got an X4 scaled to 961 wide x 1280 high! The "real" X2 -- the one I get in the old lightbox -- is 721 x 960. The X2's are up to 1280 wide and up to 960 high, so it sort of looks like Lightbox-v2 is calling for an image with a larger dimension of 1280, no matter the orientation/aspect ratio. And in this example, that's way bigger than the X2.)
Thanks for the deep dive. Now that it's live we're trying to review with a wide range of photos and see what works best. We'll keep tweaking as best as we can.
Is your monitor a retina screen by any chance?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Nope, just an ancient Hewlett Packard LP2475w, but I am running Windows 7 with 125% display scaling. To balance, I typically run Firefox at 80% zoom. That's what it takes to render images on the screen at the same size you send. So, for example, in the old lightbox, the X2 came out just as expected when I used the developer tools to take a look at the details. (Oddly, Chrome sometimes want to be at 80% to get the display "right" and sometimes it wants to be at 100%. Everything I reported here was on Firefox, though.)
Added note: Just to check, I reset Windows to standard 100% display scaling and ran Firefox at 100% zoom. Same results. X2's are fine in the old lightbox. Calling for an X2 in Lightbox-v2 brings up the same larger 961 x 1280 image, scaled down from an X4. And as of this morning, it's now Firefox 63.
I had a look at the sharpening in the new lightbox and it looks very promising, but perhaps a little overdone. Is there a way to moderate it a bit?
In the last few days, I've continued to explore sharpness differences in the new and old versions of the lightbox and with crisp and auto (default) image rendering. All is on Win 7 with 125% scaling, Firefox 63 with 80% scaling (so images come out "right"), 1920 x 1200 monitor. I've also looked at the X2 display copies since these are comparable in size to the fills on my monitor. The order for increasing apparent sharpness is generally v1fill-auto, v2fill-auto, X2 display copy, v1fill-crisp, v2fill-crisp. Here "v1fill-auto" means lightbox version 1 fill-sized image, with image-rendering set to auto (the nothing-special default). "crisp" means image-rendering is set to -moz-crisp-edges.
I used the phrase apparent sharpness because the sharpness differences between v1 and v2 are entirely due to image size (how the browser renders the same source image at different sizes, how the monitor displays them, and how my eye perceives things). If I use the developer tools to expand a v2 fill to exactly the same size as a v1 fill, they look identical. On reflection, I guess I shouldn't be surprised by that. From what I've read, some of what we perceive as sharpness is really local contrast, how fast (spatially) brightness changes. A smaller image packs the same brightness change into a little shorter distance. Still, naively, I would have thought the decrease in resolution would balance that out. Apparently not for the size differences here, at least not on images with lots of contrast to start with.
In going through several galleries, my sense is that 2/3 to 3/4 of my images are just fine in the lightbox v2 with crisp rendering. (And, indeed, the extra sharpness is often welcome.) The others seem a little crispy / oversharped compared to the display copies, which are what I used as a reference when I posted them originally.
I've found a two more images where the crisp image rendering causes aliasing. This remains a tiny fraction, on the order of 1% of what I've looked at, but the damage there is really noticeable. I cited this one earlier. In addition, both this and this have problems if I keep crisp rendering on. (In the regular lightbox, it's off for all three. So if you click the links you'll see non-aliased images.) The first new one is just another text problem. The second new one, however, is a natural scene: a plant picture from my garden, albeit one with some straight high-contrast lines. Below are three excerpts from the lower left corner of that image.
The X2 display copy. Reference for what's "right".
The lightbox version 1 fill, with auto image rendering. A tad soft.
The lightbox version 2 fill, with crisp image rendering. Note the jagged parts.
So what to do? I guess if were to make a recommendation, I'd say crisp image rendering has to be a no-go unless there is an easy way to turn it off on an image-by-image basis. I can't imagine a 1% catastrophe rate would be OK. The smaller images in lightbox version two help, even with auto rendering. As long as the display copies are still available for sharpness-obsessed people like me, that seems like the best workable option on the table at the moment. Or do you folks at SM have something else up your sleeve?
On my ipad pro, the fullscreen lightbox only works ok in portret mode, in landscape mode, the horizontal size appears to be calculated always from the portret orientation, so thry are too small. Rotating the screen to portret orientation makes it fullscreen again...
I wonder, can i specify somewhere i want the lightbox or slideshow to open in fullscreen by default?
Marco
Clarifucation, the slideshow fullscreen mode is the only mode that has the problem, not the regular lightbox
I'll look into this. Just to confirm: are you looking at the new lightbox in the Organizer, or the old one in a gallery?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
The current slideshow, i thought the new one was already live.
I have the problem on all my galleries, for example https://dutchphotographer.smugmug.com/Travel/Prague-2018/
Marco
The new lightbox is Live inside the Organizer only. We had temporarily enabled it for all Basic accounts (you're on a higher plan since you've customized your site) so if you're looking at the gallery slideshow then it'll be the old Lightbox. I checked out Slideshows in the Organizer and they appear to be OK and don't exhibit this bug. Let me know if you notice anything differently.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
We've temporarily disabled the new Lightbox from Basic accounts while we work through some user experience improvements. All accounts will see the old Lightbox when viewing items in galleries and content blocks.
The new Lightbox is still available for account owners inside the Organizer.
Once the improvements are made we plan to roll the new Lightbox out to all users, all over SmugMug. I imagine this will happen in the next month or less. I'll post a heads up and some CSS customization tweaks before it goes live.
A couple of the improvements we're working on:
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 checked and the bug is indeed only with the old slideshow.
Good to hear the new version will remove the framing and will be full frame.
Two screen prints of lightbox, one from Organizer, other from gallery, both fill size. The insert is from Organizer.
3367 x 2245 photo size
Organizer looks like garbage compared to the one in gallery.
https://www.photosbyat.com/Birds/2018-Birding/Birding-2018-November/2018-11-07-Mandarin-Duck-of-St-Ferdinand-Park/i-B9fPzBz
My Website index | My Blog
You remove the sizes and there is no way can I see a photo in lightbox without seeing all the jaggies.
The overlay screen never goes away here. Or very random it might disappear.
My Website index | My Blog
As far as I can tell, when not using display copies, the image rendering SM has in the test lightbox generates picture-damaging jaggies whenever there's a curved edge or angled straight edge that is at once fairly long, smooth, and high contrast.
Earlier I estimated the catastrophe rate with that approach was about 1% for my pictures. Having looked at a wider range of galleries, that's low. Probably 2 or 3% would be a better guess for out-and-out failures. It would be more like 10% if you count pictures that look OK in the new lightbox by themselves, but which are clearly less representative of the originals than an old-lightbox fill image if you make a 3-way comparison.
@Allen: Just to confirm, you’re only seeing the jagged images in the Organizer?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Yes, in Organizer. A set display size compared to fill size.
This is the photo I posted an example of in a post above.
https://www.photosbyat.com/Birds/2018-Birding/Birding-2018-November/2018-11-07-Mandarin-Duck-of-St-Ferdinand-Park/i-B9fPzBz
My example in post above actually compares LB fill sizes for gallery vs Organizer.
But in Organizer LB comparing set sizes vs fill you can see this.
My Website index | My Blog
Also seeing jaggies in the organizer.
https://www.davidwattsphotography.com/organize/Vacation/Emerald-Island-NC-2017/i-jqrC7qB
look at the Cape Lookout Lighthouse images in organizer lightbox and then normal gallery view, or normal lightbox.
"You miss 100% of the shots you don't take" - Wayne Gretzky
Hey David, Are you aware that your lightbox is messed up? You have written text displayed next to the icons, i.e. Close, Leave a Comment, Sizes, info etc.
It's all garbled though and not displaying correctly.
Follow me on:
Instagram | Facebook | Flickr
I am. Haven't taken out the older code yet. Something for a snow-day eventually.
Were you able to see the jaggies in the organizer lightbox?
"You miss 100% of the shots you don't take" - Wayne Gretzky