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

Resolved Opally
(@opally)

11 years, 2 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:
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/

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Josh Leuze
(@jleuze)

11 years, 2 months 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.
Thread Starter Opally
(@opally)

11 years, 2 months 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?

Plugin Author Josh Leuze
(@jleuze)

11 years, 2 months 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.
Thread Starter Opally
(@opally)

11 years, 2 months 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!!
Plugin Author Josh Leuze
(@jleuze)

11 years, 2 months ago

No problem, I’ll have to try using animated captions more often!
Thread Starter Opally
(@opally)

11 years, 2 months 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.
Plugin Author Josh Leuze
(@jleuze)

11 years, 2 months ago

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