IMGIX orientation question

Developing with Prismic
1

Is it possible to detect the orientation of an image and then use alterative imgixParams based on the result?

I'm trying to automatically crop all landscape images at an aspect ratio of 5:7 and all portrait at 7:5

Any help on how to solve this would be appreciated.

2

Hi Grafik,

If your images use Exchangeable image file format (Exif) you should be able to do that:

Thanks.

4

Thanks, do you have any working examples of the approach? or is it simply read Exif data, then render image based on the result?

6

No, unfortunately, I don't have any examples of this. I imagine it's only reading the Exif as you suggested.

7

It turns out you can get .dimensions from an image so I created a helper function to grab that

export const getOrientation = (w, h) => {
  if (w == h) return `square`;
  if (w > h) return `landscape`;
  if (w < h) return `portrait`;
};

Then loaded it as such:

import { getOrientation } from …

methods: {
    getOrientation() {
      const { width, height } = this.imageObject.dimensions;
      const orientation = getOrientation(width, height);
      return `${orientation}`;
    },
  },

Then passed the function to my image component

      <Image :orientation="getOrientation()"/>

Within my image component I was able to dynamically set the params as such

<ix-img
    
      :imgixParams="{
        fit: this.orientation === 'landscape' ? 'crop' : 'clip',
        auto: 'format, compress',
        ar: this.orientation === 'landscape' ? '7:5' : '',
        w: '2000',
      }"
    />
1 Like
8

Really nice. I'm glad you were able to make this work and thank you for sharing your implementation. :slight_smile: