Elements: Random Background-Image on Page Load

Hi there,

Take a look at this thread:
https://generatepress.com/forums/topic/hero-image-rotates-per-pageview/

Works perfect. Thank you

No problem :)

Sorry to reopen this but I forgot to ask if there is a way to load a smaller version of the random background-images on mobile devices as well.

Hi there,

you could try adding the Array condtionally like so:

if ( wp_is_mobile() ) {
    $headers = array(
        // Mobile images
    }
} else {
    $headers = array(
        // Desktop images
    }
}

Thank you...and to complete my Hero Image Journey:
I have some pages, where I would like to show a specific hero image and not the random ones.
I have one "Element" set with a hero image for the complete site.
In Code Snippets I tried

if (the_title() == "Personalrat"){
	add_filter( 'generate_page_hero_background_image_url', function( $url ) {
    $headers = array(
 	'http://wp.bmk.de/wp-content/uploads/hero-bg/personalrat.jpg',
    );

    $url = $headers[ rand( 0, count( $headers ) -1 ) ];
    return $url;
} );
}else{
	

	add_filter( 'generate_page_hero_background_image_url', function( $url ) {
    $headers = array(
 	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_1.jpg',
'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_2.jpg',
	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_3.jpg',
			'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_4.jpg',
'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_5.jpg',
	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_6.jpg',
			'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_7.jpg',
'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
    );

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

But on the page "Personalrat" the desired image won't show. Any ideas?
Cheers
Tobias

Hi there,

This would be better:

add_filter( 'generate_page_hero_background_image_url', function( $url ) {
    if ( is_page( 'Personalrat' ) ) {
        return $url;
    }

    $headers = array(
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_1.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_2.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_3.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_4.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_5.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_6.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_7.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
        'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
    );

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

That will return the set featured image on that specific page.

Otherwise, it will use the random images.

This is one reason why I keep buying and recommending GeneratePress. Your support is unmatched!
Thank you.

Glad I could help :)