PHP after image loaded from directory - wrong orientation - php

Question

Actually i'm using a simple PHP snippet to iterate through a directory to grab images and insert them into the html markup.
Now im facing the problem that all images are oriented in landscape. So also portrait images are oriented as landscape images.
Here's my snippet:
<?php
$projectpath = 'Projects';
$projects = glob($projectpath . '/*' , GLOB_ONLYDIR);
foreach($projects as $key=>$value): ?>
<section class="project">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="project-images">
<?php
$handle = opendir(dirname(realpath(__FILE__)).'/'.$value);
while($file = readdir($handle)){
if($file !== '.' && $file !== '..'){
echo '<img class="img-responsive" alt="'. $file .'" src="'. $value .'/'. $file .'"/>';
}
}
?>
</div>
</div>
</div>
</div>
</section>
<?php endforeach; ?>
So what do i'm missing here? Any suggestions?

Answer 1

I doubt those images really have different orientations. More likely all images are in landscape layout (greater width than height), so the visualization is correct from a technical point of view.
I guess you usually look at the images with some viewer on your PC which auto rotates the images based on some orientation flag stored inside the images meta data. But such flag does not change the real, technical orientation (or better resolution). Instead such flag is only a hint for visualization of the images. Your project does not consult that flag, that is why your images appear to be rotated, whilst in reality they are not.
So the solution is one of two options:
rotate the images prior to using them inside your project, so that their real, technical orientation is correct and the images only have to be displayed without any additional rotation.
use js or php or whatever to detect that orientation flag and evaluate it. Based on the outcome you can set some css class which results in a css based rotation of those images that need to be rotated for visualization.

Answer 2

Here is simple PHP example to check if the image is portrait or landscape:
<?php
$imagePath = 'images/imagename.png';
$imageSize = getimagesize($imagePath); //returns an array
$imageWidth = $imageSize[0]; // array key 0 is width
$imageHeight = $imageSize[1]; // array key 1 is height
if($imageWidth < $imageHeight){
echo '<img class="ROTATE">'//add the rotate class
} elseif($imageWidth > $imageHeight){
echo '<img>'//do not add the rotate class
} else {
echo '<img>'//do not add the rotate class
?>
Take in mind that this is only an example and that you'll have to tweak the script to work properly for you.