PHP после загрузки изображения из каталога - неправильная ориентация

Question

На самом деле я использую простой фрагмент PHP для итерации по каталогу для захвата изображений и вставки их в разметку html.

Теперь им приходится сталкиваться с проблемой, что все изображения ориентированы в ландшафте. Таким образом, портретные изображения ориентированы как пейзажные изображения.

Вот мой сниппет:

<?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; ?> 

Так что я здесь отсутствует? Какие-либо предложения?

Answer 1

Я сомневаюсь, что эти изображения действительно имеют разные ориентации. Скорее всего все изображения в ландшафтном макете (большая ширина, чем высота), поэтому визуализация верна с технической точки зрения.

Я думаю, вы обычно смотрите на изображения с помощью какого-то зрителя на своем ПК, который автоматически поворачивает изображения на основе некоторого флага ориентации, хранящегося внутри метаданных изображений. Но такой флаг делает не изменить реальную, техническую ориентацию (или лучшее разрешение). Вместо этого такой флаг является лишь подсказкой для визуализации изображений. Ваш проект не справляется с этим флагом, поэтому ваши образы отображают для поворота, в то время как на самом деле это не так.

Таким образом, решение является одним из двух вариантов:

1. вращать изображения перед использованием их внутри проекта, так что их реальная техническая ориентация правильная, и изображения только для отображения без каких-либо дополнительное вращение.

2. использовать js или php или что-то еще, чтобы обнаружить флаг ориентации и оценить его. Исходя из результатов, вы можете установить некоторый класс css, который приводит к вращению на основе css этих изображений, которые нужно поворачивать для визуализации.

Answer 2

Вот простой PHP пример, чтобы проверить, является ли образ или портрет пейзаж:

<?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 
?> 

Примите во внимание, что это только пример, и что вам придется настроить скрипт для работы правильно для вас.