how to expand the photo caption with the journal style gallery

Pickled Photons · August 18, 2013

Another question I have is how can we expand the photo caption in the journal gallery so that it goes across the entire length of the photo?

I attached what I mean here. I tried different templates but the photo caption does not go all the way across like the old smugmug.

I have this for the css

.sm-user-ui .sm-gallery-journal .sm-tile-info {
max-width: 1200px;
text-align:justify;

}

I tired .sm-tile-caption , also no go.
And it is not because of the the text-align:justify in the css. I tried taking that out and still the caption doesn't go across.

J Allen · August 18, 2013

Pickled Photons wrote: »

Another question I have is how can we expand the photo caption in the journal gallery so that it goes across the entire length of the photo?

I attached what I mean here. I tried different templates but the photo caption does not go all the way across like the old smugmug.

I have this for the css

.sm-user-ui .sm-gallery-journal .sm-tile-info {
max-width: 1200px;
text-align:justify;

}

I tired .sm-tile-caption , also no go.
And it is not because of the the text-align:justify in the css. I tried taking that out and still the caption doesn't go across.

Try this:

.sm-gallery-journal .sm-gallery-images 
.sm-tile > .sm-tile-info > p {max-width: 1200px !important}

Pickled Photons · August 18, 2013

Allen

That works! Thank!!

James_F · August 19, 2013

Follow Up Question to J Allen ...

J Allen wrote: »

Try this:

.sm-gallery-journal .sm-gallery-images 
.sm-tile > .sm-tile-info > p {max-width: 1200px !important}

J Allen: Wow. I've been trying to figure out how to do this for weeks. Is there also a way to close up the margin space below the image and the caption. I'd also like to move the page number and photo info icon out of the way so that my captions (some are long) would be more visible without scrolling down each time one wanted to read an image caption.

James_F · August 19, 2013

Pickled Photons wrote: »

Another question I have is how can we expand the photo caption in the journal gallery so that it goes across the entire length of the photo?

I attached what I mean here. I tried different templates but the photo caption does not go all the way across like the old smugmug.

I have this for the css

.sm-user-ui .sm-gallery-journal .sm-tile-info {
max-width: 1200px;
text-align:justify;

}

I tired .sm-tile-caption , also no go.
And it is not because of the the text-align:justify in the css. I tried taking that out and still the caption doesn't go across.

To Pickled Photons: Referring to you screen snapshot of your caption below the image, how did you manage to move the page numbers and other icons out of the way below the image and also to reduce the margin/empty space below the image?

J Allen · August 19, 2013

James_F wrote: »

J Allen: Wow. I've been trying to figure out how to do this for weeks. Is there also a way to close up the margin space below the image and the caption. I'd also like to move the page number and photo info icon out of the way so that my captions (some are long) would be more visible without scrolling down each time one wanted to read an image caption.

Got a link to a specific gallery so I can see an example.

Pickled Photons · August 19, 2013

James_F wrote: »

To Pickled Photons: Referring to you screen snapshot of your caption below the image, how did you manage to move the page numbers and other icons out of the way below the image and also to reduce the margin/empty space below the image?

I don't know.

What template are you using? I am using Shadow and then the journal type gallery. Perhaps you used the Smugmug type gallery?

Besides what Allen showed to expand the photo caption, the only other css I have for the journal gallery is the below to hide the share button since I don't like that using the share button, the system can give you a direct link to the photo to enable download. I am just doing this for fun but still..

.sm-gallery-journal .sm-button-image-share {
display: none;
}

James_F · August 19, 2013

J Allen wrote: »

Got a link to a specific gallery so I can see an example.

Hi Joe: See this, for example - http://jamesfarrell.smugmug.com/Site-Pages/The-West-and-Southwest-Parks/GrandTetonNP

PLEASE NOTE: The gallery style is SmugMug, not journal. So the code you offered earlier in this thread would be different. I want to lose the share link (only visible when I am logged in). And I want to move the image page number(s) out of the way someplace. Basically want to economize the space below the image.

Full disclosure: I know NOTHING about CSS coding, but I
d like to find a guide to learn. I'll just copy and paste what others have done. But one fundamental question I have since I've not tried any coding - if I paste something in the CSS app box, will that coding be always visible (in site customization mode of course) if I want to change, delete or add something more?

James_F · August 19, 2013

Pickled Photons wrote: »

I don't know.

What template are you using? I am using Shadow and then the journal type gallery. Perhaps you used the Smugmug type gallery?

Besides what Allen showed to expand the photo caption, the only other css I have for the journal gallery is the below to hide the share button since I don't like that using the share button, the system can give you a direct link to the photo to enable download. I am just doing this for fun but still..

.sm-gallery-journal .sm-button-image-share {
display: none;
}

I'm using SmugMug gallery style and a customized SmugMug design

raebrown · August 19, 2013

James_F wrote: »

To Pickled Photons: Referring to you screen snapshot of your caption below the image, how did you manage to move the page numbers and other icons out of the way below the image and also to reduce the margin/empty space below the image?

This might help with the page numbers under the photo:
http://www.smugocity.com/CSS/Navigation/Image-Pagination

James_F · August 19, 2013

raebrown wrote: »

This might help with the page numbers under the photo:
http://www.smugocity.com/CSS/Navigation/Image-Pagination

I don't want to REMOVE it; I only want to reposition it.

bazancik · September 4, 2013

Hi,

not sure if anyone still checks this gallery, but...
trying to center captions under photos in journal gallery - but no luck. The above code did not work -- managed to get the text centred and bigger in lightbox - but not for journal gallery: any ideas what might work?

much appreciated!

BirdsnStuff · May 13, 2014

Hi there, I followed the advice here and it seemed to work great. However, I checked my journal-style galleries today and all the formatting on the caption boxes has reverted back (even though the CSS is still in place). Any ideas why, please?
Thanks

Smug Eric · May 13, 2014

Got a link?

BirdsnStuff · May 15, 2014

Smug Eric wrote: »

Got a link?

This is one of the journal-style galleries

http://sun-flower.smugmug.com/WaxwingsandDippers/Black-bellied-Dipper/

Many thanks

Smug Eric · May 15, 2014

I can't be sure as to why, but I'm not seeing that code showing as being called at all in your site's customization.

BirdsnStuff · May 16, 2014

Here's a screen shot of the page when in customisation mode. The CSS block has the code for that page but, I guess, isn't working. Any idea why ;-)?
Thanks.

BirdsnStuff · May 22, 2014

Just folioing up and wondered if anyone had an idea why the CSS code on this page (and others) isn't working, please? (http://sun-flower.smugmug.com/WaxwingsandDippers/Black-bellied-Dipper/)
Thank you.

Smug Eric · May 22, 2014

I still don't know why that does isn't working properly. But try this instead:

.sm-tiles-info-after .sm-tile-info p, .sm-gallery-journal .sm-journal-inlineedit {
max-width: 1200px !important;
}

BirdsnStuff · May 23, 2014

Smug Eric wrote: »

I still don't know why that does isn't working properly. But try this instead:

.sm-tiles-info-after .sm-tile-info p, .sm-gallery-journal .sm-journal-inlineedit {
max-width: 1200px !important;
}

Thank you Eric. That seems to have done the trick. I'll go ahead and replace the CSS in all the other journal galleries now

I appreciate you getting back to me.

how to expand the photo caption with the journal style gallery

Comments