1

I have this problem with a simple cms I'm working on: I have a simple php function getting image elements from a specified directory, and printing them to the html

<?php if($row["imgs"] == TRUE){ ?>
              <div class="imrow">
                <?php
                  $dir = $row["folder"];
                  $img = glob($dir."*.{jpg,jpeg,png}", GLOB_BRACE);
                  $tabing = 3;
                  $scale = sizeof($img);
                      for ($i = 0; $i < $tabing; $i++)  {
                echo '<img src="'.$img[$i].'" alt="image" />';
                  }
                ?>
              </div><?php }//closing the first if of images ?>
                (...)
<?php   if($row["imgs"] == TRUE) { ?>
            <div class="imrow">

          <?php
                for ($i = $tabing; $i < $scale; $i++)  {

                  if(!($i % $tabing) && ($i!=0)){echo '</div><div class="imrow">';}
                    echo '<img src="'.$img[$i].'" alt="image" />';


            }
          ?>
          </div>
          <?php }//second if closing ?>

The style for images and rows:

.imrow {
    display: block;
}

.imrow img {
    z-index: 10;
    float: left;
    height: 100%;
    cursor: pointer;
    transition: transform .5s ease;
    box-shadow: 1px 1px 12px rgb(200, 200, 200);
}

And are laid out using a simple jQuery function

 $(".imrow").each(function () { // for every row
        var row = $(this); //it gives it a name
        var rowW = row.width(); //it seals it's width
        var imgW = 0; //it sets a image width variable
        var fixH = 600; //and get a fixed amount

        row.children().each(function () {
            $(this).css("height", fixH); //apply fixed height to element in order to get ratio
            imgW += $(this).width(); //get the width of this and
            $(this).css("height", "100%");
            arr.push($(this).attr("src")); // restore

        });
          row.css("height", rowW / (imgW / fixH) - 2);
    });

The problem here is the fact that some of the added Vertical images, turn out horizontal Here's how it looks in a folder img1

And how it turns out in the website: img2

EDIT: This is a php only issue from what I see, because when I analyze the elements in chrome, the images are flipped by default inside, as you all can see here: chrome_screenshot So my first bet goes on glob doing something wrong.

Has anyone experienced it, or knows a way to make glob get everything properly?

Bare in mind that this issue only happens to some of the images, and is not depended on the format of the displayed image. Any help would be extremely useful

aln447
  • 981
  • 2
  • 15
  • 44
  • What happens if you open the image in chrome directly? (drag the image directly into Chrome). I don't feel like it is glob because it only scans the directory and returns a list of filenames but shouldn't change any properties. Also see if [this question](https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation) pertains to you. Try it in other browsers too. – Cave Johnson Mar 01 '16 at 21:59
  • The website looks the same in Firefox, also dragging the image into both browsers makes it appear in the correct orientation. – aln447 Mar 02 '16 at 01:28
  • The answer in the link provided, did fix the issue with Firefox, but only there. Others still show problems. Might be due to [no compability with other browsers](http://caniuse.com/#feat=css-image-orientation) – aln447 Mar 02 '16 at 01:33
  • You might have to edit the meta data for those images. [Maybe this blog article can be of help](http://www.projectjourneyman.com/photo-orientation-understanding-and-fixing-exif-issues) – Cave Johnson Mar 02 '16 at 01:48
  • Andrew you were right. Opening the files in photoshop and saving them solved the issue. Please write and answer so I can accept it. – aln447 Mar 02 '16 at 02:00

1 Answers1

1

It appears the problem was metadata stored in the images that describe the correct orientation.

There is a image-orientation css property that is supposed to be used to display the image in the correct orientation, but it doesn't seem to be supported in all browsers.

The only other solution at the moment is to edit the image's metadata with a metadata editor or, as you have, to open the images in photoshop and save them.

Cave Johnson
  • 6,499
  • 5
  • 38
  • 57