[Resolved] Random background image in element: Block – Page Hero

Hi there,

you could do something like this:

1. Add the following PHP Snippet to your site, and update the array with the different images you want to use:

add_action( 'wp_head', function() {
  if ( is_front_page() ) {
    $headers = array(
      'full_url_to_images/image-1.jpg',
      'full_url_to_images/image-2.jpg',
      'full_url_to_images/image-3.jpg',
      'full_url_to_images/image-4.jpg',
      'full_url_to_images/image-5.jpg'
    );

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

Adding PHP: https://docs.generatepress.com/article/adding-php/

2. we now need some CSS, and we can take advantage of the my-page-hero class you already have. So just add this:

.gb-container.my-page-hero:before {
    background-image: var(--hero-bg);
}

Well thats made my day 🙂 Glad to be of help