Featured Image Meta

I’ve built a couple themes where I’ve needed to give users more control over how the featured image is displayed for individual posts. The obvious place to put these options are in the thumbnail metabox itself.

Display Thumbnail Landscape

banner-meta

In this theme the default display of the thumbnails is a cropped to a square next to the title. But if the user had a large landscape image, they could choose to display it full width instead.

Option to Display Featured Image in Post Automatically

featured-meta

In this theme the featured image is used as a thumbnail on portfolio archive pages, but it is also displayed full size on the portfolio post types. This option gives users the option to use a different image in the actual post if they prefer.

Add the Option

Adding the option is fairly simple, you’ll just need to hook into the admin_post_thumbnail_html filter:

/**
 * Adds a checkbox to the featured image metabox.
 *
 * @param string $content
 */
 
function prefix_featured_image_meta( $content ) {
    global $post;
    $text = __( 'Don\'t display image in post.', 'prefix' );
    $id = 'hide_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;
}
add_filter( 'admin_post_thumbnail_html', 'prefix_featured_image_meta' );

Sanitize and Save the Option

This option will need to be sanitized and saved when the post is updated- like any other custom field in a metabox. Here’s how that could be done:

/**
 * Save featured image meta data when saved
 *
 * @param int $post_id The ID of the post.
 * @param post $post the post.
 */
function prefix_save_featured_image_meta( $post_id, $post, $update ) {
 
    $value = 0;
    if ( isset( $_REQUEST['hide_featured_image'] ) ) {
        $value = 1;
    }

    // Set meta value to either 1 or 0
    update_post_meta( $post_id, 'hide_featured_image', $value );
 
}
add_action( 'save_post', 'prefix_save_featured_image_meta', 10, 3 );

Credits

The thumbnail images above are from Alexander S. Kunz Photography.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

11 Responses

  1. This is pretty neat! I can picture something similar being very useful in conjunction with a plugin that adds Twitter or Opengraph meta tags. It makes a lot of sense to use the featured image in these cases, but what if the use does not want the featured image to be displayed in the theme? Neat solution :)

  2. Didier Sajno

    I’ve been looking for that particular feature, however not being a coder, I find it hard to follow the instructions from Justin Tadlock’s tute.
    – I’ve copied/pasted the above code into functions.php

    Now I get the option under the featured image thumbnail but it doesn’t do anything, I guess that’s where the sanitise/save comes in. But I couldn’t resolve this… can you help?

  3. Ryan

    Still works well in WP 4.1.1. I don’t rely on content() in theme, but I manually call the custom meta and used conditional != ‘1’ to disable image echo when selected. Simple and flexible.

Leave a Reply to Ryan Cancel reply