[Resolved] Hero Image Rotates Per Pageview

Home Forums Support [Resolved] Hero Image Rotates Per Pageview

Home Forums Support Hero Image Rotates Per Pageview

  • This topic has 11 replies, 3 voices, and was last updated 4 years ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1181486
    Joezer
    #1181489
    Joezer
    <?php
    $headers = array(
    	'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg',
    	'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg',
    	'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg',
    	
    );
    
    $random = $headers[ rand( 0, count( $headers ) -1 ) ];
    
    echo '<img src="' . $random . '" alt="" />';
    
    ?>
    #1181508
    Leo
    Staff
    Customer Support

    Hi there,

    Can you make sure Execute PHP is checked for the hook element?

    Let me know πŸ™‚

    #1181739
    Joezer

    Hello,

    Yes the PHP is checked. Is there other settings to be used in combination to this? Like creating another header element but with blank background?

    #1181748
    Joezer

    By the way, I am using the “use navigation as header”. I realize now that GP thread I linked to is for header logo. What I am trying to accomplish is for the hero image background to rotate πŸ™‚

    #1181905
    Tom
    Lead Developer
    Lead Developer

    before_header_content won’t work when using the Navigation as Header option.

    Where are you wanting it to display? Above the navigation?

    Let me know πŸ™‚

    #1181943
    Joezer

    Hello,

    I want it to show up in the location of the mountain picture in this page: https://ukulele.ph/maroon-5/memories/ the background changes with each pageview

    #1182469
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This should help: https://generatepress.com/forums/topic/random-background-images-on-pages/#post-1093883

    However, you’d want to use .page-hero instead of .site-header.

    #1182499
    Joezer

    Yep, it works. πŸ™‚

    Last two questions:

    May I know the best image width for this on bigger screen? So that it doesn’t repeat the image to fit?

    With this code, is the site going to request all of the image on load? If I am rotating 10 images, every time a visitor views a page, it is gonna download all the 10 images and then select 1 to be shown at random? Or it just makes a single request to the one random image that is going to appear for that specific pageview?

    How do I set the overlay for this in CSS? Because the header element specific for single posts are not working properly when I set the overlay. But the rest of the settings are working like padding, merge, text colors. Only the overlay option. Which I believe I will have to set manually in simple css.

    Thanks for the help πŸ™‚

    #1182898
    Tom
    Lead Developer
    Lead Developer

    It may actually be better to filter the standard page hero background image. That way it will cover the area for you, and you’ll be able to use the standard overlay settings.

    1. Remove the code above
    2. Set a background image in your Hero (just choose one of them)
    3. Add this filter:

    add_filter( 'generate_page_hero_background_image_url', function( $url ) {
        $headers = array(
            'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2020/02/ukulele.ph-head-image-the-best-ukulele-chords-tutorial-in-the-world-new.jpg',
            'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/10/funny-ukulele-facts-that-will-amaze-you.jpg',
            'https://wordpress-374220-1180966.cloudwaysapps.com/wp-content/uploads/2019/08/the-ukulele-is-the-best-stringed-instrument-ever-created.jpg',
        );
    
        $url = $headers[ rand( 0, count( $headers ) -1 ) ];
    
        return $url;
    } );

    It will only load the one image chosen by the PHP πŸ™‚

    #1188122
    Joezer

    Thanks, Tom! It works flawlessly. πŸ™‚

    #1188286
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.