Upcoming Lightbox improvements (2019 edition)

1246710

Comments

  • FergusonFerguson Major grins Fort Myers, FloridaPosts: 1,285Registered Users Major grins

    @leftquark said:

    @Ferguson said:

    @hadron said:
    Let me ask this a different way.
    When in the lightbox and going from photo to photo, can I see each photo's captions WITHOUT seeing any of the photo details?

    Yeah, that's a big miss for me, but it appears in the customization section they let you put it back. See:

    https://dgrin.com/discussion/265352/customizing-the-new-lightbox#latest

    Search for caption, it's a ways down. I haven't tried it yet.

    The caption will never be displayed on top of the photo since it can be quite long and the idea was to minimize anything that covered the photo. It would also be super confusing to have a whole bunch of rules on what is displayed on top of the photo (if title, display title; if title and caption, display title; if no title but caption, display caption), so we opted for the super simple: Title or Filename and buy buttons are the only thing that cover the photo.

    If you turn off “Show Photo Info” in Gallery Settings, then the sidebar should display just the Title, Caption and Keywords. You can also select if Title, Caption, and Keywords are displayed via the Customization settings.

    During our research we saw that the new design encourages photographers to give titles and captions, telling the story of the photo, and your visitors love being able to easily read the story while seeing the entire photo. This should be a win for both you and your viewers.

    Yeah, I just tried it -- it just plain sucks. Technical term, which means your "win win" at least at the moment appears to be a huge lose for me.

    My titles are just the gallery name -- why? Because when downloaded the metadata title field identifies the actual event. Images need to stand alone (outside smugmug) as well as in a gallery. Any interesting and non-repetitive info is in the caption. Which now 98% of the people who view the gallery will never see.

    So there is NO WAY to get the caption (just the caption, or caption and title) to ALWAYS display, to NOT require someone hit a button they will not know about to see it?

    I'm not so much complaining that you do not want it over the image, or how it gets displayed, but the idea that people browsing a gallery will understand or use the button controls just doesn't work for me. For many users it is the first time they landed on Smugmug. I just want some way for them to scroll through the images, large size and see them and their captions. They do not know or care they are on Smugmug, they aren't inclined to learn much navigation beyond "swipe".

    Please say I'm missing something.

  • hadronhadron Big grins Posts: 81Registered Users Big grins

    Thanks for these clarifications.

  • sarasphotossarasphotos Major grins Augsburg, GermanyPosts: 2,310Registered Users Major grins

    ^^ I'll add a "me, too" to @Ferguson 's comment

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins

    Okay, here's a test. Can you find the caption is this? Nothing should show but it. Should have to toggle everything off/on.

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

    I also find it realy ugly that there is no gap between the flyout and photo.
    The sidebar completely overwhelms the photo.

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

    @Allen, is the border shown on the photo the edge of the actual image? I.e. the bar is not occluding any of the image, is it? (I agree it's ugly, just wondering if it's also occluding -- it's natural looking at it to think it does).

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins

    The whole photo is showing. I'm been complaining seen day one that you don't touch the frame with the photo.
    Maybe all edges but not less then all. Especially one edge.
    There should be a padding surrounding a photo.

    I repeat: The sidebar completely overwhelms the photo.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • JtringJtring Major grins CaliforniaPosts: 520Registered Users Major grins

    Some of the issues folks have been raising can be addressed by CSS. I've been testing the code below, using the Stylus plugin to push the CSS onto the display in the organizer lightbox locally. The basic idea is to fiddle with colors, fonts, and spacing to emphasize the caption and de-emphasize everything else. The picture at the bottom shows the result. (By the way, the high shutter speed was needed because of wind.)

    I'm not using titles. I agree they look really good, but until I can sort galleries on titles, they just don't work for me. My effective sorting key / title for many photos are the first few words of the caption, as is the case in this example. I'm not going repeat the same text in the title and caption just so I can sort. Attractive, yes. Functional, not yet.

    This still requires a button click to show all the information. It agree it would be nice to have a switch to allow that panel to be on by default.

    In the example, you'll see a margin. I've been posting pictures at up to 2440 high and 1320 wide so that on my QHD monitor I get a margin when showing the originals, with no loss of sharpness because of browser scaling. That, of course doesn't work for other size monitors. I certainly agree a little bit of margin is nice and would love to have switch to make it possible to turn it on for all size monitors. (I've expressed my opinions elsewhere on the evils of relying on browser scaling, but there not much new to be said on that one.)

    /* In-process CSS mods for Lightbox-v2 exercised via the Stylus plugin.
    Tested on Firefox and Chrome
    James Ringland. Last update 5 August 2019 to clean up some of the comments
    
    /* Turn off all bottom buttons -- title and buy button */
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
        display:none;
    }
    /* Light grey on everything except the title and caption in the info sidebar that isn't already*/
    .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value,
    .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar button,
    .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5{
        color: #989ba2;
    }
    /*Caption adjustments, all to increase emphasis and focus on this section*/
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption {
        color: white;
        font-size: 18px;
        line-height:1.33em;
    }
    /* Extra space above keywords, again adding focus on caption*/
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords {
        margin-top:48px;
    }
    /* Remove unnecessary keywords lable*/
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords h5 {
        display:none;
    }
    /*Remove the Show More [camera info] button.  Restore when logged in.
    It's too much information and too much clutter for general browsers, but I 
    occaisionally like to check some of it as the owner.*/
    .sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn {
        display:none;
    } 
    .sm-user-loggedin .sm-lightbox-v2 .sm-imageinfo-advanced-btn {
        display:inline-flex;
    } 
    /* Narrow the spacing on the detailed image information, closer to what it was before the
    most recent change.  This removes the need for scrolling in most cases.*/
    .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-label, 
    .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-value {
        padding-bottom: 3px;
    }
    

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins
    edited August 5, 2019

    You'll need both of these otherwise everyone that's logged into their own site when viewing your site this will apply.
    .sm-user-loggedin.sm-user-owner

    No space.

    One problem I see is the scroll bar appears with long captions and "SHOW MORE".
    Is there someway to add some padding the the right of the scroll bar so the photo doesn't touch the bar?

    Thanks for posting this CSS, been fun playing with it.

    Just noticed: At about 950>830 browser width I loose the photo.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • hadronhadron Big grins Posts: 81Registered Users Big grins

    @leftquark said:

    .
    .
    .

    If you turn off “Show Photo Info” in Gallery Settings, then the sidebar should display just the Title, Caption and Keywords. You can also select if Title, Caption, and Keywords are displayed via the Customization settings.

    During our research we saw that the new design encourages photographers to give titles and captions, telling the story of the photo, and your visitors love being able to easily read the story while seeing the entire photo. This should be a win for both you and your viewers.

    You guys are killing me. Turning OFF Show Photo Info will work for my quests.

  • JtringJtring Major grins CaliforniaPosts: 520Registered Users Major grins
    edited August 6, 2019

    @Allen said:
    You'll need both of these otherwise everyone that's logged into their own site when viewing your site this will apply.
    .sm-user-loggedin.sm-user-owner

    Just to clarify, when Lightbox v2 goes live, my code belongs in the site custom CSS (somewhere), not in Stylus.

    One problem I see is the scroll bar appears with long captions and "SHOW MORE".
    Is there someway to add some padding the the right of the scroll bar so the photo doesn't touch the bar?

    How about:

        @Media (min-width: 961px) {
            .sm-lightbox-v2 .sm-lightbox-v2-sidebar {
             margin-right: 24px;
            }
        } 
    

    I haven't tried it, but it might be possible to put some margin around the image itself (or it's container).

    Thanks for posting this CSS, been fun playing with it.

    Glad it helped. You've helped me in the past.

    Just noticed: At about 950>830 browser width I loose the photo.

    Goes above the info, doesn't it?

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins

    I was really happy seeing that a padding/margin added the gap. Then I looked at the other side and saw part of photo missing.
    Tried both padding and a margin and both just pushed the photo to the right and the right side of the photo hides. The photo needs to reduced in size to fit. Like we had to do for thumbnails when adding a small border.

    img
    width: 98%;
    height: auto;

    I could not find the photo anywhere in that range.

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

    Think I have the gap set. Had to reduce width 98%.

    .sm-lightbox-v2-content .sm-lightbox-v2-photo {
        margin-left:15px!important;
        width: 98%!important;
        height: auto;
    }
    

    I found the "down arrow" at top to expose photo in that 950>830 browser width.

    Next fix a portrait photo hitting top and bottom.
    Change that ugly buy button.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • JtringJtring Major grins CaliforniaPosts: 520Registered Users Major grins
    edited August 6, 2019

    @Allen said:
    Think I have the gap set. Had to reduce width 98%.

    Happy to hear something worked out. Oddly, I don't see any the image clipping on my site when put a margin on the sidebar. If necessary, the image just scales itself down to fit in all the circumstances I've checked. Not sure why we are seeing different behavior.

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins

    With my typical 24" monitor using a browser width of about 1300. I do a lot of jumping between windows.
    I tried all widths and still had the clipping. Rarely ever go full screen other then getting the highest rez screen shot.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • JtringJtring Major grins CaliforniaPosts: 520Registered Users Major grins

    @Allen said:
    You'll need both of these otherwise everyone that's logged into their own site when viewing your site this will apply.
    .sm-user-loggedin.sm-user-owner

    Got it. Took me a while to realize what would be going on.

    Jim Ringland . . . . . jtringl.smugmug.com
  • leftquarkleftquark SmugMug Product Team Posts: 3,663Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    edited August 6, 2019

    @Allen said:
    I also find it realy ugly that there is no gap between the flyout and photo.
    The sidebar completely overwhelms the photo.

    Keep in mind that in most modern browsers (anything that's not an older version of Firefox), the scrollbar has been customized to be extremely minimal. Most of your visitors will never see that big scrollbar. If you're going to add any CSS to work around it, I'd recommend 2 things:
    1) Only customize it for Firefox. Safari and Chrome based browsers (including IE) won't have a big scrollbar.
    2) Only customize it for small size windows (using a @media query) smaller than your max display size, since most screens will run into your MDS and then center the photo in its area. Adding padding to the left will cause it to appear off-center.

    This is what it looks like in Chrome, for example. The scrollbar is slightly visible but not intrusive:

    I've added a task for the team to make older firefox browsers look a bit better (most likely by adding some padding next to the scrollbar).

    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,663Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    We'll also be taking advantage of Firefox's scrollbar-width and scrollbar-color CSS attributes to customize the scrollbar on firefox browsers, something like this:

    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,663Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Allen said:
    I also find it realy ugly that there is no gap between the flyout and photo.
    The sidebar completely overwhelms the photo.

    We'll also be shrinking the amount of metadata that's first displayed in the Camera Info section so it takes up less space. We'll move the fields beneath the "show more" so they'll still be visible but not overwhelming when the photo is first viewed.

    Keep in mind that when a viewer opens the sidebar, their intention is to read the information on the photo. It's meant to take over the viewers attention because we want to make that reading experience great for them. But the photo is still displayed next to it so they can see what they're reading about (but it's smaller since viewing the photo is no longer their main goal). In the old Lightbox the title and caption would often cover the photo, which was hard to read and meant that you couldn't really enjoy the photo either. Our design team put a lot of effort into making the specific viewer desires great experiences and we considered the users current desire in each of these experiences. We also tested this to confirm our thoughts. Not everyone will love everything - that's the beauty of the internet, but for the vast majority of your visitors, this will be a much better experience.

    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
  • FergusonFerguson Major grins Fort Myers, FloridaPosts: 1,285Registered Users Major grins

    @leftquark said:
    Keep in mind that when a viewer opens the sidebar, their intention is to read the information on the photo. It's meant to take over the viewers attention because we want to make that reading experience great for them.

    Which is exactly why I hate having to (a) have them know to do that, and (b) have all that junk there just to get the caption visible (I think from comments maybe I can control what's on the side panel to remove everything else -- maybe -- but that ALSO defeats the purpose for those few users who WANT to see the info on the photo and would know to hit info).

    Caption should not be treated like ISO!!!

    Caption and Title are special.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins

    I am using the latest Firefox. I don't like the photo touching anything. Should be a mat around photo.
    Guess will have to wait to see the scrollbar modifications
    Here's where I'm at now.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • hadronhadron Big grins Posts: 81Registered Users Big grins

    @Ferguson said:

    Which is exactly why I hate having to (a) have them know to do that, and (b) have all that junk there just to get the caption visible (I think from comments maybe I can control what's on the side panel to remove everything else -- maybe -- but that ALSO defeats the purpose for those few users who WANT to see the info on the photo and would know to hit info).

    Caption should not be treated like ISO!!!

    Caption and Title are special.

    I fully agree. I currently have the Photo Info disabled for all guests, and plan to do the same with V2.
    Per Leftquark, this is doable, which will only show Titles and Captions in the sidebar (I hope).

  • JtringJtring Major grins CaliforniaPosts: 520Registered Users Major grins

    @leftquark said:

    We'll also be shrinking the amount of metadata that's first displayed in the Camera Info section so it takes up less space. We'll move the fields beneath the "show more" so they'll still be visible but not overwhelming when the photo is first viewed.

    Please be sure keep the copyright field in the first display. That's the one thing I really want to be easily visible over there.

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins
    edited August 8, 2019

    Would love to see the photo number from the gallery in the lightbox.

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

    @Allen said:
    Would love to see the photo number from the gallery in the lightbox.

    IMG_1623e.JPG • • • 22 / 325

    How do you intend for this to be used?

    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,725Registered Users Major grins
    edited August 8, 2019

    It would help big time when on phone with someone going through lightbox photos.
    It's the easiest way to get on the same photo. Think of looking at Proofs, most of the photos
    are almost identical and can easiely get lost.

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

    @Allen said:
    It would help big time when on phone with someone going through lightbox photos.
    It's the easiest way to get on the same photo. Think of looking at Proofs, most of the photos
    are almost identical and can easiely get lost.

    I can think of a few easier ways that I'd rather build that wouldn't clutter the screen with more information ... not to mention it's really easy to add or delete a photo to the gallery and then the #'s are completely thrown off. For example, just today you told me to look at photos "1,2, 4, and 5" but by the time I got to the gallery you had uploaded 2 new ones and removed another one.

    We'll be looking to make it easier for your visitors to let you know which photos they want you to take some action on. Though we'll still need to figure out if you're looking to tell them some specific images you want them to look at (though you can always send them links to the individual photos).

    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,725Registered Users Major grins

    This is about "real time" reviewing photos which can be impossible if viewers get out of sync.
    The filename is there for documenting for whatever reason.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • hadronhadron Big grins Posts: 81Registered Users Big grins

    @Allen said:
    Would love to see the photo number from the gallery in the lightbox.

    Allen,, just curious. Are you doing this sidebar with CSS?

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,725Registered Users Major grins
    edited August 9, 2019

    Yes, but I faked in the gallery photo/page numbers.
    Using Firefox but other browsers have "Inspect Element" also
    Right clicked on sidebar and pick "Inspect Element"
    Developer Tools box opens
    select "Style Editor" in menu
    I scroll left pane down and click to highlight last xxxx.CSS
    I select last because think that would be last applied to page so will override any previous rules
    In right pane scroll to bottom and enter new CSS
    Any page reload you'll lose the added CSS so I keep a text file updated as I make changes.

    I started with the CSS leftquark posted in the Customizing the New Lightbox forum.
    This is my current adjustments. These are classes existing in the Organizer lightbox, will have to be update when live

    /* Caption adjustments, all to increase emphasis and focus on this section */
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption {
        color: #ddd;
        font-size: 14px;
        line-height:1.33em;
        text-align:center;
        background: #333;
        padding: 10px 0;
        border: 4px double yellow;
        border-radius: 12px;}
    
    /* Caption adjustments, all to increase emphasis and focus on this section */
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption a {
        color: yellow;}
    
    /* Caption adjustments, all to increase emphasis and focus on this section */
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption span {
        color: white;
        background:#333;
        padding:2px;}
    
    
    /* Caption adjustments, all to increase emphasis and focus on this section */
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption a:hover {
        color: red;}
    
    
    /* Extra space above keywords, again adding focus on caption */
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords {
        margin-top:20px;}
    
    /* Remove unnecessary keywords lable*/
    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords h5 {
        display:none;}
    
       /*Remove the Show More [camera info] button.  Restore when logged in.
    It's too much information and too much clutter for general browsers, but I 
    occaisionally like to check some of it as the owner.
    (note: I added X to temp enable ) */
    .sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn {
        display:x none!important;}
    
    .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn {
        display:inline-flex;
    } 
       /* Narrow the spacing on the detailed image information, closer to what it was before 
    the most recent change.  This removes the need for scrolling in most cases.
      I minimized padding between each item */
    .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-label, 
    .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-value {
        padding-bottom: 1px;}
    
      /* add small space from scroll bar to photo */
    .sm-lightbox-v2-content .sm-lightbox-v2-photo {
        margin-left: 15px!important;
        width: 98%!important;  /* shrink photo so right side shows */
        height: auto;
        border-radius: 8px;}
    
    
       /* close button */
    .sm-lightbox-v2-navbar-secondary .sm-lightbox-v2-hideable.sm-button-square {
        background-color:red!important;
        border:2px solid #fff!important;
        color:#000!important;
        font-size:14px!important;
        opacity:1.0;
        width: 130px!important;
        height:35px;
        margin-right: 43px!important;
        x padding: 0 5px 1px!important;
        position:relative;
        left:-92px;}
    
       /* close button */
    .sm-lightbox-v2-navbar-secondary .sm-lightbox-v2-hideable.sm-button-square:hover {
        color: #fff!important;
        border:4px solid #fff;}
    
       /* close button */
    .sm-lightbox-v2-navbar-secondary .sm-lightbox-v2-hideable.sm-button-square:after {
        content: ' Return to Gallery';}
    
       /* close button */
    .sm-lightbox-v2-navbar-secondary .sm-lightbox-v2-hideable.sm-button-square .sm-icon {
        display: none;}
    
       /* upper filename */
    .sm-lightbox-v2-sidebar-content .sm-image-metadata-filename {
        text-align:center; color:yellow; font-size:120%}
    
    
       /* buy button */
    .sm-lightbox-buy-button.sm-lightbox-v2-hideable  {
       background: #444 !important;
       border: 4px double #888 !important;
       border-radius: 8px;
       padding: 2px !important;
       color: gold !important;
       height: max-content;}
    
       /* buy button */
    .sm-lightbox-buy-button.sm-lightbox-v2-hideable:hover {
       border-color: gold!important;}
    
    
     /* sidebar spacing around caption */
    .sm-image-metadata > * + * {
        margin-top: 14px!important;}
     /* sidebar spacing above camera info */
    .sm-image-metadata + h5 {
        margin-top: 16px!important;}
     /* sidebar spacing below camera info */
    .sm-lightbox-v2-sidebar-content h5 {
        margin-bottom: 14px!important;}
    
      /* temporary hide edit photo details - add/remove "x" to disable/enable */
    .sm-image-metadata-edit-button {x display:none!important;}
    
    Al - Just a volunteer here having fun
    My Website | My Blog
Sign In or Register to comment.