URL to a random image

Question

I want to make something that I've not seen done in web development, but it seems possible. I want a URL that can be put into any arbitrary HTML <IMG/> tag or CSS background-image property that, when accessed, is a random image. I don't want the page to point or redirect to a random image, and I don't want it to display or embed a random image, as these things won't work with the above-stated requirements. I've seen solutions for displaying a random image in a webpage using Javascript to swap a property or hide an element, but this has to make the entire page the image, with no preceding or succeeding binary or ASCII data. I want it to be usable by people who don't know anything about programming. What I'm aiming for is something like this:

http://example.com/randomImage/

In theory, every time a page is loaded with this URL in the CSS or HTML, a random image will be displayed in the referenced element. It should work so that if you have several <IMG/> elements or several elements with their background-image referencing this page, they should all show randomly different images.

My first thought is to use PHP (in the structure described below) to look into a particular directory, pick an image file at random, and echo its binary data. If this is possible, then how would I go about doing it? If not, then does anyone have any other ideas?

My primary idea as pseudocode:

<?PHP
$chosenImage = getRandomFileFrom("./rand/");
$bytes = readFileAsBinary($chosenImage);
foreach($bytes as $byte){
    echo $byte;
}
?>

I don't care about true or pseudo-random. It could cycle each time for all I care; all I require in this endeavor is that multiple images can be referenced as a single URL

Answer 1

You certainly could do this with PHP.

First, choose a random file (see Select random file from directory )

function random_pic($dir = 'imagedir') {
    $files = glob($dir . '/*.jpg');
    if (!$files) return false;

    $file = array_rand($files);
    return $files[$file];
}

Then you can use the PHP readfile function to send it to the user. You can read up on it here: http://www.php.net/readfile see Example 1, which I've modified slightly below:

function outputImage( $filename ) {
    header('Content-Description: File Transfer');
    header("Content-type: image/jpeg");
    header('Content-Disposition: attachment; filename='.basename($filename ));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($filename ));
    ob_clean();
    flush();
    readfile($filename );
    exit;
}

Then pull it all together:

// Get a filename
$filename = random_pic();

// Check that a file was found
if (!$filename) {
    header('HTTP/1.0 404 Not Found');
    die();
}

// Output the image
outputImage( $filename );

You could also change the $files = glob($dir . '/*.jpg'); to look for different image formats, but you would also have to change outputImage to detect the format and set the Content-type type header to image/jpeg or image/png etc...

If you're only serving one type of image, you could always setup Apache to handle requests to 'randomImage.jpg' to a PHP script, and then the client browser would be absolutely none the wiser. For more info check out How to redirect all requests to a file, except images using Apache? (although you would of course be doing the opposite) Also check out Apache rewrite rules: http://httpd.apache.org/docs/current/rewrite/flags.html

I haven't tested this code, but it should work without too much effort. Hope that helps!

Answer 2

Are you running Apache? There's a RandomLocation Apache module that deals with this kind of thing. Their docs describe almost the exact thing you're trying to do.