如何使用混合图像和缩略图循环数组？

Question

I try to dynamically populate an HTML page with 2 images, the first a full image and the second a reduced image, but as I can not do AND with a foreach.

In fact, the code is ok, but I want populate my HTML with twos pics of the same folder; but this code bring back all pictures, it doesn't no the diff between the Full image and the Thumbnail.

The script bring back all picture. My folder contain images with specific titles:

Full Image = *.jpeg
Thumbnail = *_Low.jpeg

I would like to be able to modify my code to insert the full in the first line and the thumbnail in the second line.

<?php

$dir    = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
array().sort();
$nb = 1;    
foreach($files as $file) {
if(fnmatch('*.jpg',$file)) {
$images[] = $file;
}
}

var_dump($images);

foreach ($images as $image)  {


echo  '<div class="cbp-item">'.'<a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/'.$image.'">'."
"
        .'<div class="cbp-caption-defaultWrap">'.'<img src="style/images/art/mairie/'.$image.'" alt="" /> </div>'."
"
        .'<div class="cbp-caption-activeWrap">'."
"
          .'<div class="cbp-l-caption-alignCenter">'."
"
            .'<div class="cbp-l-caption-body">'."
"
              .'<div class="cbp-l-caption-title"><span class="cbp-plus">'.'</span></div>'."
"
            .'</div>'."
"
          .'</div>'."
"
        .'</div>'."
"
        .'<!--/.cbp-caption-activeWrap --> '."
"
        .'</a> </div>'."
";



}   


?>  

for the second line I would like to bring back the reduced photo, so to have

<div class="cbp-caption-defaultWrap"><img 
src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" /> 
</div>

$images

Part of my $images array would look like this:

$images = [
    "0" => "Maurine_Tric-7399.jpg",
    "1" => "Maurine_Tric-7399_Low.jpg",
    "2" => "Maurine_Tric-7407.jpg",
    "3" => "Maurine_Tric-7407_Low.jpg",
    "4" => "Maurine_Tric-7414.jpg",
    "5" => "Maurine_Tric-7414_Low.jpg",
];

Desired Output

I'm trying to add one of the URLs in my array with large images, and the other with its thumbnail which are being differentiated with _Low:

<div class="cbp-item"><a class="cbp-caption fancybox-media" data-rel="portfolio" href="style/images/art/mairie/Maurine_Tric-7399.jpg"> <div class="cbp-caption-defaultWrap"><img src="style/images/art/mairie/Maurine_Tric-7399_Low.jpg" alt="" /> </div>

Answer 1

Just use preg_match() instead of fnmatch(), matching only the thumbail images and marking the part before _Low.jpg as Subpattern. Then you can easily construct the filename of both images from that stub:

<?php

$dir = './style/images/art/mairie/';
$files = scandir($dir);
$images = array();
array().sort();   
$matches = NULL;
foreach ($files as $file) {
    if (preg_match('/^(.+)_Low\.jpg$/', $file, $matches)) {
        $images[] = $matches[1];
    }
}
foreach ($images as $image) {
    echo '<div class="cbp-item"><a class="cbp-caption fancybox-media" data-rel="portfolio" href="' . $dir . $image . '.jpg"> <div class="cbp-caption-defaultWrap"><img src="' . $dir . $image . '_Low.jpg" alt="" /></div>';
}

?>