Excessive Space between Image and Caption

James_F

Using SmugMug gallery style (which I prefer) I continue to be confounded by the problem of trying to lessen the space between the bottom of the image and the image caption. I've eliminated via CSS everything but the 'Info' icon and the image caption in an attempt to close the space. But that does not solve anything. Repeated inquiries last fall to SmugMug's so-called "Support Heroes (?) have yielded nothing. Moreover, suggestions to their design team are basically ignored. It's a shame that there's no easy fix as the captions are basically orphaned from the image they describe. I continue to try to fix the problem, but I am unsuccessful.

So, once again, I am looking to the collective wisdom of this group for assistance. Please examine any one of my galleries - for example: http://jamesfarrell.smugmug.com/Archive/Site-Pages/West-and-Southwest/Grand-Teton-National-Park/ - note the captions are basically "lost." in space. A web site visitor most likely will not even see the caption which I've worked hard to write as they tell the story behind the image. I've experimented with eliminating top margin, border and padding pixels of the image container (?) to close the space. At first glance it works on my 24 inch wide monitor, but if the browser window is resized (smaller) or one of my web site visitors who lack computer skills, the captions gets buried or hidden behind the image and they never see the caption.

Close examination of my SmugMug site will show that a small number of galleries have smaller images than other galleries. Thus, the space between the captions and those images will be more than what I'd like. That said, those images are being revised and enlarged to be consistent with everything else. So, disregard any small images as they don't represent the problem that I am trying to solve. My standard image size that I am trying to adhere to is 1800 x 1200 pixels.

I think the problem is the relationship and interaction between the image container and the caption container. Something invisible is in the way. But I am at a loss to solve this whole issue.

Smug Eric

Well you have the image bar that that if it's hidden can reduce some of that space.

http://photos.smugmug.com/photos/i-Rw4FCcN/0/M/i-Rw4FCcN-M.jpg

VS

http://photos.smugmug.com/photos/i-PWvXhWD/0/M/i-PWvXhWD-M.jpg

This added to a CSS content block should hide that:

.sm-gallery-smugmug .sm-gallery-image-bar {
display: none;
}

James_F

Excessive Space Between Image and Caption

Smug Eric wrote: »

Well you have the image bar that that if it's hidden can reduce some of that space.

http://photos.smugmug.com/photos/i-Rw4FCcN/0/M/i-Rw4FCcN-M.jpg

VS

http://photos.smugmug.com/photos/i-PWvXhWD/0/M/i-PWvXhWD-M.jpg

This added to a CSS content block should hide that:

.sm-gallery-smugmug .sm-gallery-image-bar {
display: none;
}

Eric: Thank you very much for responding to my inquiry. I've taken your advice and have hidden the "image bar". Candidly, I've never heard of the term "Image bar" before. I do know that the share, pagination and photo info links all live on the same horizontal level from left to right. I am a little disappointed that I have to hide the photo info icon (on the image bar?) in order to move the caption up some.

Your suggested CSS code did not help make the caption much more visible. It helped a little but needed some additional help. Thus, I added the following CSS for the following galleries:

/* Enlarge, move up, align text, text color and overlap image if needed */
.sm-gallery-smugmug .sm-tile-info {max-width:90%; text-align:justify; color:white; position:relative; top: -35px; left: 20px}

/* reduce top margin of image caption */
.sm-gallery-smugmug .sm-tile-info {margin-top: 0px; }

(end of CSS code)

I am no CSS code expert by far. I've only plagiarized some code from this forum. If there's a better way to do this then I'd like to hear it. I do acknowledge that in some cases where the browser window has been reduced in size that the caption overlaps the image on the bottom a little. After some experimentation and evaluation I've decided I can live with that since it's the lessor of two evils.

I cannot leave this issue alone without wondering why SmugMug makes the whole image, image bar, share and caption area so difficult for us users to customize and why it has to be kept a secret as to how the various items are laid out and formatted.

denisegoldberg

James_F wrote: »

...I added the following CSS for the following galleries:

/* Enlarge, move up, align text, text color and overlap image if needed */
.sm-gallery-smugmug .sm-tile-info {max-width:90%; text-align:justify; color:white; position:relative; top: -35px; left: 20px}

/* reduce top margin of image caption */
.sm-gallery-smugmug .sm-tile-info {margin-top: 0px; }

(end of CSS code)

.....I cannot leave this issue alone without wondering why SmugMug makes the whole image, image bar, share and caption area so difficult for us users to customize and why it has to be kept a secret as to how the various items are laid out and formatted.

Are you aware that the negative margin has placed the caption on top of the photos?

I would agree that hiding the info icon (and the bar it lives in) is a bit heavy handed. It's really a shame we can't position those easily, not through CSS but via a setting in the gallery style.

