New Background Image on each page reload

6 comments

1. Have you seen this page in the wordpress codex?

   It explains how to rotate the header image. It shouldn’t be too hard adapt it for your needs.

   Log in to Reply

2. Just have your own script that randomly returns pictures each time it is accessed. I have one that I wrote in C at the URL below that returns a different pic each time.

   http://www.scale18.com/cgi-bin/gpic

   Log in to Reply

3. You can generate it in realtime with GD library

   Log in to Reply

4. To detect screen resolution, you can use client-side javascript

   screen.height
   screen.width
   

   To display a different image, you could probably use a script to generate a random number and display the image that ties to it…?
   You could store the “current” imaage in the session and just check each time you generate a new random number, that it’s not going to display the last….

   Log in to Reply

5. This is what I use with WordPress to randomly rotate the header images on my site.

   Someone else wrote the code and I can’t remember who. Put the php code below into a file named rotate.php, and then put rotate.php into the directory of images that are to be rotated (i.e. “headerimages”), and rotate.php will draw from them. Call rotate.php from your CSS style sheet in whatever DIV is used for your headerimage.

   I don’t understand what you mean by being able to handle different screen resolutions. End user screen resolutions?

   <?php
   
   
   /*
   
       Call this way: <img src="http://example.com/rotate.php">
   
   
       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 = '.';
   
   
       $extList = array();
       $extList['gif'] = 'image/gif';
       $extList['jpg'] = 'image/jpeg';
       $extList['jpeg'] = 'image/jpeg';
       $extList['png'] = 'image/png';
   
   
   $img = null;
   
   if (substr($folder,-1) != '/') {
       $folder = $folder.'/';
   }
   
   if (isset($_GET['img'])) {
       $imageInfo = pathinfo($_GET['img']);
       if (
           isset( $extList[ strtolower( $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( $extList[ strtolower( $file_info['extension'] ) ] )
           ) {
               $fileList[] = $file;
           }
       }
       closedir($handle);
   
       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);
       readfile($img);
   } else {
       if ( function_exists('imagecreate') ) {
           header ("Content-type: image/png");
           $im = @imagecreate (100, 100)
               or die ("Cannot initialize new GD image stream");
           $background_color = imagecolorallocate ($im, 255, 255, 255);
           $text_color = imagecolorallocate ($im, 0,0,0);
           imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
           imagepng ($im);
           imagedestroy($im);
       }
   }
   
   ?>
   

   Log in to Reply

6. JavaScript is probably your best bet for this one.

   Log in to Reply