[Resolved] Elements – Page Hero – type:header – Random imagery possible?

Hi there,

if you use a Hook Element to add this code then it will work:

<?php
$headers = array(
	'http://yourwebsite.com/URL/TO/header1.jpg',
	'http://yourwebsite.com/URL/TO/header2.jpg',
	'http://yourwebsite.com/URL/TO/header3.jpg',
	'http://yourwebsite.com/URL/TO/header4.jpg',
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];
?>
<style>
	.page-hero{background-image:url('<?php echo $random; ?>');}
</style>

The change to what Tom provided is the CSS rule ie.

.page-hero{background-image:url('<?php echo $random; ?>');}

We need to target the page-hero element to add the image to your Header Element.

Note: That you must have a header element that displays as you want it, for the above to work.

So yeah – you need:

1. Header Element showing the hero like you have on your homepage.

2. That code added to a wp_head hook and set to the same Display Rules as your #1 header element.

On your demo page, ie. https://demowebsq.co.uk/mbag/home-page-2/

I can see there is a Header Element as the header-wrap div is there ( which is merging the content with the site header ). But there is no page-hero div there, which is required for the code to work.

If you edit that Header Element, and set it up so the Page Hero is showing like the one on your home page then we can take a closer look 🙂

We’ll be hear today or tomorrow 🙂

Awesome – glad to hear thats working !