[Resolved] Random page header with snippet

[takkularapsis]

Hi,

Is it possible to create random page header everytime on page load?
I have created 2 pcs of page header and both put location to frontpage.

I tryid this snippet https://generatepress.com/forums/topic/how-to-show-a-random-page-header/
But it wont work for me.

This is the snippet i made, is my id:s or something wrong?

add_filter( ‘generate_page_header_id’, ‘tu_random_page_header’ );
function tu_random_page_header( $id ) {
if ( is_page( ’20’ ) ) {
// Your list of page header IDs.
$ids = array(
‘123’,
‘457’
);

$id = array_rand( $ids, 1 );

}

// Return random selected element of the array
return $ids[$id];
}

[Ying]

Hi there,

That’s an old topic, the page header feature has been replaced by our Elements module.

Can you make sure you are still using the page header? Or are you using an Element?

Let me know!

[takkularapsis]

Hi,

Thanks, im using elements now.

[alco]

If you just want a random image, I use this: (put this code in a Hook and check Execute PHP)

<?php
$headers = array(
	'image-url-goes-here',
	'another-image-here',
);

$random = $headers[ rand( 0, count( $headers ) -1 ) ];
?>
<style>
	.your-css-class{background-image:url('<?php echo $random; ?>');background-repeat:no-repeat;background-position:center bottom;background-size:contain;}
</style>

[takkularapsis]

Hi,

I need text insinde elemnt to be also in the header, does this code replace the elements background but i can still
use the element?

[David]

Hi there,

does each of your page headers contain different text ? Or it it just the background image that changes ?

[takkularapsis]

Thanks,

It would vontain same content/text, but different background.

[David]

Ok, add this PHP Snippet to your site:

add_action( 'wp_head', function() {
  if ( is_front_page() ) {
    $headers = array(
      'http://gpgb.local/wp-content/uploads/2022/04/c9b83777-bf43-36ea-90d2-d9d326ec8422.jpg',
      'http://gpgb.local/wp-content/uploads/2022/04/e22bc337-0650-31d7-820a-9500579657eb.jpg',
      'http://gpgb.local/wp-content/uploads/2022/04/bb37db28-37a7-3e84-90b6-b3f68672ead4.jpg',
      'http://gpgb.local/wp-content/uploads/2022/04/a8dc1070-7019-3769-ba08-d69f91c93ef3.jpg',
      'http://gpgb.local/wp-content/uploads/2022/04/56b44bd5-5909-3298-a842-cd34809de7ee.jpg',
      'http://gpgb.local/wp-content/uploads/2022/04/2b7a0e6a-ed73-3168-89e4-c66e1352f2a6.jpg',
      'http://gpgb.local/wp-content/uploads/2022/04/fbca739e-0462-3691-a9bf-efd22c31067e.jpg'
    );

    $url = $headers[ rand( 0, count( $headers ) -1 ) ];
    printf( 
      '<style>:root {--hero-bg: url(%1$s);}</style>',
      $url
    );
  }
} );

Update the URLs for each of your images.

Now are you using a Header Element ?
If so in the Header Element > Element classes add: rand-image

If so add this CSS:

.page-hero.rand-image {
    background-image: var(--hero-bg);
}

If your using a block element and GB Container Block, give it an Advanced > Additional CSS Class of rand-image and use this CSS:

.gb-container.rand-image {
    background-image: var(--hero-bg);
}

[takkularapsis]

Great, thanks!

[David]

You’re welcome

[Author]

Posts