[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
    Posts
  • #2202059
    Eric

    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?

    #2202088
    David
    Staff
    Customer Support

    Hi there,

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

    #2202140
    Eric

    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/

    #2202155
    David
    Staff
    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:

    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

    #2202246
    Eric

    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?

    #2202545
    David
    Staff
    Customer Support

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