Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Header Background Images

Home Forums Support Header Background Images

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #176129
    w8krf

    When I was using another theme before I found yours, which is much better, in my opinion, I was able to have several header background images which would randomly change when a new page was accessed. I only see the capability to have one image in your theme. Would it be possible to do what I want in GeneratePress? I have purchased the add-on package and am having a ball customizing but I do not see any way of having multiple header images.

    Thanks.

    Carl Rimmer
    http://www.w8krf.net

    #176194
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This topic might be helpful: https://generatepress.com/forums/topic/random-rotate-header-logo-per-page-view/

    That will work with actual images in the header though. If you want to use background images, you could do something like this in the wp_head hook in “Appearance > GP Hooks”:

    <?php
    $headers = array(
    	'http://yourwebsite.com/URL/TO/header1.jpg',
    	'http://yourwebsite.com/URL/TO/header2.jpg',
    	'http://yourwebsite.com/URL/TO/header3.jpg',
    	'http://yourwebsite.com/URL/TO/header4.jpg',
    );
    
    $random = $headers[ rand( 0, count( $headers ) -1 ) ];
    ?>
    <style>
    	.site-header{background-image:url('<?php echo $random; ?>');}
    </style>

    Be sure to check “Execute PHP” 🙂

    #176470
    w8krf

    That worked. Excellent. Thank you.

    #176513
    Tom
    Lead Developer
    Lead Developer
    #293650
    Mo

    Hi Tom,
    How would that script you provided in the solution provided in Reply 176194 for rotating header images be adapted to random generated page backgrounds?

    I’ve used the GP Hooks before but as usual the PHP confounds me.

    I’m assuming that $headers would need to be replaced with something.

    .site-header would be replaced by “body”?

    Haven’t used GP for a while and had some pleasant surprises activating it for my latest build.

    Thank you.
    Mo

    #293661
    Mo

    Hye Tom,
    Disregard my last request as I think the coding modification has been solved.
    If there are any unforseen issues I’ll start a new post.
    Thanks,
    Mo

    #293685
    Tom
    Lead Developer
    Lead Developer

    Glad you got it sorted 🙂

    #293746
    Joseph

    Hello, That script works wonders but it also shows on my main page which has a video header. the video overwrites it but it looks messy.

    I used this css to style it out but to no avail.
    .page-id-17 .site-header {background-image:display:none!important;}

    Here is what I am talking about.
    http://www.freedomfactor.org/staging/

    Thanks in advance!!

    #293897
    Tom
    Lead Developer
    Lead Developer

    What about it looks messy? While it’s loading?

    #293932
    Joseph

    While loading on the main page, it shows the backgrounds I’ve added to the script then quickly changes to the video. Each time the main page is loaded it will show the scripted background then change to the video. It was mentioned to us from our client and I was just wanting to stop the display of the script on that particular page (main page) by using either css or gphooks (display:none)
    All the other pages work great.

    Thanks,

    #294123
    Tom
    Lead Developer
    Lead Developer

    You could try this:

    .home .site-header {
        background-image: none;
    }
    #294227
    Joseph

    Thank you sir, that did the trick. Much appreciated!!

    #294327
    Tom
    Lead Developer
    Lead Developer
    #319689
    Talya

    HEY,
    Sorry for barging into this discussion – I’ve tried the random background images, did it yesterday and worked like a charm. Wanted to add another image and since then can’t make it to work again, this is my code:

    <link href="https://fonts.googleapis.com/css?family=Alef|Heebo|Secular+One|Suez+One" rel="stylesheet">
    
    <?php
    $headers = array(
    	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/header_lettuce.jpg',
    	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/field.jpg',
    	'http://chubeza.com/newsletter/wp-content/uploads/2006/04/corn.jpg',
    	'http://chubeza.com/newsletter/wp-content/uploads/2010/07/red.jpg',
    	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/rainbow.jpg’,
    	'http://chubeza.com/newsletter/wp-content/uploads/2009/12/header_04.jpg',
    );
    
    $random = $headers[ rand( 0, count( $headers ) -1 ) ];
    ?>
    <style>
    	.site-header{background-image:url('<?php echo $random; ?>');}
    </style>

    What am I doing wrong?
    the website is http://chubeza.com/
    Thanks!

    #319693
    Tom
    Lead Developer
    Lead Developer

    Looks like you have a “curly” quote after rainbow.jpg – try replacing that with a straight quote like the others.

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