Hero Inline Image in Oxygen

This members-only tutorial provides the steps to set up featured image (img element) to appear like a background of the hero section with the header and post title and info overlayed on single posts in Oxygen.

This tutorial can also be applied to singular pages of any type, not just posts.

Step 1

Let's register a custom image size for the featured images using the add_image_size function of WordPress.

If you want the images to have a specific aspect ratio of width to height, specify a value for the height in the add_image_size function like this:

add_image_size( 'hero-1600', 1600, 834, true );

The above can be added using a plugin like Code Snippets.

With this in place, the HTML output of the_post_thumbnail( 'hero-1600' ) which we are going to use in the next step will be something like:

<img width="1600" height="834" src="https://oxygen.local/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-1600x834.jpg" class="attachment-hero-1600 size-hero-1600 wp-post-image" alt="" loading="lazy">

If you want the featured images to maintain their aspect ratio, specify 0 for the height value like this:

add_image_size( 'hero-1600', 1600, 0, true );

With this in place, the HTML output of the_post_thumbnail( 'hero-1600' ) which we are going to use in the next step will be something like:

<img width="1600" height="1173" src="https://oxygen.local/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-1600x1173.jpg" class="attachment-hero-1600 size-hero-1600 wp-post-image" alt="" loading="lazy" srcset="https://oxygen.local/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-1600x1173.jpg 1600w, https://oxygen.local/wp-content/uploads/2021/09/kote-puerto-so5nsYDOdxw-unsplash-scaled.jpg 2560w" sizes="(max-width: 1600px) 100vw, 1600px">

Note: The dimensions of the featured image for the specific post used in my test site as the reference for this tutorial are 2560 by 1877 pixels.

Step 2

If your posts already have featured images attached to them prior to registering our custom image size, regenerate thumbnails.

If your hosting has WP-CLI in place, you can do:

wp media regenerate --only-missing --yes --image_size=hero-1600

instead as it will be much quicker.

Step 3

Edit your posts in the WP admin and ensure that they have featured images set.

Step 4

Edit your Main sitewide Catch All Template with Oxygen and set up the header having your desired elements. Typically, these would be site title/logo at the left linking to the site's homepage and nav menu at the right. Since we are going to add a dark gradient on top of the image, you may want to set these to have white stroke/color.

You can either select the Overlay option either here or in the single post's Template.

Step 5

(Create if not present and) Edit the Template that applies to singular posts with Oxygen.

Add a Section.

Set the padding to 0 on all 4 sides.

Set the width to full.

Set the position to relative.

Add a Code Block inside the Section having this code: