Support » Plugin: Meteor Slides » [Plugin: Meteor Slides] Overlapping caption

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


    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();?>

    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.

    Hi Josh,

    I followed your advice step-by-step and had a very great great learning experience. Your answers encouraged me to think and explore further. Here are the results, not sure whether it is rightly done.

    Advice #1 and #2.1 are not used, has no significant effect.

    Advice #2.2 and #2.3 (and code put in the header.php, of course) are keys to show the captions (title, excerpt) up. Make a copy of #2.3 for excerpt and add an extra ‘p’ as prefix like this, ‘.meteor-caption p{‘.

    It worked well except the ‘Continue reading’ (link) in excerpt also shows up. Disable this code (line 364-370) in functions.php solves the problem.

    Advice #3 and #5 pending; advice #4 since I don’t know Photoshop I replace the background with this simple code:

    background: rgba(0,0,0,0.5);

    Doing all these I am happy the goal has been sucessfully accomplished,

    I documented the experiment and share it with my readers. I am sure there must be mistakes. Please do me a favor which part did I do wrong by ignoring the codes proposed and adding my own (intuitive) codes, and possibly the negative effects they may caused.

    Thank you again ‘guru’ Josh.
    5★ for Meteor Slide, 5★ for documentation, 5★ for 1-on-1 excellent support, 5★ for you, and 5★ for me (may I? for getting smarter).

    Plugin Author Josh Leuze


    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.

    Hi Josh,

    What code for the conditional check? Seems I have to put the code in the header.php only, not in meteor-slide.php or meteor-slideshow.php… (hope you enjoy the coffee sent last week, why not take a break and have the real Java coffee in my country?)

    Plugin Author Josh Leuze


    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');

    Thank you Josh,

    Give me a try and will let you know soon whether I pass the exam…

    Plugin Author Josh Leuze


    No problem, I hope it helped!

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