During the building of Valley Fresh Produce we wanted each inner page to have a header image relevant to the page. For this project, we were using WordPress and the Genesis framework. We didn’t want to manually hook in each image to each page through html or css. We wanted a solution in which only one image would have to be loaded per page and said image would be easy to interchange. Our goal was for the featured image of a page to be displayed as the header image.
We created the bellow PHP. It first identifies that the page is not the home page and has a featured image. Then, the current post thumbnail is set to the variable $imgID. We create a new variable titled $featuredImage which pulls the url from the current thumbnail. A div with class “featured-page-image” is then added in which the background is set to echo the url for the featured image.
The bellow CSS is then applied and we get the final result.
Bellow is an image of what the final product looks like.
