Improved caption display

HamsterHueyHamsterHuey Registered Users Posts: 73 Big grins
edited November 7, 2013 in SmugMug Feature Requests
This is a bit of a long post. Not sure if this should be 2-3 separate feature requests. Captions need improvement both in "SmugMug Gallery" style viewing, as well as when viewing in Lightbox mode.

1) SmugMug Gallery view
Captions end up being below the fold a lot of times, when testing at multiple browser sizes. There is a lot of extra whitespace that could be removed to bring the captions closer to the base of the image. As it stands, it is very easy for someone to completely miss captions when simply browsing in SmugMug Gallery view.

2) Improved Caption Display in Lightbox mode
Captions SHOULD be persistent, or at least an option should be offered to viewers for them to be persistent, and ideally they should be below the image, not an overlay over the image...like the Legacy SmugMug implementation. They should not fade away and disappear when no mouse activity is detected. Moreover, when browsing with keyboard through images, captions should again always be visible (at the moment they never even show up if using keyboard arrows to browse).

3) Caption display on slideshows
Some options should be implemented to control the display of captions. Similar to Note 2) above.

Thanks
Unhappy SmugMug beta tester - http://smandal.smugmug.com

Comments

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 3, 2013
    Lightbox mode:
    Some folks add a lot of text to their caption. This would be almost impossible to read overlaying the photo.

    This will be more and more common now that Smug removed the story telling "journal" gallery style.

    Captions under main photo Smugmug style: Need to get the actual caption close to photo.
    Add three div's under main photo.
    Left div: Photo nav (prev xx of xxx next), below it "Share".
    Middle div: caption
    Right div: tools icons
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JtringJtring Registered Users Posts: 673 Major grins
    edited August 3, 2013
    Just found this forum. This is my first post. I'm doing OK playing in the sandbox but I absolutely agree these are critical. On the SmugMug Gallery view, both being able to center the caption (not just having it left justified) and wrapping, if necessary, at the width of the sides of the picture rather than after 85 characters or so would be very welcome. On number 2, I'd strengthen the "... ideally they should be below the image ..." I really dislike having text cover the image. The picture and the caption are two different things and each should be allowed to tell their story without interference. -- Jim Ringland
    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 3, 2013
    Jtring wrote: »
    ... On the SmugMug Gallery view, both being able to center the caption ...
    Add a CSS box "all galleries". This will center the captions.
    #sm-gallery .sm-tile-info {
      max-width: none;
      text-align: center;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JtringJtring Registered Users Posts: 673 Major grins
    edited August 3, 2013
    Many, many thanks, Allen! That addresses both the centering and the wrap problem. -- Jim Ringland
    Jim Ringland . . . . . jtringl.smugmug.com
  • pbandjpbandj Registered Users Posts: 237 Major grins
    edited August 3, 2013
    Thanks for adding this as a feature request; it's my number 1. And thanks, Allen, for helping with the centering/wrapping problem. For me to use smugmug the way I like to use it I need captions to work better in Lightbox and Slideshow as well...I sometimes have longish captions...

    I'll be voting for this feature once the new feedback site is live.
  • pbandjpbandj Registered Users Posts: 237 Major grins
    edited August 4, 2013
    I've been thinking that a lot of folks may actually prefer this very minimalist approach to captions. So perhaps a solution would be to have a different gallery style that is similar to the default smugmug gallery but is "caption-friendly." For example, the caption is under the main photo, centered, not limited in height, has its own css class, and is tied to the main photo in such a way that when the browse window is resized, the caption stays "above the fold" in most cases. This gallery style would also need to launch a caption-friendly Lightbox and a caption-friendly slideshow if the slideshow button is clicked...both of those work well and resize well in legacy smugmug, in my opinion. That would be a lot of work in that I'd need to change the style on a gazillion galleries, but might be a way to satisfy both camps.

    I'm sure that the people commenting on this particular thread all have sites where captions are very important to the way they use smugmug, but I decided it might be fun to post an example or two of galleries where the photos absolutely don't make any sense without photo captions (the gallery description is fairly important in these two cases as well). These are from my legacy site.

    Here are a couple of galleries I have in a "humor" section (note that I'm just an enthusiast who likes sharing photos, especially travel photos with friends and family, not a professional):
    http://photos.bellhanley.com/Fun-Offbeat/Outhouses-of-the-World/12774407_mWSGgp#!i=920637919&k=4ZDdspX (Outhouses of the World)

    http://photos.bellhanley.com/Fun-Offbeat/Hummingbird-Helmet/13344135_C6Fs3n#!i=909589836&k=4RKLDs7 (documenting a silly present I got from two lovely, but goofy friends who know I love hummingbirds)
  • LPCLPC Registered Users Posts: 481 Major grins
    edited August 4, 2013
    Thank you Allen thumb.gif
  • BrodyBrody Registered Users Posts: 252 Major grins
    edited August 4, 2013
    Allen wrote: »
    Add a CSS box "all galleries". This will center the captions.
    #sm-gallery .sm-tile-info {
      max-width: none;
      text-align: center;
    }
    

    Sorry to sound ignorant, but where do I apply the code you posted? I'd really like to have the comments centered.

    Thanks, John
    Travel & Landscape Favorites at JohnBrody.com / Facebook / Blog / JohnBrodyPhotography.com
    ________________________________________________________________________________________________
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 5, 2013
    Brody wrote: »
    Sorry to sound ignorant, but where do I apply the code you posted? I'd really like to have the comments centered.

    Thanks, John
    Probably best in a "entire site" CSS widget.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • GaryBakkerGaryBakker Registered Users Posts: 266 Major grins
    edited August 6, 2013
    I don't know if these feature requests get prioritized based on number of comments, but just in case I am adding my "vote" for this feature.

    I use captions heavily.
    SmugMug site => The Bakker Chautauqua
    "The difference between stupidity and genius is that genius has its limits." (Einstein)
  • sarahksarahk Registered Users Posts: 110 Major grins
    edited August 6, 2013
    Adding my vote -- we need more options for configuring captions because not every gallery uses captions the same way.
  • StueveShotsStueveShots Registered Users Posts: 544 Major grins
    edited August 6, 2013
    sarahk wrote: »
    Adding my vote -- we need more options for configuring captions because not every gallery uses captions the same way.

    +1 to this...
  • BrodyBrody Registered Users Posts: 252 Major grins
    edited August 7, 2013
    Allen wrote: »
    Add a CSS box "all galleries". This will center the captions.
    #sm-gallery .sm-tile-info {
      max-width: none;
      text-align: center;
    }
    

    Allen kindly provided the code to center the captions below the photos in the gallery view, but I can't figure out how to stick the code in there. In my Favorites gallery I clicked Customize > Customize site > highlighted All Galleries > Clicked HTML & CSS > hit the + sign next to HTML & CSS, and then sat here cluelessly dragging little boxes around the screen... Should be very simple.

    Is there a kind soul out there who can clue me in as to the next steps or tell me that I'm not even on the right track at all?

    Thanks, John
    Travel & Landscape Favorites at JohnBrody.com / Facebook / Blog / JohnBrodyPhotography.com
    ________________________________________________________________________________________________
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 7, 2013
    Brody wrote: »
    Allen kindly provided the code to center the captions below the photos in the gallery view, but I can't figure out how to stick the code in there. In my Favorites gallery I clicked Customize > Customize site > highlighted All Galleries > Clicked HTML & CSS > hit the + sign next to HTML & CSS, and then sat here cluelessly dragging little boxes around the screen... Should be very simple.

    Is there a kind soul out there who can clue me in as to the next steps or tell me that I'm not even on the right track at all?

    Thanks, John
    On any page click customize > customize site
    Click "entire site" in fold out drawer
    Look for "CSS APP PLACEHOLDER" on page.
    If none, make sure "entire site" is selected and go "ADD CONTENT BLOCKS" at the bottom,
    click HTML & CSS and drag a CSS block out to page.
    This is where site wide CSS would go. Paste that CSS in the box.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • BrodyBrody Registered Users Posts: 252 Major grins
    edited August 7, 2013
    Allen wrote: »
    Add a CSS box "all galleries". This will center the captions.
    #sm-gallery .sm-tile-info {
      max-width: none;
      text-align: center;
    }
    
    Allen wrote: »
    On any page click customize > customize site
    Click "entire site" in fold out drawer
    Look for "CSS APP PLACEHOLDER" on page.
    If none, make sure "entire site" is selected and go "ADD CONTENT BLOCKS" at the bottom,
    click HTML & CSS and drag a CSS block out to page.
    This is where site wide CSS would go. Paste that CSS in the box.

    :ivar Thank you Hugely Allen - After 8 days of Mind-Numbing frustration, something actually works :ivar

    At the risk of seeming like I'm looking a gift horse in the mouth, can I ask if there's any way to move the Keywords down away from the Description a few inches and make theKW font smaller? As is comes standard, the mass of keywords fully overpower the description - It's my photo album and I still have to kind of look twice to see that there's a caption hovering above the mass of keywords.

    Thanks again, John
    Travel & Landscape Favorites at JohnBrody.com / Facebook / Blog / JohnBrodyPhotography.com
    ________________________________________________________________________________________________
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 7, 2013
    Brody wrote: »
    :ivar Thank you Hugely Allen - After 8 days of Mind-Numbing frustration, something actually works :ivar

    At the risk of seeming like I'm looking a gift horse in the mouth, can I ask if there's any way to move the Keywords down away from the Description a few inches and make theKW font smaller? As is comes standard, the mass of keywords fully overpower the description - It's my photo album and I still have to kind of look twice to see that there's a caption hovering above the mass of keywords.

    Thanks again, John
    See if adding this to "all galleries CSS works.
    .sm-tile-keywords {padding-top: 40px; font-size: 80%;}
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • BrodyBrody Registered Users Posts: 252 Major grins
    edited August 7, 2013
    Allen wrote: »
    See if adding this to "all galleries CSS works.
    .sm-tile-keywords {padding-top: 40px; font-size: 80%;}
    

    clap.gif Another Bullseye !!! clap.gif

    It worked perfectly! I just added it to the box I created before - I changed the Padding to 400 and shoved it way down the page so the keywords are there, just shoved out of the visual when people go through the photos - I'll find an optimal placement point down the road a bit.

    I'll ask another, and while I feel a bit selfish, I've seen a lot of other people banging around the forum with these same questions, so others will benefit...

    Another problem is in what I think they call the Lightbox, the single photo screen you get when you click on an image in gallery mode... Others are looking to center that Description as well, and in addition, keep it from fading away unless viewers hover with their mouse. That definitely kills the story-telling concept of a photo gallery.

    Thanks again !!! . . . . . Onward now to try to find a non-fullscreen slideshow.

    John

    .
    Travel & Landscape Favorites at JohnBrody.com / Facebook / Blog / JohnBrodyPhotography.com
    ________________________________________________________________________________________________
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 7, 2013
    Brody wrote: »
    clap.gif Another Bullseye !!! clap.gif

    It worked perfectly! I just added it to the box I created before - I changed the Padding to 400 and shoved it way down the page so the keywords are there, just shoved out of the visual when people go through the photos - I'll find an optimal placement point down the road a bit.

    I'll ask another, and while I feel a bit selfish, I've seen a lot of other people banging around the forum with these same questions, so others will benefit...

    Another problem is in what I think they call the Lightbox, the single photo screen you get when you click on an image in gallery mode... Others are looking to center that Description as well, and in addition, keep it from fading away unless viewers hover with their mouse. That definitely kills the story-telling concept of a photo gallery.

    Thanks again !!! . . . . . Onward now to try to find a non-fullscreen slideshow.

    John

    .
    Try this

    .sm-lightbox-info {text-align:center;}
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • BrodyBrody Registered Users Posts: 252 Major grins
    edited August 7, 2013
    Allen wrote: »
    Try this

    .sm-lightbox-info {text-align:center;}


    Looking MUCH better - The Gallery Fix you gave me made it dead Center.

    Thanks, John
    Travel & Landscape Favorites at JohnBrody.com / Facebook / Blog / JohnBrodyPhotography.com
    ________________________________________________________________________________________________
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited August 7, 2013
    Brody wrote: »
    Looking MUCH better - The Gallery Fix you gave me made it dead Center. The Lightbox version is a bit left of center, but it seems semi-oblvious (given my rusty coding skills) that your fix is being shoved to the left by what I assume are space eating button boxes on the right of the same horizontal axis as your fix line - not sure if that can be allowed for.

    Since I haven't "Unveiled", here are Screen Capture files of the results of your fixes for you and other Smuggers to see..

    Ignore my extra site name on the bottom of the image - that's just my auto-watermark...



    Your fix on the Gallery Page:





    Your fix on the Lightbox Page:



    Wondering if that's as you expected.

    Thanks again, John


    .
    I can not see the lightbox caption in your screen shot let alone the caption transparent
    background. But I tried width:100% for the caption and it didn't work.

    Whatever is blocking the caption from going full width, I had the same problem with two gallery
    descriptions and the slideshow and buy buttons. I moved the two buttons down and made the
    description 100% width. That worked.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • BrodyBrody Registered Users Posts: 252 Major grins
    edited August 7, 2013
    Allen wrote: »
    I can not see the lightbox caption in your screen shot let alone the caption transparent
    background. But I tried width:100% for the caption and it didn't work.

    Whatever is blocking the caption from going full width, I had the same problem with two gallery
    descriptions and the slideshow and buy buttons. I moved the two buttons down and made the
    description 100% width. That worked.


    Puzzled as to why you can't see the description lines... Can you see the image at all? The captions are going to be very small, the screen is a 27' and on the post the JPGs are about 8 inches wide so the descriptions are miniature.

    Here's a link to to each of the screen captures:

    http://www.johnbrody.com/Travel/Favorites/2271721_MWq3LQ#!i=2685221078&k=VdKkqwz

    http://www.johnbrody.com/Travel/Favorites/2271721_MWq3LQ#!i=2685221172&k=WKfsgs3

    Let me know if you still can't see them and I'll make a new gallery and post them at their 2560x1440 screen capture size.


    John


    .
    Travel & Landscape Favorites at JohnBrody.com / Facebook / Blog / JohnBrodyPhotography.com
    ________________________________________________________________________________________________
  • GaryBakkerGaryBakker Registered Users Posts: 266 Major grins
    edited August 7, 2013
    Brody wrote: »
    Let me know if you still can't see them and I'll make a new gallery and post them at their 2560x1440 screen capture size.

    For what it's worth, I can see the lightbox caption. It is small and easy to overlook.
    SmugMug site => The Bakker Chautauqua
    "The difference between stupidity and genius is that genius has its limits." (Einstein)
  • pbandjpbandj Registered Users Posts: 237 Major grins
    edited August 28, 2013
    Bumping this 'cause I'm wondering if anyone has entered/seen it in the feedback forum (http://feedback.smugmug.com/forums/17723-smugmug/filters/new). I waded through a bunch of pages and did a search but I didn't find it...

    I think the OP summarized the request nicely in the initial post.
  • SandysmugSandysmug Registered Users Posts: 1 Beginner grinner
    edited August 28, 2013
    Help
    Allen wrote: »
    Add a CSS box "all galleries". This will center the captions.
    #sm-gallery .sm-tile-info {
      max-width: none;
      text-align: center;
    }
    

    I haven't a clue what you are talking about but what you are suggesting is exactly what I want. I'm an old luddite and all I want is captions to hug below bottom L/H of my image
    I've tried copy and pasting the above into the HTML CSS for all galleries it doesn't seem to work. What advice do you have.
    Thanks Martin
  • SEToienSEToien Registered Users Posts: 3 Beginner grinner
    edited September 8, 2013
    Thanks a lot for the tip
    Allen wrote: »
    Add a CSS box "all galleries". This will center the captions.
    #sm-gallery .sm-tile-info {
      max-width: none;
      text-align: center;
    }
    

    Thank you for this quick solution - the captions now stand out much better!

    Hopefully, SmuMug will respond to your point of being able to define captions in slideshows too...

    Best Regards,
    Svein Erik
  • AncistrusAncistrus Registered Users Posts: 1 Beginner grinner
    edited November 7, 2013
    Thanks for this thread... the non-centered captions was the last global problem I had to solve before unveiling my new site.
Sign In or Register to comment.