Making Flexslider Responsive Based on Varying Image Sizes

Question

I am using the jQuery Flexslider plugin in order to display a little over 100 images. I have gotten them all to display using a foreach loop in php as seen below:

<?php foreach (glob('images/glob/*') as $filename): ?>
   <li> <img src="<?= $filename ?>"/> </li> 
<?php endforeach; ?>

My images all have the same height in 600px, but their widths are varying. Some are portrait images while others are landscape. I'm wondering if there is a way in php that I can add classes to style the two accordingly based on their widths.

For example:

if 
   ( $img width > $img height ).addClass (landscape)
else
   ( $img height > $img width ).addClass (portrait)

Obviously that statement above won't work but can someone please show me how to add that into my foreach statement so I can add classes to the varying images?

Answer 1

Use getimagesize: http://www.php.net/manual/en/function.getimagesize.php

foreach (glob('images/*') as $filename) {
    $size = getimagesize($filename); 
    if ( $size[0] > $size[1] ) {
        $class="landscape";
    }
    else {
        $class="portrait";
    }

    print  '<li> <img src="'. $filename.'" '.$size[3].' class="'.$class.'" /> </li>';
}

$size[3] being there to add proper width= and height= attributes to img element.