从目录加载图像后的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:

1. 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.

2. 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.