[Support request] Linked Text Overlay on Random Images Display

Home Forums Support [Support request] Linked Text Overlay on Random Images Display

Home Forums Support Linked Text Overlay on Random Images Display

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #2202059

    Hi, On a site homepage (Front Page) I created a random image display using GP hook (“generate_inside_site_container”) to run a javascript function to display one of 10 images whenever the Front Page loads or is refreshed. This is working. I would like to overlay images in the container with HTML href links to other site pages. I know it can be done using Page Hero and a static image, but is it possible to configure if images are randomly displayed using javascript?

    Customer Support

    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/

    Customer Support

    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:


    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?

    Customer Support

    Yeah so i would probably approach it like so:

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

    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);
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.