Slide caption below photo

You’re welcome! Yes you can move around the captions by tweaking the CSS, can you post a link to the page you’re working on?

Thanks for responding Josh. Here’s the link:

https://davidhirschi.com/blog/fourths-fifths/

It is currently styled so caption appears over the image on hover, but the ideal would be for them to appear under the image. I tried various inline tweaks to the CSS from adjusting the height of the div .mslide and different combinations of the overflow and position properties without luck. The best I was able to achieve displayed a portion of the top line of the caption and the rest cut off.

I created a div for the captions nested within .mslide. Here’s the current code snippet:

<?php endif; ?>

				<div id="caption" style="background: rgba(0,0,0,0.2); bottom: 20px; color: #fff; left: 15%; margin: 0; padding-bottom: 2%; padding-top: 3%; position: absolute; text-align: center; width: 70%;">
					<p style="margin-bottom: 1.25em !important;"><?php the_field( "title-year" ); ?></p>
					<p style="margin-bottom: 1.25em !important;"><?php the_field( "materials" ); ?></p>
					<p style="margin-bottom: 1.25em !important;"><?php the_field( "dimensions" ); ?></p>
				</div>
			</div><!-- .mslide -->

Really appreciate your help on this as I think your plugin is brilliant in its simplicity and is easy to use for clients.

I got the caption to appear below the image. The captions were appearing on top of the image itself and truncated to the height of the image, even though the height of the slideshow was set to accommodate both image and caption, i.e. taller than the image itself.

By increasing the canvas size for the images in Photoshop using the website background color for the extra height, the captions now appear to be below the image, though actually they are still on top of the image. Seems a bit arbitrary, but it does work.

That’s a good idea! For future reference, you can make more room below the slideshow by adding some bottom padding like this:

div.meteor-slides {
clear: both;
height: auto !important;
line-height: 0;
margin: 0;
max-width: 100%;
overflow: visible !important;
padding: 0 0 100px 0;
position: relative;
z-index: 1;
}

Then you can move down the captions like this:

.meteor-slides div#caption {
position: relative;
bottom: -20px;
left: 20px;
}

You also have to disable the cropping of the slideshow:

.meteor-slides .meteor-clip {
line-height: 0;
margin: 0;
overflow: visible;
padding: 0;
position: relative;
width: 100%;
}

Thank you, Josh. Very helpful!

No problem!

great! thanks —

and to make all the slide titles visible at the same time? (and linkable to the defined URL?)

BTW – @josh, all this tech/support is pretty amazing. Thanks!

@lukeratto Did you add captions using a custom slideshow template?

I used the above suggestion in conjunction with the Custom Slideshow Template – https://www.endlessturns.com —

So yes, with your help, I was able to get the titles displaying, but I’d like to display ALL the titles in the slide show at once – and as the slides rotate, have the corridponding titles display a style change accordingly (like a or <underline>)

thanks again @JoshLeuze

So are these really captions that are part of the slides, or navigation that shows you what slide you are on? Check out the documentation on customizing the slideshow script, it shows how to use titles for the paged nav, I think that’s what you want.