IMGIX orientation question

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.

Hi Grafik,

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


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

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

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

        fit: this.orientation === 'landscape' ? 'crop' : 'clip',
        auto: 'format, compress',
        ar: this.orientation === 'landscape' ? '7:5' : '',
        w: '2000',
1 Like

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