How to filter or find in AJAX callback results from PHP listing files from directory

Question

Trying to display all photos from a directory in a div. Looking to show all portraits first, then squares, then landscapes last. Will align and style later, but first I just need a point in the right direction on how to sort the results of a callback.

do1.php

if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['showphotos'])) {
    $af = glob("main/photos/*.*");
    for ($i=0; $i<16; $i++) {
        $iname = $af[$i];
        $supported_format = array('gif','jpg','jpeg','png','mp4');
        $ext = strtolower(pathinfo($iname, PATHINFO_EXTENSION));
        if (in_array($ext, $supported_format)) {
            list($width, $height) = getimagesize($iname);
            if( $height / $width > 1.15) {
                $ori = "p";
            } elseif( $width / $height > 1.15) {
                $ori = "l";
            } elseif( $height / $width < 1.15) {
                $ori = "s";
            } elseif( $width / $height < 1.15) {
                $ori = "s";
            }
            echo "<img class='".$ori.":' title='".$ori.$iname."' src='".$iname."' alt='".$iname."' height='300px' />";
        } else {
            die("something went terribly wrong you ditz!");
        } 
    } 
    exit;
}

The above gets all the files, determines whether portrait/landscape/square, and sets a className of s, l, or c.

Script on Index.php

$(document).ready(function(){
  $("#galphoto").click(function(){
    $("#chme").children().hide(2000, function() {
        $("#supics").delay(2000).slideDown(2000);
        var id1 = 1;
        $.ajax({
                url:'do1.php',
                type:'POST',
                data:{showphotos: id1},
                success: function(pics){
                    $('#supics').html(pics);
                }
            }); 
        }); 
    }); 
});

Of course this puts all of the images into the div. I thought I could filter them somehow by assigning each image a class name based on there orientation, but after many trials and errors I haven't succeeded. I know there must be some simple thing like attr('.p') or something. If this question is a duplicate please point me to the correct page. Thanks for any help.

Answer 1

To achieve the results I needed to use .load instead of an ajax call.

First I edited do1.php by taking out the if($_SERVER["REQUEST_METHOD"]... and then changed the ehco statement to add a unique id.

do1.php

  $af = glob("main/photos/*.*");
  for ($i=0; $i<24; $i++)
      {
      $iname = $af[$i];
      $supported_format = array('gif','jpg','jpeg','png','mp4');
      $ext = strtolower(pathinfo($iname, PATHINFO_EXTENSION));
      if (in_array($ext, $supported_format))
        {
              list($width, $height) = getimagesize($iname);
                if( $height / $width > 1.33) {$ori = "p";}
                elseif( $width / $height > 1.33) {$ori = "l";}
                elseif( $height / $width < 1.33) {$ori = "s";}
                elseif( $width / $height < 1.33) {$ori = "s";}
        }
echo "<img id='i".$i."' class='".$ori."' src='".$iname."' alt='".$iname."' height='280px' />";
      }

So now the page does not need to be AJAX, called just loaded. Also; Each image is assigned a unique id id='i0', id='i1', id='i2'..., and each element has an assigned class based on it's orientation (portrait=p, landscape=l, square=s).

Next I added three span elements (#c1, #c2, #c3) into the div where I wanted the content to show (#supics).

Next I edited my script to LOAD from do1.php insted of using the AJAX POST.

Script on Index.php

$(document).ready(function(){
  $("#galphoto").click(function(){
    $("#chme").children().hide(2000, function() {
            $("#supics").delay(2000).slideDown(3000);
            $("#supics").css({"max-height": "700px", "overflow": "auto"});
var $page = $('<div><div>').load('do1.php .p, .s, .l', //loads elements with classes of p, s, & l from do1.php
    function() {
var $p = $page.find('.p'); //finds all class='p' elements & assigns $p as variable to them
var $s = $page.find('.s'); //finds all class='s' elements & assigns $s as variable to them
var $l = $page.find('.l'); //finds all class='l' elements & assigns $l as variable to them

    var ipics = [$p, $s, $l]; //putting variables in an array
    $('#c1').html(ipics[0]); //puts $p (all class.p elements) into element with id='c1'
    $('#c2').html(ipics[1]); //puts $s (all class.s elements) into element with id='c2'
    $('#c3').html(ipics[2]); //puts $l (all class.l elements) into element with id='c3'

       $(ipics[0]).addClass("fad"); //adds another class to all class.p elements for extra styling
       $(ipics[1]).addClass("fid"); //adds another class to all class.s elements for extra styling
       $(ipics[2]).addClass("fod"); //adds another class to all class.l elements for extra styling
      });
    });
  });
});

This may be dirty (though I'm no judge at determining that), but it allows me to load everything I need at once, then sort the content, and style it all anyway I need. I hope this helps someone out. Thank you all for the help.

Answer 2

And this is the jQuery Solution !

var classes = $('img').map(function() {
    return $(this).attr('class');
});

var sortedArray = classes.sort();
var uniqueClasses = $.unique(sortedArray);
$(uniqueClasses).each(function(i, v)
{
    $('.'+v).wrapAll('<div class ="orientation-'+v+'"></div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="l" title="$ori.$iname" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Stanis%C5%82aw_Mas%C5%82owski_%281853-1926%29%2C_Autumn_landscape_in_Rybiniszki%2C_1902.jpeg/220px-Stanis%C5%82aw_Mas%C5%82owski_%281853-1926%29%2C_Autumn_landscape_in_Rybiniszki%2C_1902.jpeg" alt="$iname" height='300px' />
<img class="p" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Reproduction-of-the-1805-Rembrandt-Peale-painting-of-Thomas-Jefferson-New-York-Historical-Society_1.jpg/170px-Reproduction-of-the-1805-Rembrandt-Peale-painting-of-Thomas-Jefferson-New-York-Historical-Society_1.jpg"  alt="$iname" height='300px' />
<img class="l" src="https://upload.wikimedia.org/wikipedia/commons/5/50/1172_ruwenzori.jpg"  alt="$iname" height='300px' />
<img class="c"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Regular_polygon_4_annotated.svg/1200px-Regular_polygon_4_annotated.svg.png" alt="$iname" height='300px' />
<img class="l" title="$ori.$iname" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Stourhead_garden.jpg/220px-Stourhead_garden.jpg" alt="$iname" height='300px' />

Answer 3

Instead of outputting the result directly, place the results of your orientation check into one of 3 arrays.

Then loop over those arrays outputting what you want, you will also be able to change the attributes to fit the orientation this way.

$port = [];
$land = [];
$sqar = [];
$supported_format = array('gif','jpg','jpeg','png','mp4');

$files = glob("main/photos/*.*");

foreach ($files as $file) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    if (in_array($ext, $supported_format)) {
        list($width, $height) = getimagesize($iname);

        if( $height / $width > 1.15) {
            $port[] = $file;
        } elseif( $width / $height > 1.15) {
            $land = $file;
        } elseif( $height / $width < 1.15) {
            $sqar[] = $file;
        } elseif( $width / $height < 1.15) {
            $sqar[] = $file;
        }
    }
}

$htm = '';
foreach ($port as $file) {
    $htm .= "<img class='port' title='p$file' src='$file' alt='$file' height='300px' />";
}
foreach ($sqar as $file) {
    $htm .= "<img class='sqar' title='s$file' src='$file' alt='$file' height='300px' />";
}
foreach ($land as $file) {
    $htm .= "<img class='land' title='l$file' src='$file' alt='$file' height='300px' />";
}

echo $htm;