OK, this is just a cute idea of keeping your webpage interesting and fun by having your page’s background changing by each request. You can do other cool stuff, but in this tutorial, we’ll settle with just random background for each visit.
So, the scenario goes like this:
Imagine you have a bunch of backgrounds that you want to apply them in your website and in the same time, you don’t want to mess up your styling and theme. Something that plays nice with your CSS theme and all.
The obstacle here is that you already HAVE a CSS sheet and it’s just wrong to tamper with it.
We’re not going there fortunately. There’s a silly and smart workaround.
Lets assume you have a folder named “images” where all your backgrounds are in. You’ll need two files:
- index.php
- functions.php
Why? Because “index.php” will printout the HTML code and call functions from “functions.php”. Let’s take a look at how “index.php” would look like:
<?php include('functions.php');?>
<!DOCTYPE html>
<html>
<head>
<title>Randomized background</title>
</head>
<body <?php get_background();?>>
<h1>Randomized background</h1>
<p>This is a demo to show how to get a randomized background</p>
<p>Just dump a bunch of pictures in the "images" folder and it'll choose a random picture on each request</p>
<p>It'll be more fun if you mix databases to request background based on timeframe, occasion, and few rules</p>
</body>
</html>
And this is how “functions.php” looks like:
<?php
function get_background()
{
$backgrounds = scandir("images");
echo "style='background-image:url(images/" . $backgrounds[rand(2,count($backgrounds)-1)] . ");'";
}
?>
Alien language? Here’s a good explanation:
First, we write our index.php file normally. But in the <body> tag, we add its styling. Doing this will override the specific styling we provided in that tag over what we previously defined in the CSS file. But only what we write in that <body> tag. As in, if we wrote “style=’background-image:url(whatever.png);'”, that means we’re only overriding the background source. Not width, height or whatever. Which means they remain as is but we only override the background-image.
So instead of opening up index.php, rewriting the file, closing it, then displaying it. Why not echo it from a function? That’s why we made a function called “get_background()” which is included in “index.php” and called from it through functions.php”.
What “get_backgrounds()” function does is:
- Scan “images” folder for files (All files. including “.” and “..”) and save them in an array.
- Choose a random number from 2 to the end of the array by using “count()” function to count the array limit.
Why starting from 2? Because 0 is “.” and 1 is “..”. We don’t want those.
Why “count() – 1” instead of just count? Because count() counts the the entries. But the last index of the entry is count – 1. so “count() – 1” - Echo the result between “style=’background-image:url(” and “);'”.
Basically that’s it. You’re done.
Now you have a function that uses a random background with for each request.
Wanna try some fun stuff? Try having a function that checks your SQL database for available entries. You can do stuff like thiBas:
- Retrieve result based on occasion.
- Give statistics on the most used background for statistical purposes
- Using some image processing libraries, you can add watermarks and stuff to the picture based on your database (Perhaps artist’ name and signature?)
- Change between background images and colors.
I hope this PHP quickie is useful. I’ll try to come up with useful quickies for future needs 😀
Resources:
Funny cause not 5 days ago I came up with the almost exact same code but rather for random images in general … which is the same ..
lulz at skipping . and .. – was a bug for me
btw, i think the code would look nicer if you use an online code highlighting service or if you use the pre/code HTML tags
I actually forgot about pre!!