1

I have added a checkbox to the featured image meta box when editing pages/posts which will (if checked) add a custom css class that is currently stored as a variable to the featured image html on the front end.

I need to write the conditionals to first check if the featured image is set, then check if the featured image has an extension of .svg or .svgz, if both of these are true, then display the checkbox option. Basically the checkbox only needs to be shown if the featured image has been set and is a vector.

Then I need to make sure the html output of the featured image the_post_thumbnail(); on the front end includes my custom class if the checkbox has been checked.

So far I have got the checkbox to show up and can save the value, but I am lost when it comes to the conditional display of said checkbox. I have tried the following (separately, I just listed them here):

if ( has_post_thumbnail() ) {
if ( ! empty( get_post_thumbnail_id() ) ) {
if ( ! empty( wp_get_attachment_image_src() ) ) {

This is what I have so far, the question marks are where I have been trying everything... (without the if else, the code works just fine):

function bodhi_svgs_featured_image_meta( $content ) {

    global $post;

    /**
     * check if featured image is set and if featured image has extension of .svg or .svgz
     */
    // This is where I needed to figure out the right conditionals.
    // if ( ??? && ??? ) {

    // This one works, but not until page/post has been saved, needs to show up at the same time as the thumbnail.
    if ( strpos( get_the_post_thumbnail(), '.svg' ) ) { 

        $text = __( 'Render Inline SVG (advanced)', 'svg-support' );
        $id = 'inline_featured_image';
        $value = esc_attr( get_post_meta( $post->ID, $id, true ) );
        $label = '<label for="' . $id . '" class="selectit"><input name="' . $id . '" type="checkbox" id="' . $id . '" value="' . $value . ' "'. checked( $value, 1, false) .'> ' . $text .'</label>';

        return $content .= $label;

    } else {

        return $content;

    }

}
add_filter( 'admin_post_thumbnail_html', 'bodhi_svgs_featured_image_meta' );

Somehow, I need to fire this function when the featured image is getting placed in the meta box. I found that I can target the exact time it would need to be run (I think) using wp.media.featuredImage.frame().on('close',function() in JS, but I don't know how to fire this function bodhi_svgs_featured_image_meta from inside the JS. I feel like I'm doing it wrong and I need to use ajax, so tried to implement ajax to do this with no luck.

Here is the JS I have:

jQuery(document).ready(function($){

    wp.media.featuredImage.frame().on('close',function() {

        window.alert('Triggered');
        // here I need to fire the bodhi_svgs_featured_image_meta function

    });

});


Then I save the checkbox value using:

function bodhi_svgs_save_featured_image_meta( $post_id, $post, $update ) {

    $value = 0;
    if ( isset( $_REQUEST['inline_featured_image'] ) ) {
        $value = 1;
    }

    // set meta value to either 1 or 0
    update_post_meta( $post_id, 'inline_featured_image', $value );

}
add_action( 'save_post', 'bodhi_svgs_save_featured_image_meta', 10, 3 );


Then this is how I add the class to the featured image on the front end... It works when the checkbox is selected, but when it is not, the featured image doesn't show up at all. I need this to check if the file extension is .svg or .svgz before adding the class also: EDIT I got this one working by removing the quotes around the value 1 and moving the return $thumb; outside the first if statement - commented out the old bits.

function bodhi_svgs_add_class_to_thumbnail( $thumb ) {

    $inline_featured_image = get_post_meta( get_the_ID(), 'inline_featured_image', false );

    // if ( in_array( '1', $inline_featured_image ) ) {
    if ( in_array( 1, $inline_featured_image ) ) {

        global $bodhi_svgs_options;

        if ( ! empty( $bodhi_svgs_options['css_target'] ) ) {

            $target_class = $bodhi_svgs_options['css_target'];

        } else {

            $target_class = 'style-svg';

        }

        if ( is_single() ) {

            $thumb = str_replace( 'attachment-', $target_class . ' attachment-', $thumb );

            // return $thumb;

        }

    }

    return $thumb;

}
add_filter( 'post_thumbnail_html', 'bodhi_svgs_add_class_to_thumbnail' );

I hope I have been clear enough! Thanks in advance for any help here.

  • Maybe... if ( strpos( get_the_post_thumbnail(), '.svg' ) ), this should return false if there is no thumbnail as well as if it can't find .svg. svg would also return true for svgz. – ngearing Aug 17 '16 at 23:38
  • Actually strpos returns a number so you should check if its not false. – ngearing Aug 17 '16 at 23:40
  • @Nath Thank you! That works, except the post/page has to be saved before the checkbox will show up... I need to somehow have it show up at the same time as the thumbnail image does, same as the "Click the image to edit or update" text. – Benbodhi Aug 17 '16 at 23:46
  • you will need to use javascript for that – ngearing Aug 17 '16 at 23:59
  • Dammit, I suck at Javascript. Thanks for your help! I will try figure out the JS to get that to happen. – Benbodhi Aug 18 '16 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.