Part Time developer, as my main job is a bricklayer.Be the first to write a review
Free! - PHP and CSS: random images and CSS positioning
Until recently I was unaware of the power of CSS and Its ability to integrate with other languages. I always thought that styles were static and had to be coded into the style sheet.
It was with a visit to A List Apart when I stumbled across a PHP article about Random Images by Dan Benjamin. As I’m only a newcomer to PHP, I was interested enough to read on and found it to be a great article & script. Another blog style site Relatively Absolute is a perfect working example of the Image rotation script as it uses one for generating random header images much like the ones I’m going to be demonstrating here. In fact Absolutely Relative inspired me to write this article because I liked the transparency illusion so much.
Until recently I was unaware of the power of CSS and Its ability to integrate with other languages. I always thought that styles were static and had to be coded into the style sheet.
It was with a visit to A List Apart when I stumbled across a PHP article about Random Images by Dan Benjamin. As I’m only a newcomer to PHP, I was interested enough to read on and found it to be a great article & script. Another blog style site Relatively Absolute is a perfect working example of the Image rotation script as it uses one for generating random header images much like the ones I’m going to be demonstrating here. In fact Absolutely Relative inspired me to write this article because I liked the transparency illusion so much.
The header that inspired me from Relatively Absolute
I had 2 issues I had to answer.
1. How do I assign a transparent image if IE doesn’t support it, and.
2. How do I get my random images into a background-image declaration in CSS.
Answering issue #1 was quite simple. I actually create the black faded bar with my image, hence me calling it an illusion as there is no image transparency. You’re simply creating a box in the top layer of your graphic and lowering its Alpha value until it becomes see-thru as you can see below.
One of the example images complete with faded bar.
All the .PNG files for the headers are supplied so you can see exactly how I’ve done this.
I’ll answer issue# 2 when we start looking at the CSS needed for the display.
Our Imaginary Site
For this example we’re going to need some images to rotate, the rotate script, a style sheet, and a page to view the images on.
Creating the Images
Let’s start by creating our images. I’ve made 5 header graphics 800x100 in Fireworks and named them header1.jpg through to header5.jpg
I’ve saved these to a folder on my server called headers
Image 1.1: Listing of header images in folder
The header images are for example purposes only.
Examining the Random Image PHP Script Options
In this example I’m going to be using the Basic Random Image script by Dan Benjamin. There is also another excellent script available on A List Apart called A Better Image Rotator alsoby Dan Benjamin, but for this article I will be talking about the Basic Version of the script.
For editing purposes I have removed most of the comments, and I will just show the actual PHP for configuration along with chosen comments that can add more functionality.
<?php
/* ------------------------- CONFIGURATION -----------------------
Set $folder to the full path to the location of your images.
For example: $folder = ‘/user/me/example.com/images/’;
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = ‘.’;
*/
$folder = ‘.’;
/*
If you’d like to enable additional image types other than
gif, jpg, and png, add a duplicate line to the section below
for the new image type.
Add the new file-type, single-quoted, inside brackets.
Add the mime-type to be sent to the browser, also single-quoted,
after the equal sign.
Example PDF Files entry:
$extList[‘pdf’] = ‘application/pdf’;
Example CSS Files entry:
$extList[‘css’] = ‘text/css’;
You can even serve up random HTML files:
$extList[‘html’] = ‘text/html’;
$extList[‘htm’] = ‘text/html’;
Just be sure your mime-type definition is correct!
*/
$extList = array();
$extList[‘gif’] = ‘image/gif’;
$extList[‘jpg’] = ‘image/jpeg’;
$extList[‘jpeg’] = ‘image/jpeg’;
$extList[‘png’] = ‘image/png’;
?>
Main options for PHP random image script
This is NOT the full script. The full code listing for the script can be found in the example folder in the file rotate.txt or in the headers folder as the file rotate.php
Full permission was granted by the author for reprint on DMX Zone.
Breaking apart the code, we have the folder url for the script.
/* ------------------------- CONFIGURATION -----------------------
Set $folder to the full path to the location of your images.
For example: $folder = ‘/user/me/example.com/images/’;
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = ‘.’;
*/
$folder = ‘.’;
Folder Options for the Random Image script
Only the very last line $folder = ‘.’; actually does anything. The rest you will notice is commented out with a basic instruction on how to set the folder path if the script is stored outside of the folder where the images are stored.
The path of ‘.’ Means the script will call itself from that directory. It is advised that the script be left setup to this default for greater reliability and performance.