How to set and use an alternative image on single posts using ACF in Genesis

In a website that I have recently set up for a client, the requirement was to display an image that's not the featured image above the title on single Post pages in Genesis. Since the featured images were being shown in a square proportion on content archives, they weren't suitable to be shown in a rectangular/banner-style on the individual posts.

In this tutorial, I show how we can create a field group having a custom image field to be shown on Posts in the WordPress editor. When this field is set, we shall make it appear on the single Posts. If this field is empty, the featured image will be used instead. If neither the alternative image nor the feature image is present, nothing will be output. Also, we shall use native WordPress functions instead of ACF's to remove the frontend dependency.

Featured image on content archives like /blog:

Alternative image on the single post:

Step 1

Let's register a custom image size for the image on single Posts.

Add this in child theme's functions.php:

add_image_size( 'featured-image-large', 650, 340, true );

Change the width to match the available content area width on your site. Height is up to you.

Regenerate thumbnails if needed.

Step 2

Install and activate Advanced Custom Fields.

Create a field group named say, Post Meta having an image field named Single Post Image.

Set the Return Value to Image ID.

Step 3

Add the following in child theme's functions.php: