Fetch all images from dir and sort two by two using php

Question

I have a slider where I show two vertical images ( image reference ) at once and am using slick slide to use a slider - it works fine, but I am now trying to code something that will enable me to just specify in the database what folder to pick the images from and then sort each two into appropriate template.

I thought of foreach function first, but I am unsure how to code that...

So, what can I do? I want to echo the images out in this type of template:

<div class="slider_image_div">
            <div class="slider_image_column">
            <img  class="image_slider_vertical" src="../images/portfolio/projects/icelandicmistadventure/1.jpg">
            </div>
            <div class="slider_image_column">
            <img  class="image_slider_vertical" src="../images/portfolio/projects/icelandicmistadventure/2.jpg">
            </div>
    </div>

I tried to start by fetching all images in specified folder and sort them in the array, but I can't sort the numeric names to that of the keys to make them in a proper order...

This my code so far:

$dir = '../images/portfolio/projects/icelandicmistadventures/';
$files2 = scandir($dir);
natsort($files2);

echo '<pre>'; print_r($files2); echo '</pre>';
echo $files2[3];

Which gives me this result:

    Array
(
    [0] => .
    [1] => ..
    [2] => 1.jpg
    [3] => 10.jpg
    [4] => 11.jpg
    [5] => 12.jpg
    [6] => 13.jpg
    [7] => 14.jpg
    [8] => 15.jpg
    [9] => 16.jpg
    [10] => 2.jpg
    [11] => 3.jpg
    [12] => 4.jpg
    [13] => 5.jpg
    [14] => 6.jpg
    [15] => 7.jpg
    [16] => 8.jpg
    [17] => 9.jpg
)

Edit: I've managed to put the fetched images in an array grouped by the numeric order (keys are not changed, not sure if it has any relevance?) and in pair of 2. But I want to access the arrays and group them in two using array_chunk so that in my loop I will echo out the two images in the array, rather to have them ALL on a seperate "line" so to speak.. So that a new div is created after those two have been outputed in html. I'm not sure if I have to do a count or w/a, but doesn't seem like neat coding...

    Array
(
    [0] => Array
        (
            [9] => 1_icewall.jpg
            [10] => 2_leaningman.jpg
        )

    [1] => Array
        (
            [11] => 3_ledgeman.jpg
            [12] => 4_mightyfall.jpg
        )

This is the code I attempted to make, but it just puts out each array on a separate line

    foreach($files2 as $x)
  {
 foreach($x as $group=>$image)
  {
      echo  "<br>" . $image . "<br>";
  }
  }

Answer 1

You can use glob as glob("*.jpg") and then you will not need filter.

If you want to use scandir (as you doing now) you can filter the array later. Afterward, compare the picture name as numbers to get the proper order.

Consider the following example:

$arr = array(".", "..", "1.jpg", "11.jpg", "12.jpg", "2.jpg", "3.jpg");
function cmp($a, $b)
{
        $a = intval(substr($a, 0, -4)); // -4 is the length of ".jpg"
        $b = intval(substr($b, 0, -4));
        if ($a == $b)
                return 0;
        return ($a < $b) ? -1 : 1;
}
$arr = array_filter($arr, function($name) {return (substr($name, -4) === ".jpg");});
usort($arr, "cmp");

This will result in:

Array
(
    [0] => 1.jpg
    [1] => 2.jpg
    [2] => 3.jpg
    [3] => 11.jpg
    [4] => 12.jpg
)

Edit

As @kerbholz meantion I assume folder contain only jpg - if you have more types change code as his comment.

Regarding to chunks of 2:

$chunksNum = 2;
$chunked = array_chunk($arr, $chunksNum);

// if you want to echo all of the file
foreach($chunked as $key => $chunk) {
    echo "Chunk $key: \n";
    foreach($chunk as $key => $value)
            echo "\t Picture $key: $value \n";
}

echo $chunked[1][0] . PHP_EOL; // if you want to get specific file 
                               // first index is the chunk num and second is the file num in chunk