Support » Plugin: Meteor Slides » metabox to add class to slide

  • Resolved Marklcm

    (@marklcm)


    I’m trying to add a metabox to the slide admin screen following a post
    https://www.smashingmagazine.com/2011/10/create-custom-post-meta-boxes-wordpress

    My idea is to add a class to each slide, so that I can show / hide the title and caption as needed. I’m using the skin you provided to display the caption and title, but it is global.

    I have the box displaying on the new slide admin screen, but the class added is not saving to the slide.
    This is the code. I got a bit lost in the save section at the bottom. Maybe elsewhere as well.

    /* Fire our meta box setup function on the post editor screen. */
    add_action( 'load-post.php', 'gwl_post_meta_boxes_setup' );
    add_action( 'load-post-new.php', 'gwl_post_meta_boxes_setup' );
    
    /* Meta box setup function. */
    function gwl_post_meta_boxes_setup() {
    
    /* Add meta boxes on the 'add_meta_boxes' hook. */
      add_action( 'add_meta_boxes', 'gwl_add_post_meta_boxes' );
    
    /* Save post meta on the 'save_post' hook. */
      add_action( 'save_post', 'gwl_save_post_class_meta', 10, 2 );
    }
    
    /* Create one or more meta boxes to be displayed on the post editor screen. */
    function gwl_add_post_meta_boxes() {
    
      add_meta_box(
        'gwl-post-class',                           // Unique ID
        esc_html__( 'Slide Class', 'example' ),     // Title
        'gwl_post_class_meta_box',                  // Callback function
        'slide',                                    // Admin page (or post type)
        'side',                                     // Context
        'default'                                   // Priority
      );
    }
    
    /* Display the post meta box. */
    function gwl_post_class_meta_box( $object, $box ) { ?>
    
      <?php wp_nonce_field( basename( __FILE__ ), 'gwl_post_class_nonce' ); ?>
    
      <p>
        <label for="gwl-post-class"><?php _e( "Add a custom CSS class, which will be applied to WordPress' slide class.", 'example' ); ?></label>
        <br />
        <input class="widefat" type="text" name="gwl-post-class" id="gwl-post-class" value="<?php echo esc_attr( get_post_meta( $object->ID, 'gwl_post_class', true ) ); ?>" size="30" />
      </p>
    <?php }
    
    /* Save the meta box's post metadata. */
    function gwl_save_post_class_meta( $post_id, $slide ) {
    
      /* Verify the nonce before proceeding. */
      if ( !isset( $_POST['gwl_post_class_nonce'] ) || !wp_verify_nonce( $_POST['gwl_post_class_nonce'], basename( __FILE__ ) ) )
        return $post_id;
    
      /* Get the post type object. */
      $post_type = get_post_type_object( $post->slide );
    
      /* Check if the current user has permission to edit the post. */
      if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
        return $post_id;
    
      /* Get the posted data and sanitize it for use as an HTML class. */
      $new_meta_value = ( isset( $_POST['gwl-post-class'] ) ? sanitize_html_class( $_POST['gwl-post-class'] ) : '' );
    
      /* Get the meta key. */
      $meta_key = 'gwl_post_class';
    
      /* Get the meta value of the custom field key. */
      $meta_value = get_post_meta( $post_id, $meta_key, true );
    
      /* If a new meta value was added and there was no previous value, add it. */
      if ( $new_meta_value && '' == $meta_value )
        add_post_meta( $post_id, $meta_key, $new_meta_value, true );
    
      /* If the new meta value does not match the old value, update it. */
      elseif ( $new_meta_value && $new_meta_value != $meta_value )
        update_post_meta( $post_id, $meta_key, $new_meta_value );
    
      /* If there is no new meta value but an old value exists, delete it. */
      elseif ( '' == $new_meta_value && $meta_value )
        delete_post_meta( $post_id, $meta_key, $meta_value );
    }
    
    /* Filter the post class hook with our custom post class function. */
    add_filter( 'post_class', 'gwl_post_class' );
    
    function gwl_post_class( $classes ) {
    
      /* Get the current post ID. */
      $post_id = get_the_ID();
    
      /* If we have a post ID, proceed. */
      if ( !empty( $post_id ) ) {
    
        /* Get the custom post class. */
        $post_class = get_post_meta( $post_id, 'gwl_post_class', true );
    
        /* If a post class was input, sanitize it and add it to the post class array. */
        if ( !empty( $post_class ) )
          $classes[] = sanitize_html_class( $post_class );
      }
    
      return $classes;
    }

    https://wordpress.org/plugins/meteor-slides/

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

    (@jleuze)

    Hi, how exactly do you want the slideshows to work? Is the goal to have a slideshow in which some of the slides have captions and others don’t? Or do you want multiple slideshows, with one having captions and the rest not?

    multiple slideshows, and be able to choose whether or not to have a caption per slideshow, is the goal.
    Thinking about it since, being able to choose which template, (as in the add new page screen, where, if there is more than on template, you can choose which template in the Page Attribute metabox) would achieve this.

    Although I can’t see a case when one would want to have some of the slides to have captions and others not, within the one slideshow, I guess the method I was trying to implement could also achieve both.

    Plugin Author Josh Leuze

    (@jleuze)

    OK, that makes sense. I will often have a situation where I will need the homepage slideshow different than all the other slideshows, maybe the home slideshow has captions and the rest don’t. In that case I would use a conditional in the slideshow template file that checks the slideshow that is being loaded.

    If you need more flexibility, one simple way to do this would be to create a parent slideshow, like “Captions”, and add a conditional that checks the parent of the slideshow, if it’s a child of the “Captions” slideshow, captions are loaded.

    But if you do want a UI with an option to add captions like that custom metabox, I would suggest adding it to the slideshow admin rather than the slide post admin. Then you can turn it on and off for the whole slideshow at once, would make it easier to use if that is how you want it to work, rather an on a per-slide basis.

    As for actually creating the custom metabox and getting it to work properly, I’ve found this can be a real headache! A simple text field isn’t so bad, and you can find an example for this in Meteor Slides with the meteorslides_create_url_meta_box function and so on that you could adapt to a checkbox.

    But unless you have a lot of time or a big budget and really need it to be custom, I would use a plugin like Advanced Custom Fields. It will make the job way easier and faster, I use it a lot to extend Meteor Slides if I want to add more options for captions and other slide content.

    As for actually creating the custom metabox and getting it to work properly, I've found this can be a real headache!

    have to agree, now, after a bit of wasted time,

    and add a conditional that checks the parent of the slideshow, if it's a child of the "Captions" slideshow, captions are loaded.

    and each time I try this I’m getting an error spat back. Could you show an example code.

    Plugin Author Josh Leuze

    (@jleuze)

    Here you go, this should work for any slideshow that are direct children of the “Captions” slideshow:

    <?php // Load captions for slideshows that are children of the "Captions" slideshow
    $slideshow_term   = get_term_by( 'slug', $slideshow, 'slideshow' ); // Get slideshow term
    $slideshow_parent = get_term( $slideshow_term->parent, 'slideshow' ); // Get slideshow parent term
    // Check for captions parent
    if ( $slideshow_parent->slug == 'captions' ) {
    	// Load captions
    	echo 'h4' . get_the_title() . '</h4>';
    } ?>

    I have added this to functions.php
    I have a slideshow named “page-1-header” which is called in a template tag in header.php with a conditional which only loads it on the front page.
    “page-1-header” is a child of the slideshow “Captions” & both display captions.
    A slideshow “test” is on a separate page, which is not a child.
    The slideshow “test” still shows the captions.

    Also,the slideshow “Captions” is on another page. The trouble there is that it plays, and then the slideshow “page-1-header”, the child, plays in the same spot following “Captions”.

    I havn’t set a slideshow as a child before so don’t know if this is expected behavior, but it is not caused by the addition of your code as I have tested with and without, with the same result.

    Plugin Author Josh Leuze

    (@jleuze)

    Sorry, this doesn’t go in functions.php, it goes on your custom slideshow template. Instead of adding the captions directly, you add this code so that it loads the captions conditionally. You will have to update the captions code on that conditional with the captions code that you want. Remember there are conditionals for links in that file, so make sure you put this code outside of that if you want it to show up on linked and on-linked slides.

    I wouldn’t use the parent Captions slideshow directly, as that would load slides from all the children I think. You should just use that slideshow to group all the children slideshows that you want to display captions, and load those child slideshows on the site.

    Also, make sure you are using the slideshow slug in the slideshow function, like “captions”, not the name like “Captions”.

    Thanks Josh
    that works.
    sorry about needing the hand holding.
    I had tried it in my custom slideshow template, but had only pasted it at the bottom instead of reading it, thinking about what it does and replacing

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

    with the code you provided. The h4 in your code needs <h4> in the echo line.
    It still tricked me a bit, as the ‘non child’ slideshow was still showing a single line of the caption background color. It was the padding on the meteor caption div. I removed this and put padding on the individual h4 and p elements instead.

    I’m just off to share a cuppa
    thanks

    For anybody coming across this I ended up with the following,which allows multiple slideshows, and be able to choose whether or not to have a caption per slideshow.

    <div class="meteor-caption">
    <?php // Load captions for slideshows that are children of the "Captions" slideshow
    
    $slideshow_term   = get_term_by( 'slug', $slideshow, 'slideshow' ); // Get slideshow term
    $slideshow_parent = get_term( $slideshow_term->parent, 'slideshow' ); // Get slideshow parent term
    // Check for captions parent
    if ( $slideshow_parent->slug == 'captions' ) {// Load captions
    echo '<h4>' . get_the_title() . '</h4>';
    echo '<p>' . get_the_excerpt() . '</p>';
    } ?>
    </div>

    above the line </div><!-- .mslide --> in meteor-slideshow.php (in child theme folder)
    and the following in meteor-slides.css (in child theme folder)

    /* Captions
    -------------------------------------------------------------- */
    
    .meteor-caption {
        background: rgba(0,0,0,0.2);
        bottom: 0;
        line-height: 20px;
        margin: 0;
        position: absolute;
        width: 100%;
    }
    
     .meteor-slides p {
        text-shadow: 1px 1px 1px #000;
        width: 96%;
        color: #fff;
        margin: 0;
        padding: 0 1% 1%;
    }
     .meteor-slides h4{
        text-shadow: 1px 1px 1px #000;
        width: 96%;
        color: #fff!important;
        margin: 0!important;
        padding: 1% 1% 0;
    }
    
    /**
    -----------------------------------------------------------------------------
    -----------------------------------------------------------------------------
     * Media Queries
     - < 440px
     */
     @media screen and (max-width:27.5em){
     	.meteor-caption {
        line-height: 15px;
    }
    	.meteor-slides h4{
    		width: 86%;
    	}
    	.meteor-slides p{
    		width: 86%;
    	}
    
    }

    Plugin Author Josh Leuze

    (@jleuze)

    You’re welcome, thanks for the cuppa!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘metabox to add class to slide’ is closed to new replies.