If you’re familiar with Medium you’re probably familiar with huge hero images being displayed above the content. In order to accomplish something similar we just need a few small tweaks to our functions file, and our style.css.
Essentially what we’re doing is created a custom “Hero Image” that appears above each page of post on your Genesis site.
Using WordPress’ built-in Featured Image option we can add a different featured image to any page or post and have it display as a large hero area above the content.
We’re going to be editing the theme’s functions file so we need to make sure that backup our install before going forward.
Step 1: Download and install the Regenerate Thumbnails plugin you’re going to need it pretty soon.
Step 2: Here we are creating a new image size with add_image_size you can change 1400, and 400 to reflect whatever image size you want to use. The first is the width, and the second is the height. I chose 1400px as it should cover most desktop screens without losing too much quality, and 400 px seemed like a good place to round off the height.
The following script uses WordPress’ featured image to insert a background as a background image in the genesis_after_header hook.
I thought about doing this as an inline image, but I realized that a background would make it easier in case I want to put text over the image.
Add the following to your child theme’s functions.php file.
After pasting that code at the bottom of your functions.php file add the following to your child theme’s style.css or sass file
Here we are setting the max-width to 100% so it will always stretch to fill the screen size. We’re setting the height to 400px to match the dimensions we declared when we added an image size. Background size cover allows the image to scale responsively and the background position helps keep things centered.
After you’ve pasted this code go into your WordPress Dashboard and under Tools –> Regen. Thumbnails –> run the process and you should be good to go.
Any problems implementing this? Errors in my code? Know a better way to do this? Please comment below.