WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Add featured image caption to each slide (8 posts)

  1. Opally
    Member
    Posted 1 year ago #

    For people who want to show the caption instead of the title, you can use this function in your theme:

    function the_post_thumbnail_caption() {
         global $post;
    
         $thumbnail_id    = get_post_thumbnail_id($post->ID);
         $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
    
         if ($thumbnail_image && isset($thumbnail_image[0])) {
             echo '<span>'.$thumbnail_image[0]->post_excerpt.'</span>';
         }
    }

    Usage -

    the_post_thumbnail_caption();

    and add line height to the suggested custom template CSS:

    .meteor-slides p {
        line-height: 1.2;
    }

    because the default line-height: 0 causes long captions to wrap over themselves.

    The function is from this discussion:
    http://wordpress.org/support/topic/display-caption-with-the_post_thumbnail

    I also got rid of the span tag echo.

    Now, if I can do the jquery to make the caption slide up and down, as it does on the old s3slider.js, I'd be thrilled! Any suggestions out there?

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

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Opally, thanks for sharing! And thanks for pointing out that issue with the line-height, I have been meaning to add that to that to the caption example in the documentation.

    I haven't done an animated caption exactly like that, but I have done one that slides in from the side, here's something for the stylesheet that should get you pretty close:

    .meteor-slides p {
        background: rgba(0,0,0,0.2);
        bottom: -40px;
        color: #000;
        height: 40px
        left: 0;
        line-height: 20px;
        margin: 0;
        padding: 2%;
        position: absolute;
        text-align: center;
        width: 96%;
    }

    And this in a custom slideshow script:

    before: function () {
    	$j('.meteor-slides p').css('bottom', -60);
    	$j('.meteor-slides p').animate({bottom:0}, 1500);
    }

    That would go at the end of the cycle options, just like the pagerAnchorBuilder option in the example.

  3. Opally
    Member
    Posted 1 year ago #

    Thank you for the awesome fast reply!

    You've give me a great start! It works as you say.

    The issue I now see is that the caption starts sliding up as the next slide is sliding in. Ideally there would be a delay on the slideup, or rather, animate. You'd see the image for a second or two, and then the caption would slide up.
    Do you happen to remember how to do a timed delay in jquery?

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    I'm not sure off the top of my head. When I used this on a project I had a bit of a delay on the captions, but what I did was put them -600px off the slideshow, so they start animating right when the slide transitions. but it doesn't come on screen for a bit.

  5. Opally
    Member
    Posted 1 year ago #

    hey, if you've set 10 seconds per slide in settings, this works pretty nice:

    before: function () {
                $j('.meteor-slides p').css('bottom', -60).delay(3000);
                $j('.meteor-slides p').animate({bottom:0}, 1500).delay(5000);
                $j('.meteor-slides p').animate({bottom:-60}, 1500);
            }

    Longer slide transitions will need this to be tweaked.

    thank you for your help!!

  6. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    No problem, I'll have to try using animated captions more often!

  7. Opally
    Member
    Posted 1 year ago #

    ... and instead of adding more animation options to the slide interface, this would work for typical settings;

    add these settings to the slideshow options in slideshow.js:

    var $captiondelay    = $slidespeed + 1000;
    var $captionduration = $slidetimeout - ($slidespeed*2);

    and change the animation function to use those variables for delays:

    before: function () {
           $j('.meteor-slides p').css('bottom', -60).delay($captiondelay);
           $j('.meteor-slides p').animate({bottom:0}, 1500).delay($captionduration);
           $j('.meteor-slides p').animate({bottom:-60}, 1500);
    }

    this way, you don't have the fragility of hard-coding delays that might not work with someone's option settings. Well, it's still fragile, but only at the extremes.

  8. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    Cool, I'll give that a try.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic