User customising position of WordPress Featured Image

Question

Is it possible to build an option in Wordpress which allows user to customise placement of featured image?

Currently the theme I am building, puts the featured image as a banner across the top of the post. Have some users requesting for option to be able to have featured images appear top right of the post with text wrapping around it.

Not sure about how to approach this. My first thought is to put an option in the customiser but I'm concerned this will apply to all blog posts rather than on an individual basis.

Another idea is to build a metabox into the post editing screen (underneath feat. image box) and then build a function to hook into wp post.

I've scoured over google on ways how to do this but all I can find so far is information on how to edit content.php to universally change/edit placement of all featured images.

Answer 1

You're getting close on your second guess, but I think a better way would be to create your own custom field checkbox that displays in the existing featured image meta box. This makes the functionality nice and obvious from a usability perspective, and operates on a post by post basis as desired.

I put together the following code as a plugin, but for your purposes it sounds like you would want to add the following code(below my plugin comments) into your themes functions.php file, as the functionality seems like it would be more theme specific for you. Anyways, here's what I put together:

<?php
/*
 * Plugin Name: Featured Image Toggle
 * Description: Adds a checkbox to your featured image meta box that you can use to customize how your featured image is displayed
 * Version: 1.0
 * Author: Ben HartLenn
 * Author URI: https://benhartlenn.com
 * License: N/A
 * Text Domain: featured-image-toggle
 */

// Enable featured images in theme, if they are NOT already enabled
if ( !current_theme_supports('post-thumbnails') ) {
    add_theme_support('post-thumbnails');
}

// Add checkbox custom field html to the bottom of the existing featured image meta box in post editor
add_filter('admin_post_thumbnail_html', 'fit_output_featured_image_checkbox', 10, 2);
function fit_output_featured_image_checkbox($content, $post_id) {
    $field_id = 'toggle_featured_image';
    $field_value = esc_attr(get_post_meta($post_id, $field_id, true));
    $field_text = esc_html__('Show Featured Image in Post Content.', 'featured-image-toggle');
    $field_state = checked($field_value, 1, false);

    $field_label = sprintf(
            '<p><label for="%1$s"><input type="checkbox" name="%1$s" id="%1$s" value="%2$s" %3$s> %4$s</label></p>', $field_id, $field_value, $field_state, $field_text
    );

    return $content .= $field_label;
}

// Save checkbox custom field data with value as 1 for checked, and 0 for unchecked
add_action('save_post', 'fit_save_featured_image_checkbox', 10, 3);
function fit_save_featured_image_checkbox($post_ID, $post, $update) {
    $field_id = 'toggle_featured_image';
    $field_value = isset($_REQUEST[$field_id]) ? 1 : 0;

    update_post_meta($post_ID, $field_id, $field_value);
}

// Prepend featured image to first paragraph of a posts content, if checkbox is checked, i.e. value == 1
add_filter('the_content', 'fit_insert_featured_image', 20);
function fit_insert_featured_image($content) {
    global $post;
    $featured_post_toggle = get_post_meta($post->ID, 'toggle_featured_image', true);

    if( has_post_thumbnail($post) && $featured_post_toggle == 1 ) {
        // NOTE: Adding 'medium' sized image to post content
        $content = preg_replace("/<p>/", "<p>" . get_the_post_thumbnail($post->ID, 'medium', ['class' => 'post-content-featured-image']), $content, 1);
        return $content;
    }
}

// If our checkbox is checked, also add a little css to float the image to the right, make the image 33% width of parent element, and thus make it responsive.
add_action( 'wp_head', 'fit_css');
function fit_css() {
    global $post;
    $featured_post_toggle = get_post_meta($post->ID, 'toggle_featured_image', true);

    if( is_singular('post') && $featured_post_toggle == 1 ) {
        echo '<style type="text/css">';
        // NOTE: Adjust the following css as wanted.
        echo 'img.post-content-featured-image { float: right; width: 33%; height: auto; margin: 0 0 2% 2%; }';
        echo '</style>';
    }
}

It sounds like you already have code, likely in your themes header.php file, that displays a posts featured image if it is set. You'll want to modify that slightly to check if the checkbox we created above IS NOT checked before displaying the featured image normally, so your new code might look like this:

<?php
  $featured_post_toggle = get_post_meta($post->ID, 'toggle_featured_image', true);
  // $featured_post_toggle == 0 makes sure our checkbox is not checked
  if ( is_singular('post') && has_post_thumbnail() && $featured_post_toggle == 0 ) :
?>
    <div id="post-image">
      <?php the_post_thumbnail('large', ['class' => 'post-featured-image'] ); ?>
    </div>
<?php endif; ?>

As noted in my comments, you might need to adjust the css for featured images in post content, and you can pull in different sized featured images for when they are displayed in the post content.