Linked Text Overlay on Random Images Display

Hi there,

could I see the site ? Might help with my better understanding of the requirements.

The site's in development behind a firewall, so I can't send a link, but here's a link to a different site with a similar homepage design. You'll see the hero image on the homepage and a blue background textbox with text links on top of the images. The site in development will have text/links in the blue textbox, but the text will not change when the images below it change when first loading or refreshing homepage. Hope this helps convey the design idea: https://cdlib.org/

So what if the images were loaded as a Background to a container?
And that way you could add your other HTML/Links inside that container.

If that's an option then you could even replace the JS with a server side function - here's an example:

https://generatepress.com/forums/topic/random-featured-image-on-home-page/#post-1827999

we could convert that to output some CSS for the backgound-image instead of a <img> element.

Let me know

So add the image array/code snippet to functions.php for container placement and create HTML/links as an element to overlay images in the same container?

Yeah so i would probably approach it like so:

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
    );
  }
} );

Where we load our $url with a random index from our $headers array.
Which we then print to a root variable named: --hero-bg in an inline style like so:

<style>:root {--hero-bg: url(http://gpgb.local/wp-content/uploads/2022/04/fbca739e-0462-3691-a9bf-efd22c31067e.jpg);}</style>

And we can use that variable like this:

.our-container-element {
    background-image: var(--hero-bg);
}