Hero Image Rotates Per Pageview

<?php
$headers = array(
	'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg',
	'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg',
	'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg',
	
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];

echo '<img src="' . $random . '" alt="" />';

?>

Hi there,

Can you make sure Execute PHP is checked for the hook element?

Let me know :)

Hello,

Yes the PHP is checked. Is there other settings to be used in combination to this? Like creating another header element but with blank background?

By the way, I am using the "use navigation as header". I realize now that GP thread I linked to is for header logo. What I am trying to accomplish is for the hero image background to rotate :)

before_header_content won't work when using the Navigation as Header option.

Where are you wanting it to display? Above the navigation?

Let me know :)

Hello,

I want it to show up in the location of the mountain picture in this page: https://ukulele.ph/maroon-5/memories/ the background changes with each pageview

Hi there,

This should help: https://generatepress.com/forums/topic/random-background-images-on-pages/#post-1093883

However, you'd want to use .page-hero instead of .site-header.

Yep, it works. :)

Last two questions:

May I know the best image width for this on bigger screen? So that it doesn't repeat the image to fit?

With this code, is the site going to request all of the image on load? If I am rotating 10 images, every time a visitor views a page, it is gonna download all the 10 images and then select 1 to be shown at random? Or it just makes a single request to the one random image that is going to appear for that specific pageview?

How do I set the overlay for this in CSS? Because the header element specific for single posts are not working properly when I set the overlay. But the rest of the settings are working like padding, merge, text colors. Only the overlay option. Which I believe I will have to set manually in simple css.

Thanks for the help :)

It may actually be better to filter the standard page hero background image. That way it will cover the area for you, and you'll be able to use the standard overlay settings.

1. Remove the code above
2. Set a background image in your Hero (just choose one of them)
3. Add this filter:

add_filter( 'generate_page_hero_background_image_url', function( $url ) {
    $headers = array(
        'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg',
        'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg',
        'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg',
    );

    $url = $headers[ rand( 0, count( $headers ) -1 ) ];

    return $url;
} );

It will only load the one image chosen by the PHP :)

Thanks, Tom! It works flawlessly. :)

You're welcome :)