-2

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.

Improve this question

2 Answers 2

Reset to default
2

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; ?>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I apologise for putting out a bit of a vague question in SO, I was looking for a direction to go before I started coding (probably should have thought more about it, and attempted to code it before asking question here). I thought about it more and post metabox seemed the obvious way to go as I can store custom user information against each post - I was just hesitant to hack (posts) theme to much - I've done it before with CPTs no worries. I will implement your suggested option 2.
Just implemented your code @rideron89. Just had to tighten up a few things. I converted the $image_placement array into string via implode (was just easier to manage). Also the syntax for the ternary expressions in the <option> tags needed a colon after the question mark, not a semicolon
1

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(); ?>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.