Upcoming Lightbox improvements (2019 edition)

1456810

Comments

  • hadronhadron Big grins Posts: 81Registered Users Big grins

    @leftquark said:
    Another idea that I've tossed around is to let you choose, per gallery, the launch state of the Lightbox. On Monday we'll be releasing a gallery setting called Commerce Focused Lightbox (under the "Appearance" tab of Gallery Settings), with an ON/OFF toggle. When set to ON, the Lightbox will launch with the shopping cart already opened, helping show off which products are available for sale. We expect this will help all of you sell more photos. I've considered expanding this to allow you to choose which functionality the LB launches into, whether it's the photo-only mode, the commerce mode, the photo details mode, sharing, or commenting.

    Taking that even further we could have a "Lightbox Style" selector which could auto-apply some of the CSS customizations in the other thread. But now I'm just letting my imagination run free. There's a few things we'd like to build for all of you before getting to something like this.

    You seems to be adding lot of options, but none which puts Captions under the photo. Why NOT make this an option? Lot of people seem to like that. Clearly someone at SM has issues with captions under the photos - maybe it's your Pro customers. But when enabled, it makes the photo much smaller than if the Captions where underneath the photo. So why not make it an option!

    Or as your imagination runs free, allow CSS to customize where the Captions are. I had done this with the old LB.

    I say, leave the Photos Option button, but if the option to put the Captions under the photo is enabled, do so.
    Otherwise put the Captions in the Sidebar. Everyone will be happy.

    Enough said...

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

    @hadron said:
    You seems to be adding lot of options, but none which puts Captions under the photo.

    I mentioned a few days ago that one line of the caption will be returning on top of the photo. It won’t be an option - it’ll just be there. If folks don’t like it, they can use CSS to hide it on top of the photo.

    I expect that to go live Monday or Tuesday

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

    @leftquark said:

    @hadron said:
    You seems to be adding lot of options, but none which puts Captions under the photo.

    I mentioned a few days ago that one line of the caption will be returning on top of the photo. It won’t be an option - it’ll just be there. If folks don’t like it, they can use CSS to hide it on top of the photo.

    I expect that to go live Monday or Tuesday

    Does this replace that file name and details icon? Hope so.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,700Registered Users Major grins

    New caption on LB looks terrible trying to show whole caption. No line breaks, it's all stung across one line.
    Would rather only see top line of caption.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • FergusonFerguson Major grins Fort Myers, FloridaPosts: 1,285Registered Users Major grins

    @leftquark, thank you for the caption. I tend to have one-line (or at least run-on) captions, so it works for me, but I would tend to agree with Allen, if there are line breaks in it, just show the first line. That indirectly gives people control over what portion gets displayed in long captions.

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

    Ugh. The Captions at the bottom of the photo, as is today, works for me. I hope the Font Size can be made bigger with CSS (for us who have vision issues)??

    I added a Text Content box on my home page to let my visitors know about the Caption changes. These instructions will go away after a month or so...

  • JtringJtring Major grins CaliforniaPosts: 518Registered Users Major grins

    I observe that if a picture has both a title and a caption, then the three line "photo details" icon does NOT show at the bottom with the text. But if no title available, just a caption, the icon IS present. Is that intentional?

    As for the design change otherwise, nothing looks terribly out of line, but to make the caption line readable across all sort of images, a darker scrim might be wise. I certainly have some images where the caption's white text all but disappears in spots. It looks like scrim changes can be easily implemented via user CSS, although I've not done so yet.

    Jim Ringland . . . . . jtringl.smugmug.com
  • leftquarkleftquark SmugMug Product Team Posts: 3,638Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Jtring said:
    I observe that if a picture has both a title and a caption, then the three line "photo details" icon does NOT show at the bottom with the text. But if no title available, just a caption, the icon IS present. Is that intentional?

    Yep! The "Photo Details" icon gives some visual weight when there's only a title, only a caption, or no title/caption, but was distracting when both title and caption exist. It helps reinforce the icon on the left sidebar as well, but isn't needed when a photo has both title and caption.

    @Jtring said:
    As for the design change otherwise, nothing looks terribly out of line, but to make the caption line readable across all sort of images, a darker scrim might be wise. I certainly have some images where the caption's white text all but disappears in spots. It looks like scrim changes can be easily implemented via user CSS, although I've not done so yet.

    We darkened the scrim a bit as a result of adding the caption to the photo but didn't go too dark because we didn't want it to distract from the photo. We'll continue to tweak the scrim as we iterate, if needed. It's also customizable with CSS as you pointed out :)

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • hadronhadron Big grins Posts: 81Registered Users Big grins
    edited August 26, 2019

    If there is NO Caption AND Show Camera Info is turned off in the gallery settings, why still show the full, BLANK sidebar? It should not do that.

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

    @Allen said:
    New caption on LB looks terrible trying to show whole caption. No line breaks, it's all stung across one line.
    Would rather only see top line of caption.

    @Ferguson said:
    @leftquark, thank you for the caption. I tend to have one-line (or at least run-on) captions, so it works for me, but I would tend to agree with Allen, if there are line breaks in it, just show the first line. That indirectly gives people control over what portion gets displayed in long captions.

    I too use line breaks in the first few lines of my captions but only including the first line in a multi-line caption would destroy the intent of displaying the caption on top of the photo. The intent is that you want your viewers to learn about the photo, and only displaying the very first part of that description doesn't give viewers the knowledge that you want them to get. Only including one line can also be very easily confused as the end of the caption (it's easy to miss the "...") so it's also more likely that your viewers wouldn't click to read more. By concatenating the caption into one line it lets your viewers read more and helps bring awareness that more information exists.

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

    I found a way to add bullets where there were line breaks.
    They only show in that long LB overlay of the photo not in any caption.
    It's especially important on two of my galleries for a total of 300 photos.
    Each of their captions would need to be edited.

    testing on this photo
    https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-Mrg8Z6F


    I wouldn't mind if Smug could auto add these break indicators.

    The Smug app still shows the •• in caption so need a way CSS? to hide there.
    iPhone Firefox ok.

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

    @Allen said:
    The Smug app still shows the •• in caption so need a way CSS? to hide there.

    The apps are built natively for iOS and Android and don't use CSS, HTML, etc. They're set to gracefully strip HTML out of the caption if the caption has any HTML.

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

    For folks looking to sell more photos, we've added a setting to control whether the shopping cart is opened when the Lightbox launches. See more details here: https://dgrin.com/discussion/265480/new-commerce-focused-lightbox-option-will-help-you-sell-more

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • JtringJtring Major grins CaliforniaPosts: 518Registered Users Major grins
    edited August 27, 2019

    @leftquark said:

    @Jtring said:
    I observe that if a picture has both a title and a caption, then the three line "photo details" icon does NOT show at the bottom with the text. But if no title available, just a caption, the icon IS present. Is that intentional?

    Yep! The "Photo Details" icon gives some visual weight when there's only a title, only a caption, or no title/caption, but was distracting when both title and caption exist. It helps reinforce the icon on the left sidebar as well, but isn't needed when a photo has both title and caption.

    But there's a little problem. You've suggested that if we don't like the captions, we write CSS to remove them. Easy enough. See below: the first line knocks out the captions when a title a present and the second restores the box to the size used when there is just a title in order to make positioning the same. But, there is now just a title. No icon. It's a situation where the visual weight and reinforcement you mention would be welcome, but isn't available. If the photo started with a title and no caption, this code would do nothing, and the display would have a title and icon. If the photo had only a caption, the icon would be there too. So a bit inconsistent too.

    Why do I care? My site doesn't use titles now, but my long term plan is to introduce them since they display so well in the new lightbox. Captions won't go away, but they may be simplified. A prerequisite for that is being able to sort galleries by title, but I figure you'll get around to that since you are clearly pushing toward more use of titles. Anyway, when a title is available, just showing it (without the caption) in the photo buttons bar seems fine. Without a title, showing the caption seems fine. But since introducing titles will take a while, there will be a long period where some photos will have titles and some won't. I'm after code to handle all situations gracefully and with visual consistency.

    I've not been successful in sneaking the SVG with the icon in using a ::before pseudo-class. There's much I don't know about SVG's but I've gotten the icon up locally using Stylus. Can't seem to get anything via a CSS content box on the site though.

    So ... how about either restoring the icon when both title and caption are present ... or providing some switch that allows the user to turn off the caption when a title is present in the photo buttons bar but retains the icon?

    .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {display:none; }
    .sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;}
    
    Jim Ringland . . . . . jtringl.smugmug.com
  • leftquarkleftquark SmugMug Product Team Posts: 3,638Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Jtring said:
    So ... how about either restoring the icon when both title and caption are present ... or providing some switch that allows the user to turn off the caption when a title is present in the photo buttons bar but retains the icon?

    We can consider these options.

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

    @leftquark said:

    @Jtring said:
    So ... how about either restoring the icon when both title and caption are present ... or providing some switch that allows the user to turn off the caption when a title is present in the photo buttons bar but retains the icon?

    We can consider these options.

    I appreciate that. It would be nice to be able to get back to the original design that went live about two weeks ago in the not-very-exotic case of having both a title and caption. Kind of odd that right now, one can't.

    Jim Ringland . . . . . jtringl.smugmug.com
  • JtringJtring Major grins CaliforniaPosts: 518Registered Users Major grins

    @leftquark said:
    ... On Monday we'll be releasing a gallery setting called Commerce Focused Lightbox (under the "Appearance" tab of Gallery Settings), with an ON/OFF toggle. When set to ON, the Lightbox will launch with the shopping cart already opened, helping show off which products are available for sale. We expect this will help all of you sell more photos. I've considered expanding this to allow you to choose which functionality the LB launches into, whether it's the photo-only mode, the commerce mode, the photo details mode, sharing, or commenting.

    I certainly like that last idea.

    Jim Ringland . . . . . jtringl.smugmug.com
  • JtringJtring Major grins CaliforniaPosts: 518Registered Users Major grins

    @hadron said:

    @leftquark said:

    One thing that would help your current workflow is to know we've hooked up various keyboard shortcuts. When the LB launches you can press "e" to jump right into edit mode (it'll save you a click), and you can press the "return" key to save, as well as the "x" key to close the LB and return to the Collage. We had planned to have a window that opens to explain all the keyboard shortcuts but opted to launch the new LB, as soon as possible, without waiting to build that.

    The "e" shortcut works (I like it), but the "x" does not work.
    Also, "i" turns Captions On/Off, and "f" seems to On Full Screen. (The full screen Arrows in the upper left get out of sync when using the shortcut, ESC, and clicking on the arrows after using the "f" shortcut.)

    These keyboard shortcuts help the workflow. Thank you, @leftquark.

    Jim Ringland . . . . . jtringl.smugmug.com
  • mbg71mbg71 Beginner grinner Posts: 9Registered Users Big grins

    So, captions are back in the normal lightbox view, but not in the slideshow?

  • RonvanderPlasRonvanderPlas NederlandsPosts: 15Registered Users Big grins
    edited August 28, 2019

    I too would really, really love to see the title(s) back in the slideshow. My photo's are about informing visitors about our travels and places where we have been. Sometimes we put the slideshow on and sit back. Having a title to explain where the photo was taken would be wonderful.

  • leftquarkleftquark SmugMug Product Team Posts: 3,638Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited August 29, 2019

    Captions and titles are coming back in slideshow too. It’s currently being tested by our QA team. Hopefully launching end of this week or next.

    I’ll be out of Office for 2 weeks but will try to have someone pop in and monitor this topic

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

    @leftquark said:
    Captions and titles are coming back in slideshow too. It’s currently being tested by our QA team. Hopefully launching end of this week or next.

    That's great news. Thank you!

  • RonvanderPlasRonvanderPlas NederlandsPosts: 15Registered Users Big grins

    Captions and titles are live now. Thanks. Great work overall!!

  • JtringJtring Major grins CaliforniaPosts: 518Registered Users Major grins
    edited August 31, 2019

    @RonvanderPlas said:
    Captions and titles are live now. Thanks. Great work overall!!

    Was it your intent that captions/titles do not auto-hide like the rest of controls? Seems you've gone from always-off to always-on. I can live with that if need be, but the old arrangement had more flexibility. Normally with auto-hide on, if you parked the mouse over a control, everything stayed on (including captions). If the mouse was parked elsewhere, the display moved to a very clean screen. By mouse position, one could essentially select the display style on the fly.

    Jim Ringland . . . . . jtringl.smugmug.com
  • RonvanderPlasRonvanderPlas NederlandsPosts: 15Registered Users Big grins
    edited August 31, 2019

    Hi Jtring, I meant the titles and captions in the slideshow. I wasn't aware of the position of the mouse mastering the auto-hide in the lightbox. Good to know. That is not widely known.

    Just did a test and indeed you're right changing the lightbox settings to auto-hide and managing the visibility of titles/caption with the mouse position is much more flexible and gives a clean interface if needed. Thx. Only thing is how my visitors know this.

  • JtringJtring Major grins CaliforniaPosts: 518Registered Users Major grins

    Auto-hide works fine on the normal lightbox. I too was referring to the slideshow version where there is that small inconsistency in hiding controls differently from captions/titles. My question was really for the SmugMug folks.

    Jim Ringland . . . . . jtringl.smugmug.com
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    @leftquark while I generally like the new "lightbox buyer view" to directly open if activated, would there be a chance to have a setting to deactivate it for smaller screens automatically too? Everything up to maybe IPad in vertical mode? Because in those cases the image is shown as a tiny thumbnail (in case of the IPad even smaller than in the gallery itself), which I feel is counter-productive. Especially since one cannot scroll to a bigger sized photo, the close button then, at first sight, leads to the assumption that you get back to the gallery and not the "normal" lightbox (at least that is what I first thought before testing it).

    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • evansmugevansmug Big grins Posts: 35Registered Users, SmugMug Product Team SmugMug Employee

    @Jtring said:

    @RonvanderPlas said:
    Captions and titles are live now. Thanks. Great work overall!!

    Was it your intent that captions/titles do not auto-hide like the rest of controls? Seems you've gone from always-off to always-on. I can live with that if need be, but the old arrangement had more flexibility. Normally with auto-hide on, if you parked the mouse over a control, everything stayed on (including captions). If the mouse was parked elsewhere, the display moved to a very clean screen. By mouse position, one could essentially select the display style on the fly.

    Hi folks, Evan here (filling in for @leftquark while he's out). As noted, captions and title additions are now live for both normal lightbox view as well as slideshow. The intent was indeed for captions/titles to remain on the photo, specifically during slideshow playback. You'll notice titles/captions still do auto-hide in normal lightbox view. For slideshow, we wanted to ensure the viewer has the most ideal experience. Given the short duration of each photo on the screen during playback, it feels more ideal to have the title/caption continuously show (so the user can read, while not having to manually interact with the mouse). Also, it looks less jumpy when titles/captions are not appear/disappearing constantly as the photos progress.

    SmugMug Product Manager
    evandeffley.smugmug.com
  • evansmugevansmug Big grins Posts: 35Registered Users, SmugMug Product Team SmugMug Employee

    @Lille Ulven said:
    @leftquark while I generally like the new "lightbox buyer view" to directly open if activated, would there be a chance to have a setting to deactivate it for smaller screens automatically too? Everything up to maybe IPad in vertical mode? Because in those cases the image is shown as a tiny thumbnail (in case of the IPad even smaller than in the gallery itself), which I feel is counter-productive. Especially since one cannot scroll to a bigger sized photo, the close button then, at first sight, leads to the assumption that you get back to the gallery and not the "normal" lightbox (at least that is what I first thought before testing it).

    Good feedback. We designed the experience to work this way by default, because the primary goal of the Commerce-focused lightbox is to ensure the buying experience for your viewers is maximized. Hence the larger visual prominence of the buying options over the image in the mobile/small-screen context. But I'll share this feedback with the team.

    SmugMug Product Manager
    evandeffley.smugmug.com
  • Erick LErick L Major grins Posts: 355Registered Users Major grins

    "The new design is clean, with only the photos title and buy button overlapping the photo."

    So it's not clean then. The first rule of a photo website should be "thy shall not cover the photo in any way".

    So SM tells me to sift through the forum to find CSS code to remove that stuff but the code also puts an empty space under the photo in the slideshow.

    What a mess. Where's the code to show captions as well?

Sign In or Register to comment.