--- Denise

James_F

Overlapping Caption onto Image

denisegoldberg wrote: »

Are you aware that the negative margin has placed the caption on top of the photos?

I would agree that hiding the info icon (and the bar it lives in) is a bit heavy handed. It's really a shame we can't position those easily, not through CSS but via a setting in the gallery style.

--- Denise

Thanks for your feedback, Denise. I am aware that the image caption overlaps the image. How much depends upon how much one resizes their browser window. I keep playing with the settings, but nothing seems to help to REALLY solve the problem.

This issue really infuriates me. And it's impossible to get anyone at SmugMug to work to solve the problem, except for some help desk staff member to suggest things that don't really solve anything. No one at SmugMug takes responsibility for the buggy, shortcomings that we're struggling to deal with. Doesn't anyone at SmugMug understand how out of place the image captions appear, especially at default settings? We cannot call anyone; we cannot speak to anyone. All we can do it to live with the shortcomings like what I've outlined here. Or go find another photo hosting service which I'm sure in my case would please SmugMug to no end.

leftquark

James, your problem stems from what looks like some code you added that effects the caption area. You've moved it up 5 pixels, which is why it's overlapping the image slightly.

Here's the problem code:

.sm-gallery-smugmug .sm-tile-info {
  max-width: 90%;
  text-align: justify;
  color: #FFF;
  position: relative;
 [COLOR="Red"] top: -5px;[/COLOR]
  left: 20px;
}

That "top:-5px" moves it UP 5 pixels. If you changed it to something like: "top:20px;" it would move it down instead of up (so in your case, 25 pixels lower than it is right now). I set it to something like "top:5px" on your site and it works pretty well.

Also, I think it looks better if you set max-width to 100% and get rid of the left:20px.

James_F

Lengthen Time Text is Visible with Mouse Hover
I tried starting a new thread, but I cannot post. I get just the blank white screen: New SmugMug; New SmugMug Gallery Style: When you hover a mouse over a gallery image, the image caption text will appear wherever the mouse is located. It's visible only for a few seconds and then fades away. What I'd like to do is to lengthen the time the text (the caption) that appears with the mouse hover stay stays visible since some of my captions are lengthy. I am trying to make this adjustment since my captions are getting "lost" below the image. I've already posted about this recently, but there seems to be no way to fix this. So, in order to accommodate my web site visitors who lack computer skills to hunt around a page for information that may not at first be visible, I thought maybe lengthening the time that the text appears with the mouse over stays visible before it fades out will help someone have the time to read the whole caption.

leftquark

James,
Are you talking about in the Lightbox, the title and caption that are hidden on a photo? Or are you talking when in the normal SM Gallery view, and you put your mouse over the image, and the little "ALT Text" as it's called comes up? I've tested in both Firefox and Chrome and those caption's that pop-up over the photo stay up INDEFINITELY as long as you keep your mouse over the image. They never disappear until I move the mouse off the image.

Your captions look pretty good below the photo right now.

A couple thoughts:
- Your captions might not be so "hidden" if the Gallery Description was limited to 1 line. As it stands now, the gallery description is quite long and pushes the caption off the screen for me. I have to scroll down to see it's there, but if the gallery description was shorter I would see the caption down there.
- Have you thought about pinning your header to the top so it's always there? It's an option in your customizer under the "layout". You can "Pin" the "header" so it doesn't move even if the user scrolls.
- Do you use line-breaks in your captions? I see all your captions are squished together into 1 paragraph. I'm not sure if that's how you wrote them. I have some code to force the line breaks to show up, if that's how you've written them: http://www.aaronmphotography.com/Customizations/Gallery/Caption-Line-Breaks

Hope that helps.

James_F

Aaron: The text with the mouse hover that I am referring to is in normal SM Gallery view when a mouse is positioned over the gallery image. (I've hidden captions and titles in Lightbox.) I am using Mac OSX 10.9.2 with Safari 7.0.3. So, your comment that you see the ALT-text indefinitely with the mouse hover makes me wonder if this may be a browser software issue and not a SmugMug issue. I really don't know. Would still like them to be visible longer if possible if one is using Safari too.

In response to your thoughts above (feedback). Thank you. I agree that my gallery descriptions need not be so long. Perhaps I should incorporate any salient points into the image captions instead, which would have the effect of making the captions more noticeable.

I've not tried to pin the header or anything. I'll try it and see what happens. I am open to any and all suggestions. Keep 'em coming.

I've not use line breaks in the captions, but I should. Some of my image captions go on and on like the ramblings of E.E. Cummings.

leftquark

Unfortunately the ALT and TITLE texts cannot be altered