Why are some images being rotated?

[mark-rodgers]

I've been working on integrating this library into a Drupal website so I dynamically pull images in and style them. A few issues I've come across:

1. some images get rotated?
2. the primary buffer seems a bit off? when scrolling you can see some images at the very top and bottom disappear before they are off the screen
3. when you scroll images don't have a gray background like in the demo, it just looks like a blank page until the 20px thumbnail appears.
4. the library is ignoring my 500px directory and only pulling pictures from the 250px directory, making some larger images upscale and look really bad. This also looks to be an issue on the demo. Unless I'm misunderstanding the documentation it looks like larger images should be using the 500px height images.

DEMO: http://photo.marknr.com/galleries

FIXES:

3. snippet below taken from demo. I'd suggest updating the JS to add this inline styling. Having the demo have custom styling may confuse people such as myself as I was expecting my demo to look the same.

.pig-figure {
    background-color: #D5D5D5;
}

[schlosser]

Hey! Glad to see you're using this. Here's some thoughts:

1. I think this might be an issue with the images you uploaded. For example, this image from your site appears to be rotated for me. The library will pull down the image however you have it.

2. This is definitely an issue, you'll have the fix soon. The reason is that I made an assumption that my positioning logic assumes that the parent element is rooted on the top of the screen, which is obviously not the case. Opening #5 for this.

3. You are right, and I will add this. Opening #6 for this.

4. What screen size are you having this problem on? By default, all screen sizes lower than 1920px display 250px-tall images. You can change this by passing in a custom getImageSize function:

var pig = new Pig(imageData, {
  urlForSize: function(filename, size) {
    return "http://photo.marknr.com/sites/default/files/styles/pig_" + size + "px/public/" + filename;
  },
  // this is the default, you can implement your own function:
  getImageSize: function(lastWindowWidth) {
    if (lastWindowWidth <= 640)
      return 100;
    else if (lastWindowWidth <= 1920)
      return 250;
    return 500;
  }
}).enable();

[schlosser]

FYI 2 and 3 are fixed, let me know if I've solved your issues for 1 and 4.

[mark-rodgers]

Thanks. As far as issue 1 goes, I think you are correct that it is an issue with the image itself.

The way I have this setup, I upload the full resolution image to Drupal (http://photo.marknr.com/sites/default/files/IMG_1229.JPG), then use an image styles module in order to resize and cache the images on the fly. This creates multiple copies of the image at 20, 100, 250, and 500 px tall.

Looking at the original image I uploaded the orientation is correct. So I believe this is an issue with the image styles module rotating the image while resizing it, before it gets rendered on the page.

Also I made some assumptions about 4, but after looking at the code I realized it was working as intended. It just wasn't how I intended, which had me confused.

Thanks for your help (and great library), I will check out the latest build now and see how it works for me!

[mark-rodgers]

Just in case anyone else is using Drupal and has the same rotation issue, this fixed my issue. Weird cause I made sure before uploading my images that the orientation in the exif data was cleared out but nonetheless, it resolved the issue.
https://www.drupal.org/project/image_exif_autorotate

[schlosser]

Glad you were able to fix the issue! Let me know if you have any other problems