Responsive Image After Header On Single Pages in Genesis

This post contains 2 code snippets which enable you to add a unique image after the header on any single page.

Here’s how the 2 solutions work :

Solution 1 – Your image is only displayed when one is added via a custom field named after_header

Solution 2 – If no image is added, a default named after-header.jpg is pulled from your child themes images folder.

Solution 3 & 4 support ACF and display the image if added and ACF is inactive. Assumes ACF settings for return field are :

Here’s the demo video showing how it works :

Demo Video

Shows the default image added after the header on single pages only and a continue image added when URL added to custom field named after_header. Also shows the image resize on smaller screens.

Tested using the Atmosphere Pro child theme by StudioPress however will work in most Genesis child themes without modification.

Installation

Add 1 of the code snippets from the download folder to the end of your child themes functions file.

Add Image

Add your image URL to a custom field like this :

Note : Includes 2 code snippets. Solution 3 & 4 support ACF & WP custom fields meaning your image will display if you deactivate ACF.

Register or login to access the download folder :

Related Tutorials

• After Header Parallax Image