Just added a bit of new functionality to the Gite Guru website today which uses the excellent Aeros theme, making the background image randomise on page reload (try clicking around the pages on the blog to see the image switch between different photos). Note, this only works on versions of Aeros up to 1.04, and not the more recent 1.05 release, sorry!
I learned how to randomise a header image on a website whilst building a client’s site, and thought it would be pretty cool to implement it on the background image on this site.
It’s pretty easy to do even if you don’t know anything about CSS, but I’m assuming you’ve got access to ftp, a text editor such as notepad ++ and you know what a stylesheet is.
Step 1: Change your CSS file
In the Aeros theme folder, open the style.css file, and look for the ‘background’ attribute. It’s at around line 51 in my version, if it’s not there search for this line: background: url(images/default.jpg) no-repeat 0 0 #fff; within your file.
Replace images/default.jpg with: background/random.php so that it looks like this:
Save the style.css file, and ftp it back to your Aeros theme folder on your web server.
Step 2: Get, prepare and upload the random.php script
Next, you need to get the latest version of the random image script here. Copy the code into a new file in your text editor, and save it as random.php. You don’t need to change any of the code in the script for this to work.
Now, using your ftp client, navigate to the Aeros theme folder and in the root of that folder, create a directory called background. FTP your random.php file into that background folder.
Step 3: Provide the script with some images to choose from
Images should be saved into the /background/ folder, which will allow the random.php file to find them. Start by getting the default.jpg file from your existing /images/ folder and copying it across to the /background/ folder. Check your website. If you’ve done this right, your usual background image will show up. Now try adding some more images to the folder.
You can call them what you want, but you will want to ensure that they’re the same dimensions as the default.jpg image, and that they’re not too huge as this could slow down load speeds on slower internet connections.
by
Randomising background image with Aeros theme in 3 easy steps
Just added a bit of new functionality to the Gite Guru website today which uses the excellent Aeros theme, making the background image randomise on page reload (try clicking around the pages on the blog to see the image switch between different photos). Note, this only works on versions of Aeros up to 1.04, and not the more recent 1.05 release, sorry!
I learned how to randomise a header image on a website whilst building a client’s site, and thought it would be pretty cool to implement it on the background image on this site.
It’s pretty easy to do even if you don’t know anything about CSS, but I’m assuming you’ve got access to ftp, a text editor such as notepad ++ and you know what a stylesheet is.
Step 1: Change your CSS file
In the Aeros theme folder, open the style.css file, and look for the ‘background’ attribute. It’s at around line 51 in my version, if it’s not there search for this line: background: url(images/default.jpg) no-repeat 0 0 #fff; within your file.
Replace images/default.jpg with: background/random.php so that it looks like this:
background: url(background/random.php) no-repeat 0 0 #fff;
Save the style.css file, and ftp it back to your Aeros theme folder on your web server.
Step 2: Get, prepare and upload the random.php script
Next, you need to get the latest version of the random image script here. Copy the code into a new file in your text editor, and save it as random.php. You don’t need to change any of the code in the script for this to work.
Now, using your ftp client, navigate to the Aeros theme folder and in the root of that folder, create a directory called background. FTP your random.php file into that background folder.
Step 3: Provide the script with some images to choose from
Images should be saved into the /background/ folder, which will allow the random.php file to find them. Start by getting the default.jpg file from your existing /images/ folder and copying it across to the /background/ folder. Check your website. If you’ve done this right, your usual background image will show up. Now try adding some more images to the folder.
You can call them what you want, but you will want to ensure that they’re the same dimensions as the default.jpg image, and that they’re not too huge as this could slow down load speeds on slower internet connections.
That’s it!
Go on... click it... you know you want to!
Related Posts