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

[Sarah]

So is it possible…? I have looked at the various other help support tickets around about making random header imagery but none seem to eb working for me

I have a page hero image working great here

https://demowebsq.co.uk/mbag/

and I would like that to become a random image or 4 images…

I have tried inserting php code instead – but of course when using the TYPE:Header element there is no “action PHP” tick box so it ignores that … I have added it as a HOOK instead but that just doesn’t display at all now (https://generatepress.com/forums/topic/random-background-images-on-pages/#post-1093883)

My testing page is here:

https://demowebsq.co.uk/mbag/home-page-2/

So basically can I have 4 background images that are randomly displayed as an element page hero image instead?

[David]

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.

[Sarah]

Thanks David – I already have that in place however exactly as you have it… but I have it showing as “hook wp_head” which I am wondering if that should change

also when you say you must have a header element that displays as you want it already in place – do you mean as a hero image like my home page ?

[David]

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.

[Sarah]

hmm I will review this again tomorrow as I feel like I have exactly that already but its showing nothing – I can see it in my source code but nothing display – so I will review with fresh eyes tomorrow to make sure I have not made a silly error! thank you

[David]

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 🙂

[Sarah]

Thanks David I have a quick look and had totally forgotten to include <!--This is a comment--> within the page hero element! rookie error on my behalf – thank you though – all working as I wanted now 🙂

[David]

Awesome – glad to hear thats working !

[Author]

Posts