MyBB Community Forums

Full Version: Random Image on Refresh
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey there~

I'm not very knowledgeable when it comes to coding but I was trying to make the background of my forum change every time you refresh, when I noticed I couldn't find the body tag to call the function with Javascript I went on to try php but I just couldn't do it (got super lost), how would I go on about this?
You can do this using php pointing as image. Here is an enample to randomize your header image, customize as your won changing the case of header image to background:

If your theme is using a header image; you can simply randomize it, means it will show a new image everytime you load the page.

Create a .php file using the following code:
<?php 


    $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); 
    } 
} 
?>

Save it as "random.php" in a folder "header".

Now, create as many header images as you like. Name all those images in a serial no. like: 1.png, 2.png, 3.png and so on ...

Remember to maintain dimension while creating header images as per your theme's header image size.

Now, upload the "header" folder (containing .php and all the header image files) to your "images" folder.

Locate the path of your header image in "global.css"

This should be like this (depends on theme, you have to identify searching with the name of your current header image):

.banner {
	background: url(images/banner.gif) no-repeat;
	width: 1000px;
	height: 200px;
	margin: auto auto;
}

Now, change the line:
background: url(images/banner.gif) no-repeat;

to

background: url(images/header/random.php) no-repeat;

Save it. Done.

Now it will randomly choose any of the images you've created and uploaded and display everytime you load the page.

You can create and upload as many images as you want. Just:
1. Maintain the dimension size
2. Maintain the naming of image file with serial nos. as shown.
3. Put all the files in a same directory where your random.php is.
It's not for my header image, as I said in the post it's for my background... I know what I can do for the header I need it for my body background.
(2012-11-09, 01:16 PM)FullMetalBabe Wrote: [ -> ]It's not for my header image, as I said in the post it's for my background... I know what I can do for the header I need it for my body background.
Home » Themes » your theme
Editing global.css

example:
body {
	background: url(images/header/random.php) no-repeat;
	color: #000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
	text-align: center; 
	line-height: 1.6em;
	margin: 0;
	text-align: center;
}
Thanks <3
I've shown you the trick man. In that case also you have to make that php to point all those images.

It was a ready tutorial I documented for a site so I just put that content instead of writing the whole tutorial. Just go through it please and I'm sure you will get a clear idea on what to do ...

edit: oops, ninja'd :p
I think I'll stick with the php snippet one I found, you just answered my doubt of being able to put anything other than image extensions on my background.

Thanks anyways.
For you script, make sure it doesn't uses image manipulation functions (?) or anything like that, a simple redirect to the images will work.