WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Slide caption below photo (11 posts)

  1. hirschid
    Member
    Posted 1 year ago #

    I've created a custom slideshow template and have my captions appearing. What I would like to know if it is possible to display to captions BELOW the photo rather than on top of it.

    Thanks for a great plugin!

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  3. hirschid
    Member
    Posted 1 year ago #

    Thanks for responding Josh. Here's the link:

    http://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.

  4. hirschid
    Member
    Posted 1 year ago #

    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.

  5. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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%;
    }
  6. hirschid
    Member
    Posted 1 year ago #

    Thank you, Josh. Very helpful!

  7. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    No problem!

  8. lukeratto
    Member
    Posted 10 months ago #

    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!

  9. Josh Leuze
    Member
    Plugin Author

    Posted 10 months ago #

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

  10. lukeratto
    Member
    Posted 10 months ago #

    I used the above suggestion in conjunction with the Custom Slideshow Template - http://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

  11. Josh Leuze
    Member
    Plugin Author

    Posted 10 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic