Shuffled Images

This article describes how to shuffle and publish images found in a particular directory. The images in the directory may be miscellaneous unsorted, or the images may be sets of portraits like coins, animals, playing cards, vacation photos, product images, … .

The PHP code will find all the JPEG, PNG, and GIF images in the directory you specify. It shuffles those images. Then it publishes the images to your web page.

To publish the images to your web page, the PHP code uses a template that you provide.

After the PHP code gets a list of the image files in the specified directory, these are the steps it goes through to publish them on your web page.

For each image found in the directory:

1. The image file name is inserted into the src attribute value of the img tag within the template.

2. The updated template is published to your web page.

Every image is put through those 2 steps.

A bit below is a demonstration of what the PHP code does. The demonstration images are linked.

When you make your image template, links and other HTML is optional. The only requirement for the template is an img tag. (Template information is below the source code that follows the demonstration.)

Every time this page is loaded, the 4 images in the demonstration are reshuffled. (It is possible that the result of a subsequent shuffle is identical to the previous one. The more items to shuffle, the less is that possibility.)

The demonstration:

Before the PHP code can be used, you will need a directory on your domain's server that contains images. The code will publish all applicable images in that directory. (Applicable images have .jpeg, .jpg, .png, or .gif file name extensions.)

Make a note of the directory with the images to publish. The directory location will be needed when you customize the PHP code.

The PHP source code —

Here is the PHP source code. Customization notes follow.

<?php /*
Publish Shuffled
Version 1.0
August 6, 2022
Will Bontrager Software LLC
https://www.willmaster.com/
*/

/*** Customization ***/
// Specify the image directory.
$ImageDirectory = '/specialimages';

// Between the lines containing TEMPLATE, specify the template to use for publishing the images.
// Use {{FILENAME}} as a placeholder for the image file name.
$ImageTemplate = <<<TEMPLATE
<img 
   src="https://example.com/specialimages/{{FILENAME}}"
   style="margin:0 10px 10px 0; max-width:250px;">
TEMPLATE;
/*** End of customization ***/

$imgFiles = array();
$ImageDirectory = preg_replace('!/*$!','',$ImageDirectory);
$ImageDirectory = preg_replace('/^'.preg_quote($_SERVER['DOCUMENT_ROOT'],'/').'/','',$ImageDirectory);
$ImageDirectory = "{$_SERVER['DOCUMENT_ROOT']}$ImageDirectory";
foreach( glob("$ImageDirectory/*") as $f )
{
   if( ! preg_match('/\.(jpg|jpeg|png|gif)$/i',$f) ) { continue; }
   $imgFiles[] = preg_replace('!^.*/!','',$f);
}
shuffle($imgFiles);
foreach($imgFiles as $img) { echo str_replace('{{FILENAME}}',$img,$ImageTemplate); }
?>

Customization notes —

I assume you already have a directory on your domain's server that contains images to be published with the PHP code. Specifying the location of that directory is the first of two customizations.

1. In the PHP source code, replace /specialimages with the location of the directory with the images to be published.

2. Create an img tag to display one of the images in that special directory. Give it any CSS styles you wish the image to have.

   Now, make the img into a template by replacing the image file name with the {{FILENAME}} placeholder.

   In the PHP source code, replace this

   <img 
      src="https://example.com/specialimages/{{FILENAME}}"
      style="margin:0 10px 10px 0; max-width:250px;">
   

   with your template.

That is all for the customizations.

To use the PHP code, paste it into your web page where you want the shuffled images to publish. Right there is where the images found in the special directory will appear.

(This article first appeared in Possibilities newsletter.)

Will Bontrager