[HOW TO] Generate Rotating Images Using PHP/CSS

[Ika]

This guide will outline how to create rotating images using PHP and CSS as the method. This method is utilized in the BF_Vista rotating backgrounds and also in the headers of two other styles, Black_Ice and Glacier - Both on my demo site, just use the refresh button there to try it out. The link is in my signature.

This can be applied to backgrounds, images or even ads. -This guide will cover how-to use this as a rotating background in two different ways. 1) As a full page background 2) As a background in a particular section of your page like a header. All with respect to phpBB but of course you can adapt this to just about anything.

1) Setting it all up
Create a folder in your theme/images folder within your style...
---You can call it "header" - "bg" or whatever you want to name it.

2) The PHP file
Place this PHP file in your newly created directory. (Either .rar or .zip downloads)

rotate.rar

(2.51 KiB) Downloaded 648 times

rotate.zip

(2.52 KiB) Downloaded 709 times

3) Images
Place any images you want to be in this rotation inside the newly created folder as well.
---I might suggest that you use images the same size and in this tutorial it is assumed they are all the same size (the exact size of the space you are trying to fill)

4) Open your stylesheet.
---The styleshhet you place it in will be dependent on the type of style base you are working with. For subsilver2 based styles, this is generally theme/stylesheet.css - For proSilver based styles this tutorial will place the changes in theme/colours.css

5) Adding the right CSS attributes
If you want to create headers with rotating backgrounds you will first need to create the confines in which you will put your background which is beyond the depth of this tutorial... However, let's assume you are applying this rotating background to a portion of your style that already uses a background image.

[Ika]

5a) Subsilver2 Rotating Header
---In this example I have already established a confined area in which I want to apply my rotating header. Then image that will be rotating is in this image behind the forum logo and description. In this image, the background features the orange globe.


In the overall_header.html I am using the following code:

Code: Select all

<div id="logodesc">
      <table width="100%" cellspacing="0">
      <tr>
         <td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
         <td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>
      </tr>
      </table>
   </div>

So as you can assume, we want to edit the logodesc class in the stylesheet.

To point the stylesheet to the rotating background, we simply add this code to the logodesc class:

Code: Select all

   background-image: url('./images/headers/rotate.php');
   background-repeat: repeat-x;

Notice the url is pointing to the script and NOT the image itself. The script will utilize ANY image in the folder with it.

5b) proSilver Rotating Header
---In this example I have already established a confined area in which I want to apply my rotating header. Then image that will be rotating is in this image behind the forum logo and description. In this image, the background features splash effect.



In the overall_header.html I am using the following code:

Code: Select all

      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <br>
            <h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>


So in this case you can assume we want to edit headerbar class in colours.css

To point the stylesheet to the rotating background, we simply add this code to the headerbar class:

Code: Select all

   background-image: url("{T_THEME_PATH}/images/headers/rotate.php");

Notice the url is pointing to the script and NOT the image itself. The script will utilize ANY image in the folder with it.

6) Save, Upload and Refresh your style!

[Ika]

Appendix: Using the script to rotate backgrounds like on BF_Vista

In this example all the images are 1600x1200px.

Add the following code to your "body" tag in stylesheet.css (subsilver2):

Code: Select all

background-image: url('./images/bg/bg.php');
   background-position: top center;
   background-attachment: fixed;
   background-repeat: no-repeat;

Note: In this code the folder created in the previous steps was called "bg" and the script was called "bg.php" and not "rotate.php" the name is not important as long as you have the right paths in the CSS.

Don't forget step 6!

[Ika]

If you have any questions this is the place for them, I may tweak some of the instructions above over the next few days.

Enjoy!

[jdh]

Chris, I would recommend putting your file in .zip format--it is more universal.

Nice tutorial. I have a php script I like better, though. I might post it later.

[Ika]

Thanks, sounds good.

[CoC Chris]

- Very nice, thank you -

There is a little typo in the css,

background-image: url("{T_THEME_PATH}'/images/headers/rotate.php");

,

Code: Select all

   background-image: url("{T_THEME_PATH}/images/headers/rotate.php");

[Ika]

thanks... that was a cut and paste error.

[eviL3 Igor]

Wow, that code is one mess. I'll clean it up for you

Spoiler:

Code: Select all

<?php

// set to a specific image (filename) if you like, for example $image = (isset($_GET['image'])) ? (string) $_GET['image'] : false;
$image = false;

// must contain a trailing slash
$directory = './';

// must be in the format 'extension' => 'mime type',
$extensions = array(
   'gif'   => 'image/gif',
   'jpg'   => 'image/jpeg',
   'jpeg'   => 'image/jpeg',
   'png'   => 'image/png',
);

$image_file = false;
if (is_string($image) && strlen($image))
{
   // check if file exists and make sure it is an image
   if (file_exists($directory . $image) && isset($extensions[strtolower(substr(strrchr('.', $image), 1))]))
   {
      $image_file = $directory . $image;
   }
}
else if (is_dir($directory))
{
   // loop through the directory
   if ($dh = opendir($directory))
   {
      $files = array();
      
      while (false !== ($file = readdir($dh)))
      {
         // make sure it's an image
         if ($file === '.' || $file === '..' || !isset($extensions[strtolower(substr(strrchr('.', $file), 1))]))
         {
            continue;
         }

         $files[] = $file;
      }

      closedir($dh);

      // make sure we actually have files
      if (sizeof($files))
      {
         $image_file = $directory . $files[array_rand($files)];
      }
   }
}

// we have an image, let's output it
if ($image_file !== false)
{
   header('Content-type: ' . $extensions[strtolower(substr(strrchr('.', $image_file), 1))]);

   readfile($image_file);

   exit;
}

?>

There - much better

[CoC Chris]

- it's broken.

For some reason that doesn't work on my site, put the old code back and it works again -