Struggle with responsive image and focalpoint

🆘 Support
1

I’m trying to get a responsive image that has an aspect ratio of 16:9 for desktop, and 3:4 for mobile portrait, however I always get the 16:9 size.

My graph-ql query is like this:
responsiveImage(imgixParams: {auto: format, fit: crop, crop: focalpoint, h: 810}) {
srcSet
webpSrcSet
sizes
src
width
height
aspectRatio
alt
title
base64
}

It seems that the focalpoint crop never happens!

2

We covered this via email :slight_smile:

3

Hi, I’m having the same issue. Could you explain-me how did you solve this?
Thanks.

4

Hello @ivo

The issue here was that the image was not being cropped with that parameter, he had to specify a smaller width to actually crop the image, if you’d like you can send us the specific URL with the imgix parameters you are using so we can take a look at it

5

Thank you, @m.finamor for the quick response.
I manage to make it work, I just needed to add a w and h parameter

responsiveImage(imgixParams: {fit: crop, auto: format, crop: focalpoint, w: 530, h: 450}) {
              sizes
              src
              width
              height
              alt
              title
              base64
            }

These are my parameters. Which led me to another question. The w and h parameter can have any value as long they respect the proportion I need ? Or should I choose the parameters according to the size the image will be displayed.

Thanks in advance for your help!

6

Hello @ivo

They can have any value, as you are cropping the image, here is a bit more detail on how the crop works: Resize Fit Mode | Size Parameters | Rendering API Documentation