Improved caption display

HamsterHuey

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

Allen

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

Jtring

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

Allen

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;
}

Jtring

Many, many thanks, Allen! That addresses both the centering and the wrap problem. -- Jim Ringland

pbandj

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.

pbandj

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)

LPC

Thank you Allen

Brody

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

Allen

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.

GaryBakker

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.

sarahk

Adding my vote -- we need more options for configuring captions because not every gallery uses captions the same way.

StueveShots

sarahk wrote: »

Adding my vote -- we need more options for configuring captions because not every gallery uses captions the same way.

+1 to this...

Brody

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

Allen

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.

Brody

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

Allen

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%;}

Brody

Allen wrote: »

See if adding this to "all galleries CSS works.

.sm-tile-keywords {padding-top: 40px; font-size: 80%;}

Another Bullseye !!!

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

.

Allen

Brody wrote: »

Another Bullseye !!!

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;}

Brody

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

Allen

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.

Brody

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


.

GaryBakker

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.

pbandj

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.

Sandysmug

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

SEToien

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

Ancistrus

Thanks for this thread... the non-centered captions was the last global problem I had to solve before unveiling my new site.