[Plugin: Meteor Slides] Add featured image caption to each slide

  • Resolved Opally

    (@opally)


    11 years, 9 months 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:
    https://www.ads-software.com/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?

    https://www.ads-software.com/extend/plugins/meteor-slides/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Josh Leuze

    (@jleuze)

    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.

    Thread Starter Opally

    (@opally)

    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?

    Plugin Author Josh Leuze

    (@jleuze)

    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.

    Thread Starter Opally

    (@opally)

    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!!

    Plugin Author Josh Leuze

    (@jleuze)

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

    Thread Starter Opally

    (@opally)

    … 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.

    Plugin Author Josh Leuze

    (@jleuze)

    Cool, I’ll give that a try.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Plugin: Meteor Slides] Add featured image caption to each slide’ is closed to new replies.

Tags