[Resolved] Random page header with snippet

Home Forums Support [Resolved] Random page header with snippet

Home Forums Support Random page header with snippet

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2304549
    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];
    }

    #2304601
    Ying
    Staff
    Customer Support

    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!

    #2304615
    takkularapsis

    Hi,

    Thanks, im using elements now.

    #2304668
    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>
    #2304862
    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?

    #2304963
    David
    Staff
    Customer Support

    Hi there,

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

    #2304969
    takkularapsis

    Thanks,

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

    #2304976
    David
    Staff
    Customer Support

    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);
    }
    #2304979
    takkularapsis

    Great, thanks!

    #2305638
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.