Pull dedicated images from folder - show image + filename (strip part of filename + file-extension)

Question

based on the original code in this question and Tims correction over there (answer 1) I'm trying to achieve the following:

I have a folder "img" containing images as follows:

• image_123.jpg
• image_123_alternate.jpg
• image_456.jpg
• image_456_alternate.jpg
• image_789.jpg
• image_789_alternate.jpg
• and so on...
  (Note: all images have the same size of 200px/200px)

When pulling from the "img" folder the simple HTML page should display images and filenames in the following fashion:

The actual images that contain the "_alternate" part in their filename (and only these) + the image filename not containing the "_alternate" part (without the file-extension) underneath the image in a textbox. All pairs should be pulled in an alphabetical order. In the example below bold capital letters indicate the actual image to be displayed:

IMAGE_123_ALTERNATE
textbox: "image_123"

IMAGE_456_ALTERNATE
textbox: "image_456"

IMAGE_789_ALTERNATE
textbox: "image_789"

This is what I have so far but this displays all images and filenames:

<?php
$dir = opendir("img");
while (($file = readdir($dir)) !== false)
{
echo "<a href='img/".$file."' target='_blank'> <img src='img/".$file."'width='200' height='200' /></a><br />";
echo "<textarea>$file</textarea><br /><br />";
}
closedir($dir);
?> 

Any help would be much appreciated!

Thanks a lot!

Answer 1

Just through an if statement in your while loop. Check if the file name contains alternate or or not. If it doesn't contain alternate run your same code replacing the file extension with "_alternate.ext" while keeping the text area the same. If it does contain alternalte, do nothing. That way you are only processing half the files.

Answer 2

This code should display a list of all images in alphabetical order (using PHP's GLOB function).

It then outputs a HTML image (leading to the "_alternate" image) and the image's filename (without the path, "_alternate" or "extension").

<?php

    foreach (glob("img/*_alternate.jpg") as $file) {

         $filename_parts = pathinfo($file);
         $filename = $filename_parts['filename'];
         $filename = str_replace("_alternate", "", $filename);

         echo "<div>";
         echo "<img src=\"/$file\" width=\"200\" height=\"200\" />";
         echo "<p>$filename</p>"; 

    }

?>

I have broken apart the functions that find the new filename and the parts that output the HTML code to make it easier to read and understand, you could merge these into one function if you wanted to.

Answer 3

$files = new \DirectoryIterator('img'); // <- this should be the full absolute path!
$images = array();

// pick up jpg images that end in 'alternate'
foreach($files as $file){
  $name = $file->getBasename('.jpg');
  if(strripos($name, 'alternate') === (strlen($name) - 9))
    $images[] = $name;        
}

// sort them
sort($images, SORT_STRING);

// and do your thing here with $images...
var_dump($images);