« Category images (and wrapping text around them) | Main | How to: Transparencies in webpages »

Movable Type

July 12, 2005

Random images

I've been asked a few times about how I get the picture in the background to change. The simple truth is that I let someone else do all the work.

Automatic Labs have a wonderful PHP script that does just that, without the need for mySQL or any configurations.

Create a new folder to contain your images and the PHP script. By far the easiest way is to use MT's Upload File menu option to create the directory and transfer the files. I actually uploaded mine to my webpage account, before I discovered the Upload File option hiding in plain sight.

It's now installed, configured and ready to run. You can type the address of the php script in your browser to check it out. Mine is over on layil, with three images.

Finally, to add it to your pages, use the php script as an image source, either in html, like this:
<img src="http://www.layil.org/images/MTBackgrounds/rotator.php"> or in the CSS (here's a little chunk of mine):


body {
margin: 0px 0px 20px 0px;
background-color: #788e9c ;
background-image: url(http://www.layil.org/images/MTBackgrounds/rotator.php);
background-repeat: no-repeat ;
background-position: bottom left ;
background-attachment: fixed;
margin : 0 0 0 0;
padding : 0 0 0 0;
width : auto;
}


For the diabolical, you could even combine this with the category images, by creating and uploading images and script to an images/category_name folder.


<img class="floatright" src="<$MTBlogURL$>images/<$MTEntryCategory dirify="1"$>/rotator.php" alt="<$MTEntryCategory remove_html="1"$>"/>

This would also work around the "all images must be either jpg or gif" issue with category images. The rotator will pic a random image from the category directory (as there's only one image in each directory, it'll be that picture for that category), and display whatever is there.

Scrawled illegibly by Meathe at July 12, 2005 11:22 AM

Comments