Meteor Slides
[resolved] Overlapping caption (8 posts)

  1. rsetonaknik
    Posted 3 years ago #

    Hi Josh,

    1. Failed to split captions -- Please have a look at pernakpernik.onlinelibrary.web.id. Captions in header are overlapped. Captions (title & description) are taken from image data.

    I put scripts carefully into their corresponding .css and .php files as suggested in the forum, reread and redo again, using main theme and child theme, with no success.

    2. You also proposed better get the 'Slide' title and its description for caption. Is script universal, where to put? If need to modify which part?

    3. How do you align more than 1 slideshows side by side next to each other?

    4. Create tranparent background for text/caption -- How do you create this .png file? (degree of transparency, dimension, etc.)

    5. Library of short code metadata for Meteor Slides -- is there a list of metadata available?

    Sorry for bothering you raising so many questions, Josh. Thank you.


  2. Josh Leuze
    Plugin Author

    Posted 3 years ago #

    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 1x1 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.

  3. rsetonaknik
    Posted 3 years ago #

    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, pernakpernik.onlinelibrary.web.id

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

  4. Josh Leuze
    Plugin Author

    Posted 3 years ago #

    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.

  5. rsetonaknik
    Posted 3 years ago #

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

  6. Josh Leuze
    Plugin Author

    Posted 3 years ago #

    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');
  7. rsetonaknik
    Posted 3 years ago #

    Thank you Josh,

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

  8. Josh Leuze
    Plugin Author

    Posted 3 years ago #

    No problem, I hope it helped!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic