[Plugin: Meteor Slides] Overlapping caption

1. you need to set a line height for the captions:

.meteor-slides p {
line-height: 20px;
}

2. You can use the slide image metadata, but it is harder to update. I like to use the slide title as the caption. Or if you need a title and except, add support for excepts to Meteor Slides by adding this to your theme’s functions.php file:

// Add excerpts to Meteor Slides
add_post_type_support('slide', 'excerpt');

Then you just need to output the title and excerpt in your custom slideshow template like this:

<div class="meteor-caption">
<h4><?php the_title(); ?></h4>
<?php the_excerpt();?>
</div>

And style it, maybe like this:

.meteor-caption {
    background: transparent url('images/title-bg.png') repeat top left;
    bottom: 0;
    left: 0;
    color: #000;
    line-height: 20px;
    margin: 0;
    padding: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}

3. You need to float the slideshows to the left:

div.meteor-slides {
float: left;
}

4. You can make it however you want, whatever works best with your slides and design. I created a 1×1 pixel image in Photoshop that was black, with a 50% opacity, and repeated that for the background.

5. You can use metadata to change any of the jQuery Cycle options.

Ha, thanks, I’m glad you learned something!

It can be tricky working with excerpts if your theme is customizing them, but removing those filters like you did works. You can also wrap those excerpt customizations in a conditional that checks the post type being used and doesn’t load if it is the slide post type.

Setting semi-transparent background with CSS totally works, I’m just doing it old school to support more browsers, but you could always fall back on an opaque background color to keep it fully CSS.

An extended coffee break sounds like a great idea!

The conditional check would go in your functions.php file or where ever the excerpt filter is.

Here’s a simple example that adds a read more link to only blog post excerpts:

function new_excerpt_more($more) {
	global $post;
	if ( 'post' == get_post_type() ) {
		return ' <a href="'. get_permalink($post->ID) . '">Read the Rest...</a>';
	}
}
add_filter('excerpt_more', 'new_excerpt_more');

No problem, I hope it helped!