Random background images on pages

[Mo]

Hi Tom,
It’s been 3 years since having to modify my client’s website which has now moved from a shared hosting service to Digital Ocean.
That’s an eternity on the Internet.

Not surprising that the addons have evolved so I need some assistance with the “Elements” feature.
The code that was previously used was added to the GP Hooks however I don’t have that script now since the client termintaed his shared hosting account.

I’ve tried to adapt the Random Header image posts from here: Random Page Header but there’s joy in Whoville.

<?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 ) ];

echo '<img src="' . $random . '" alt="" />';
?>

Since the previous snippet is gone I don’t recall what was modified regarding changing “headers” to either “pages” or “body”.
Additionally the previous snippet had this line after the closing PHP tag:

<style>
	.site-header{background-image:url('<?php echo $random; ?>');}
</style>

The theme is still as solid as ever but I’m stumped on how to get the images to randomize on the website pages.

The hook is wp_body_open although I’ve tried other hooks and Execute PHP is enabled.

This is to be applied to all pages except for specified pages which can be “excluded” in the Elements” settings.

Could it be a Digital Ocean issue in the server set up?

BTW: htaccess is blocking access except for my IP.

Thanks for your time.

[Tom]

Hi there,

You should be able to continue using the old GP Hooks if you prefer.

If you want to use Elements, I would:

1. Create a new Hook Element.
2. Set this as the hook content:

<?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>

3. Set the hook to wp_head

4. Check the “Execute PHP” option.

Then you just need to set the Display Rules (Entire Site likely) and you should be good to go.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mo]

The random images are to be applied for the page backgrounds not the headers.
The snippet that worked was lost when the site was moved to Digital Ocean.

I think that “headers” need to changed to either “body” or “page” or “pages” as that’s the only thing I recall from 3 years ago.

I’ve been trying the wp_body_open hook but that’s a guess.

Execute PHP is enabled.

Thanks.

[Tom]

So instead of .site-header, try body.

That should apply the background image to the entire site instead of just the header.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mo]

Success.

I deleted the first Element as nothing worked after trying numerous variations.

Creating an new Element using your suggested modification was the key.

I was using .site-body instead of simply body.

Works on every page.

Thanks for providing the solution.

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts