-
Hello, oh gurus of all GP/GB knowledge! Question… I am using a header element for my hero image on the home page, and wondered if there is a way to have one of ten images served up, so that each time someone hits that home page, they see a different header image?
I have the element set to show one image for desktop and tablet, and another on mobile. So 20 images total, rotating through ten per device…
-
Hi there,
Something like this might work, but it needs to be in a hook element instead of a header element, as there’s no option to execute PHP code in a header element：
https://generatepress.com/forums/topic/randomized-header-images/#post-475107 -
Oh, that’s so helpful – thanks, Ying, I’ll give it a try and LYK if it works!
-
So a question… My header element has code to show a different image size on desktop/tablet vs. mobile. The code looks like this:
<div class="hide-on-mobile"> <img src="URL" alt="Blah blah" style="width:100%;" /> </div> <div class="hide-on-desktop hide-on-tablet"> <img src="URL" alt="blah blah" style="width:100%;" />If the new hook you suggest looks like this (below), how would I adapt it so that the different sizes show?
<?php $headers = array( 'URL to logo 1', 'URL to logo 2', 'URL to logo 3', 'URL to logo 4', ); $random = $headers[ rand( 0, count( $headers ) -1 ) ]; echo '<img src="' . $random . '" alt="" />'; ?> -
Hi there,
you could do something like this instead:
<?php $images = array( 'desktop' => array( 'URL to desktop image 1', 'URL to desktop image 2', 'URL to desktop image 3', 'URL to desktop image 4', ), 'mobile' => array( 'URL to mobile image 1', 'URL to mobile image 2', 'URL to mobile image 3', 'URL to mobile image 4', ) ); // Get a random image for desktop $randomDesktop = $images['desktop'][rand(0, count($images['desktop']) - 1)]; // Get a random image for mobile $randomMobile = $images['mobile'][rand(0, count($images['mobile']) - 1)]; ?> <div class="hide-on-mobile"> <img src="<?php echo $randomDesktop; ?>" alt="Blah blah" /> </div> <div class="hide-on-desktop hide-on-tablet"> <img src="<?php echo $randomMobile; ?>" alt="Blah, blah" /> </div>here we have 2 arrays, one for Desktop and one for Mobile. With the respeciive Img src being set.
-
And is there something I can add to make it full width, like a hero image? Plopping in style=”width:100%;” didn’t help.
<?php $images = array( 'desktop' => array( 'URL to desktop image 1', 'URL to desktop image 2', 'URL to desktop image 3', 'URL to desktop image 4', ), 'mobile' => array( 'URL to mobile image 1', 'URL to mobile image 2', 'URL to mobile image 3', 'URL to mobile image 4', ) ); // Get a random image for desktop $randomDesktop = $images['desktop'][rand(0, count($images['desktop']) - 1)]; // Get a random image for mobile $randomMobile = $images['mobile'][rand(0, count($images['mobile']) - 1)]; ?> <div class="hide-on-mobile"> <img src="<?php echo $randomDesktop; ?>" alt="Blah blah" style="width:100%;" /> </div> <div class="hide-on-desktop hide-on-tablet"> <img src="<?php echo $randomMobile; ?>" alt="Blah, blah" style="width:100%;" /> </div> -
You gotta use the code in a hook element, and use the
generate_after_headerhook. -
Thank you! It is a hook element, using the generate_header hook. The generate_after_header put it in the wrong location. It did just started working after I dumped my cache… but now one of the images doesn’t always load. It just shows the broken link URL, even though the URL is correct and formatted exactly like the other one that seems to always work. Baffled!
-
Whoops, NM – it was because I didn’t take out some of David’s placeholder text for additional URLS. All fixed and working, and it’s lovely. Thank you both so much!
-
You are welcome 🙂
- You must be logged in to reply to this topic.