Author Topic: How would you add rotating background images  (Read 13650 times)

Offline tampaba1

  • Jr. Member
  • **
  • Posts: 120
    • Th3Forum
How would you add rotating background images
« on: September 20, 2008, 09:07:13 PM »
I have designed a template which uses transparent elements and would like to rotate the background images on page refresh. I want to hard code into the template so no special mods are needed. Does anyone know how I would do this?
Light a candle against online child abuse!!

Offline brianjw

  • SMF Hero
  • ******
  • Posts: 2,154
  • Gender: Male
Re: How would you add rotating background images
« Reply #1 on: September 20, 2008, 10:59:42 PM »
You wouldn't be able to do this via CSS *I THINK*. But you should be able to do this through a table background. It actually is possible to do this. Just add:
Code: [Select]
background-image: url(images/background/random.php);to any style inside of your themes style.css AFTER FOLLOWING THE BELOW INSTRUCTIONS

Here are instructions on how to do it:

1.) Open up your favorite web page editor. (SOMETHING OTHER THAN A WORD PROCESSOR)

2.) Copy the below code, paste in a php format page.
Code: [Select]


Version 2.2 - December 4, 2003
Copyright (c) 2002-2003 Dan P. Benjamin, Automatic, Ltd.
All Rights Reserved.

Automatic, Ltd. makes no representations or warranties about
the suitability of the software, either express or
implied, including but not limited to the implied
warranties of merchantability, fitness for a particular
purpose, or non-infringement. Dan P. Benjamin and Automatic, Ltd.
shall not be liable for any damages suffered by licensee
as a result of using, modifying or distributing this
software or its derivatives.

This PHP script will randomly select an image file from a
folder of images on your webserver.  You can then link to it
as you would any standard image file and you'll see a random
image each time you reload.

When you want to add or remove images from the rotation-pool,
just add or remove them from the image rotation folder.

Version 1.0
- Release version

Version 1.5
- Tweaked a few boring bugs

Version 2.0
- Complete rewrite from the ground-up
- Made it clearer where to make modifications
- Made it easier to specify/change the rotation-folder
- Made it easier to specify/change supported image types
- Wrote better instructions and info (you're them reading now)
- Significant speed improvements
- More error checking
- Cleaner code (albeit more PHP-specific)
- Better/faster random number generation and file-type parsing
- Added a feature where the image to display can be specified
- Added a cool feature where, if an error occurs (such as no
  images being found in the specified folder) *and* you're
  lucky enough to have the GD libraries compiled into PHP on
  your webserver, we generate a replacement "error image" on
  the fly.

    Version 2.1
        - Updated a potential security flaw when value-matching

    Version 2.2
        - Updated a few more potential security issues
        - Optimized the code a bit.
        - Expanded the doc for adding new mime/image types.

        Thanks to faithful ALA reader Justin Greer for
        lots of good tips and solid code contribution!

1. Modify the $folder setting in the configuration section below.
2. Add image types if needed (most users can ignore that part).
3. Upload this file (rotate.php) to your webserver.  I recommend
   uploading it to the same folder as your images.
4. Link to the file as you would any normal image file, like this:

<img src="">

5. You can also specify the image to display like this:

<img src="">

This would specify that an image named "gorilla.jpg" located
in the image-rotation folder should be displayed.

That's it, you're done.


/* ------------------------- CONFIGURATION -----------------------

Set $folder to the full path to the location of your images.
For example: $folder = '/user/me/';
If the rotate.php file will be in the same folder as your
images then you should leave it set to $folder = '.';


$folder '.';


Most users can safely ignore this part.  If you're a programmer,
keep reading, if not, you're done.  Go get some coffee.

    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.

For example:

PDF Files:

$extList['pdf'] = 'application/pdf';

    CSS Files:

        $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';

// You don't need to edit anything after this point.

// --------------------- END CONFIGURATION -----------------------

$img null;

if (
substr($folder,-1) != '/') {
$folder $folder.'/';

if (isset(
$_GET['img'])) {
$imageInfo pathinfo($_GET['img']);
if (
    isset( $extListstrtolower$imageInfo['extension'] ) ] ) &&
file_exists$folder.$imageInfo['basename'] )
    ) {
$img $folder.$imageInfo['basename'];
} else {
$fileList = array();
$handle opendir($folder);
while ( false !== ( $file readdir($handle) ) ) {
$file_info pathinfo($file);
if (
    isset( $extListstrtolower$file_info['extension'] ) ] )
) {
$fileList[] = $file;

if (count($fileList) > 0) {
$imageNumber time() % count($fileList);
$img $folder.$fileList[$imageNumber];

if (
$img!=null) {
$imageInfo pathinfo($img);
$contentType 'Content-type: '.$extList$imageInfo['extension'] ];
header ($contentType);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100100)
    or die ("Cannot initialize new GD image stream");
$background_color imagecolorallocate ($im255255255);
$text_color imagecolorallocate ($im0,0,0);
imagestring ($im255,  "IMAGE ERROR"$text_color);
imagepng ($im);


3.) Save as rotate.php

4.) Upload to your ./<dir_to_smf>/Themes/<your_theme>/images/background
If you need to make a folder called background than make one inside of Themes/<your_theme/images

5.) Upload roate.php to the new folder called background inside of your theme. Choose background images you want to randomly rotate and put them in /background/ as well. It doesn't matter what the image files are called. The only requirement is they must be one of these image formats: gif, jpg, jpeg, png

6.) Inside wherever you want the images to rotate. Probably in a table. Use a code like below:
Code: [Select]
<table background="', $settings['images_url'], '/background/rotate.php">

It should now rotate through all images inside of the background as long as you link it to the php file. This should work, and I know the code I provided works because I use it on my site for different purposes.

To test the actual rotation of the images, just run this url directly in your browser.<dir_to_smf>/Themes/<your_theme>/images/background/rotate.php

Hope this helps ;D
« Last Edit: September 20, 2008, 11:03:36 PM by brianjw »

Offline tampaba1

  • Jr. Member
  • **
  • Posts: 120
    • Th3Forum
Re: How would you add rotating background images
« Reply #2 on: September 21, 2008, 03:44:03 AM »
Thank you. That's basically the script I've been working with. Apparently, I was using the wrong image call code. Works like a charm now.

Thanks again.
Light a candle against online child abuse!!

Offline WaveZtream

  • Semi-Newbie
  • *
  • Posts: 34
Re: How would you add rotating background images
« Reply #3 on: March 09, 2010, 05:13:41 PM »
I know this post it old but it seems to work to some part. Well the rotator works but can't get step 6 to work :/