Customising position of WordPress Featured Image - php

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

It's hard to give an exact answer without knowing how your template is marked up, but I think you'll have two options of doing this. Either use a plugin (Advanced Custom Fields), or the solution you mentioned of adding a meta box to the post editor.
I would recommend Option 1 because the plugin is stable, configurable, and will save you some time if you need to add more fields.
Option 1: Use Advanced Custom Fields
Download and install the plugin from their site: https://www.advancedcustomfields.com
Use the plugin to add a custom field. These directions might help: https://www.advancedcustomfields.com/resources/creating-a-field-group/
Make note of the Field Name as you will need this in your code. You might use something such as image_placement. I'd recommend setting up a select box with values such as Left, Center, and Right.
Then, in your PHP template file, you'll want something like this:
<?php if( get_option('image_placement') === 'left' ) : ?>
// Write the markup here when the image be left-aligned
<?php else if( get_option('image_placement') === 'right' ) : ?>
// Write the markup here when the image should be right-aligned
<?php else : ?>
// Write the markup here when the image should be shown as a banner
<?php endif; ?>
Option 2: Add a custom meta box to each post
Add the following code to your functions.php:
// add the meta box to the post editor page
function add_image_meta_box( $post ) {
add_meta_box( 'image_meta_box', 'Image Placement', 'image_build_meta_box', 'post', 'side', 'low' );
}
add_action( 'add_meta_boxes', 'add_image_meta_box' );
// build the front-end for the meta box (shown on the post editor page)
function image_build_meta_box( $post ) {
wp_nonce_field( basename( __FILE__ ), 'image_meta_box_nonce' );
$image_placement = get_post_meta( $post->ID, '_post_image_placement' );
?>
<h3>Image Placement URL</h3>
<select name="image_placement">
<option value="left" <?php ($image_placement[0] === 'left') ?; echo 'selected'; ?>>Left</option>
<option value="center" <?php ($image_placement[0] === 'center') ?; echo 'selected'; ?>>Center</option>
<option value="right" <?php ($image_placement[0] === 'right') ?; echo 'selected'; ?>>Right</option>
</select>
<?php
}
// save the setting
function image_save_meta_box_data( $post_id ) {
// Check the user's permissions.
if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}
$image_placement = $_POST['image_placement'];
if( isset( $image_placement ) ){
update_post_meta( $post_id, '_post_image_placement', sanitize_text_field( $image_placement ) );
}
}
add_action( 'save_post', 'image_save_meta_box_data' );
This will add a field to each of your posts which can be used in the markup like thus:
<?php $image_placement = get_post_meta( $post->ID, '_post_image_placement' )[0]; ?>
<?php if( $image_placement === 'left' ) : ?>
// Write the markup here when the image be left-aligned
<?php else if( $image_placement === 'right' ) : ?>
// Write the markup here when the image should be right-aligned
<?php else : ?>
// Write the markup here when the image should be shown as a banner
<?php endif; ?>

Answer 2

kudos to #rideron89 for helping me with the solution. So here it is if anyone needs to use it (in some implementation):
I'm keeping functions.php a bit clean so I put it into another php file within 'incl' folder and it gets included within functions.php"
// add the meta box to the post editor page
function add_image_meta_box( $post ) {
add_meta_box( 'image_meta_box', 'Featured Image Placement', 'image_build_meta_box', 'post', 'side', 'low' );
}
add_action( 'add_meta_boxes', 'add_image_meta_box' );
// build the front-end for the meta box (shown on the post editor page)
function image_build_meta_box( $post ) {
wp_nonce_field( basename( __FILE__ ), 'image_meta_box_nonce' );
$image_placement_array = get_post_meta( $post->ID, '_post_image_placement' );
$image_placement = implode (" ",$image_placement_array);
?>
<p>Please select the layout/alignment of your featured image <em>(default is full width banner)</em></p>
<select name="image_placement">
<option value="default" name="feat_img_align" <?php if($image_placement === 'default'){ echo "selected"; } ?>>Default</option>
<option value="left" name="feat_img_align" <?php if($image_placement === 'left'){ echo "selected"; } ?>>Left</option>
<option value="right" name="feat_img_align" <?php if($image_placement === 'right'){ echo "selected"; } ?>>Right</option>
</select>
<?php
}
// save the setting
function image_save_meta_box_data( $post_id ) {
// Check the user's permissions.
if ( !current_user_can( 'edit_post', $post_id ) ) {
return;
}
$image_placement = $_POST['image_placement'];
if( isset( $image_placement ) ){
update_post_meta( $post_id, '_post_image_placement', sanitize_text_field( $image_placement ) );
}
}
add_action( 'save_post', 'image_save_meta_box_data' );
The code that I inserted into the post content.php template was:
<?php
$post_feat_img = quick_resize_to_ratio_and_size(get_post_thumbnail_id($post->ID),1,1,250);
$alt_text = get_post_meta(get_post_thumbnail_id($post->ID), '_wp_attachment_image_alt', true);
$image_placement_array = get_post_meta( $post->ID, '_post_image_placement' );
$image_placement = implode (" ",$image_placement_array);
?>
<?php if ($image_placement === 'default') { ?>
<p><?php echo get_the_post_thumbnail($post->ID, 'large', array( 'class'=>'img-responsive center-block img-thumbnail')); ?></p>
<?php } else if ($image_placement === 'left') { ?>
<img src="<?php echo $post_feat_img; ?>" alt="<?php echo $alt_text ?>" class="alignFeatleft img-thumbnail img-responsive">
<?php } else if ($image_placement === 'right') { ?>
<img src="<?php echo $post_feat_img; ?>" alt="<?php echo $alt_text ?>" class="alignFeatRight img-thumbnail img-responsive">
<?php } else { ?>
<p><?php echo get_the_post_thumbnail($post->ID, 'large', array( 'class'=>'img-responsive center-block img-thumbnail')); ?></p>
<?php } ?>
<?php the_content(); ?>