How to display a random image - works on external sites, blogs, etc

[trebor31]

Having searched here for a couple of days I have found quite a few people asking how to display a random image, but not found a solid answer... I now have a solution.

Please note I am talking about simply displaying 1 random image - for example on a launch page, your blog etc etc.

This does not provide a clickable link that choses an image for you. (this is covered by Ramin's Add-on: http://www.pixelpost.org/v1/index.ph...ads&details=41)

You need the following php:

PHP 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);
    }
}

?>

Paste this into a new text file and call it: random.php.
Place this file inside your "images" folder in your PP installation.

On your template (any template, not just image_template) add the following link wherever you want the image to appear:

<img src="images/random.php" alt="" style="height: 1px; width: 1px;" />

(change the width and height attributes to your image size!)

It will simply pick an image (at random!) from your "Images" folder each time the page is loaded.

You can link to the php from an external site, blog etc. (I have tested it on Movable Type, Blogger and from a friends site) and it will display the image.

And it will work exactly the same with your thumbnails folder if you prefer to display a random thumbnail (provided you put random.php in your Thumbnails folder and change the link obviously )

Hope it is useful to someone - it sure helped me!

Rob

A caviat - I cant provided answers to changes to the php code as I havent a clue about coding php!

[viesturs]

thanks!
remark - i assume, you meant line:
<img src="images/random.php" alt="" style="height: 1px; width: 1px;" />
instead of:
<img src="images/rotate.php" alt="" style="height: 1px; width: 1px;" />
?

also - question - now all the images are random, not only the first one. what should be done if i want only the first picture to be a random one and after this random image comes the latest added images!?
can you help me?

thanks!

[trebor31]

Originally Posted by viesturs

thanks!
remark - i assume, you meant line:
<img src="images/random.php" alt="" style="height: 1px; width: 1px;" />
instead of:
<img src="images/rotate.php" alt="" style="height: 1px; width: 1px;" />
?

You are absolutely right - thanks for spotting it - have changed my original post.

also - question - now all the images are random, not only the first one. what should be done if i want only the first picture to be a random one and after this random image comes the latest added images!?

Bear with me - it should be easy...off the top of my head you could either play with the Next link or set up the page showing the random image as in effect a splash page which has the "Next" link leading to the normal index page. I will check it out and post here once I have figured it out.

[viesturs]

thanks a lot! looking forward !

[trebor31]

Sorry it has taken me a while - I am no expert and have to figure things out by trial and error.

Unfortunately simply playing around with the "Next" Link, I couldnt get it to work. And having read around here even the authors suggest creating a second index or Splash Page as the best way to do this. See this thread:
http://forum.pixelpost.org/showthread.php?t=5714

Put your PixelPost Instalation in a folder.
Leave the "random.php" in the images folder of PixelPost as suggested above.

Create a splash page and put it one server level above this pixel post folder:

- Use "image_template: as the basis for the splash page so everything looks the same, but change any <PIXEL_POST_TAGS> to normal HTML tags.
- Where you want the random image, include the link as above to "random.php" -
<img src="/yourpixelpostfolder/images/random.php" alt="" style="height: 1px; width: 1px;" />
- Where you have your Previous/Next Links, drop the Previous Link, and change the Next Link to <a href="/yourpixelpostfolder/index.php">Next</a>
- Make sure that the CSS link in the head is adjusted to read the CSS of your Pixelpost.

This splash page doesnt have to be a server root level, it just above your pixel post folder.

Hope that helps.

[viesturs]

thanks a lot. i have understood the idea. but now the problem is that i'm not sure how to make a splash page. if i use a script for index2.php - what should i do in order to tell pixelpost to open "index2.php" instead of "index.php" by default when opening my webpage?
thanks,
.v

[Dkozikowski+]

For what you want to do, the easiest thing would be to place all your pixelpost files in a subfolder. If you do this, make sure you correct any links (if any) and update the options page in the admin interface to point to the new URL.

Then, just make a new index.php file in the root folder containing your splash page. From this page, link to your pixelpost index.php contained in your subfolder.

Just as a caution. Moving your pixelpost install will break any permalinks and bookmarks / etc.

[viesturs]

thanks! what do you mean by "just make a new index.php file in the root folder containing your splash page"? do i have to insert html cocde into new index.php?
also - do i have to reinstall pixelpost after dropping it unto a subfolder or everything will work well without reinstall?

[trebor31]

Hi
I have attached a jpg which shows how your server should be laid out.



You will see that there is an "index.php" in the folder "Your Server" (the root level). This should be a duplicate of the original index.php from Pixel Post, BUT, change any Pixel Post tags to html. On this one use the "random.php" link at the start of this thread. Then make the "Next" link and/or the image, link to the index.php that is inside the pixel post folder - therefore, using the attached example:- <a href="/pixelpost/index.php">.

Also, make sure that the index.php in "Your server" has the correct link to the CSS file inside your PixelPost templates, so that it all looks the same.

You shouldnt need to re-install your pixel post after dropping it into a folder, but you will have to update the path in the admin section to reflect the new location. (If it does break for whatever reason, just re-install anyway as it is quick and easy - I have had to do it several times after changing my mind about things!)

Hope that helps.

[viesturs]

thanks guys for helping me out!