How to Create Dynamic Page Headers with Background Images

Need an easy way for your H1s to stand out on a page? This tutorial offers a headache free solution for content teams to organize and add background images to a page header.

How to Create Dynamic Page Headers with Background Images

The H1 header (or page header) makes a massive difference to any web page. It helps search engines see what keywords are associated with your website. It gives the search algorithms an idea of what matters on a particular page. And, most importantly, it gives your customers a clear direction for each page, thus improving their overall experience. 

While page headers are often designed to be the biggest font on a page, there are often other design tricks that help an H1 stand out. Adding a background image not only helps your H1 stand out; it helps support overall visual branding for your website. 

However, adding visuals to any website isn't always the easiest task -- especially when your content team isn't handy with HTML or all of your CMS's functionalities. This tutorial makes adding backgrounds for your page headers simple. All they have to do is upload and image with proper naming, and a page will automatically use that image for the header background. 

Step 1: Create the folder you want to use to connect images to your pages.

This folder will contain the Path ID that you give to the shortcode.

Step 2: Upload the images into this folder, with names correlating the page titles.

Ex: about-us.jpg

It is also recommended to add a default.jpg, as that will be the fallback on any page names without correlated images.

Step 3: Include code in your shortcodes file

Include this php code in your shortcodes.php file

Step 4: Create a hero.tpl file with the shortcode.

Your markup should look similar to this:

Step 5: Use this hero.tpl file in any stml page.

The shortode will dynamically grab any image with the page name correlated. If there is no image, it will look for an image from its parent page.

Example: /about-us/team.stml will first look for team.jpg, then for about-us.jpg. If neither of these are found, it will default to the default.jpg.


Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

We use cookies to provide and improve our services. By using our site, you consent to cookies.

Close Button

Try Solodev for Free!

By clicking "Submit" you agree to Solodev’s Terms of Service.