[Resolved] Elements: Random Background-Image on Page Load

Home Forums Support Elements: Random Background-Image on Page Load

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1295567
    Tobias

    Hey there,
    in the Elements->Page Hero section I can only choose one image as a background. It would be great to choose a random image from a folder on page load keeping the parallax effect. Is that possible via hooks? If so: how?
    Cheers
    Tobias

    #1295631
    Leo
    Staff
    Customer Support
    #1296260
    Tobias

    Works perfect. Thank you

    #1296906
    Leo
    Staff
    Customer Support
    #1298836
    Tobias

    Sorry to reopen this but I forgot to ask if there is a way to load a smaller version of the random background-images on mobile devices as well.

    #1299018
    David
    Staff
    Customer Support

    Hi there,

    you could try adding the Array condtionally like so:

    if ( wp_is_mobile() ) {
        $headers = array(
            // Mobile images
        }
    } else {
        $headers = array(
            // Desktop images
        }
    }
    #1299505
    Tobias

    Thank you…and to complete my Hero Image Journey:
    I have some pages, where I would like to show a specific hero image and not the random ones.
    I have one “Element” set with a hero image for the complete site.
    In Code Snippets I tried

    if (the_title() == "Personalrat"){
    	add_filter( 'generate_page_hero_background_image_url', function( $url ) {
        $headers = array(
     	'http://wp.bmk.de/wp-content/uploads/hero-bg/personalrat.jpg',
        );
    
        $url = $headers[ rand( 0, count( $headers ) -1 ) ];
        return $url;
    } );
    }else{
    	
    
    	add_filter( 'generate_page_hero_background_image_url', function( $url ) {
        $headers = array(
     	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_1.jpg',
    'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_2.jpg',
    	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_3.jpg',
    			'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_4.jpg',
    'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_5.jpg',
    	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_6.jpg',
    			'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_7.jpg',
    'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
    	'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
        );
    
        $url = $headers[ rand( 0, count( $headers ) -1 ) ];
        return $url;
    } );
    	}

    But on the page “Personalrat” the desired image won’t show. Any ideas?
    Cheers
    Tobias

    #1299786
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This would be better:

    add_filter( 'generate_page_hero_background_image_url', function( $url ) {
        if ( is_page( 'Personalrat' ) ) {
            return $url;
        }
    
        $headers = array(
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_1.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_2.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_3.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_4.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_5.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_6.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_7.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
            'http://wp.bmk.de/wp-content/uploads/hero-bg/bg_8.jpg',
        );
    
        $url = $headers[ rand( 0, count( $headers ) -1 ) ];
        return $url;
    } );

    That will return the set featured image on that specific page.

    Otherwise, it will use the random images.

    #1299967
    Tobias

    This is one reason why I keep buying and recommending GeneratePress. Your support is unmatched!
    Thank you.

    #1300831
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.