PrismicImage not accepting width in imgixParams

Developing with Prismic
,
1

Not sure if I'm missing something, but I can't get the PrismicImage component in Next.js to honour a specifed width for dynamic cropping / imgix manipulations.

For example:

<PrismicImage 
  alt="" 
  field={image} 
  imgixParams={{fit: 'crop', w: 400, h: 400}} 
  width={400} 
  height={400} 
/>

<Image 
  alt=""
  src={`${image.url}&w=400&h=400&fit=crop`}
  width={400}
  height={400}
/>

The Next image, manipulated with the url works, while the PrismicImage ignores the width (I get width=2048 in the image url).

All other imgixParams seem to work ok - height is working, fit values are honoured, even stylizing with blur or duotone .... all good, but width is ignored (tried with w and width)...

Am I missing something?

3

Hey Robin,

Welcome to the community!

I can repeat the same behaviour as you've stated on my side. I'm talking with the team to get more information on why this behaves like this.

Thanks.

1 Like
4

Hi Phil! Thanks for looking into this! Looking forward to whatever you find out. :crossed_fingers:

6

Hi I am trying to use PrismicNextImage to handle all Prismic images in a Next.js v12 website. My component works fine and correctly handles images when using layout='fill' but some images need to have the width and height specified. When I try either 'width or height' or imgixParams={{ w: width, h:height }} I cannot control the size of the images.

Here is some of my .tsx component code for CustomImage.tsx:

My typescript interface is setup:

interface CustomImageProps {
field: string;
imgixParams?: Record<string, string | number>;
src: string;
alt: string;
width: number;
height?: number;
quality?: number;
}

Neither of these CustomImage's work:

return <PrismicNextImage field={field} alt={alt} width={width} height={height} quality={quality} {...restProps} />;
return <PrismicNextImage field={field} alt={alt} imgixParams={{w: width, h: height}} quality={quality} {...restProps} />;

Any help gratefully received.

7

Hey Team,

I'm trying to get a full detailed response for you but quick answer: next/image manages an image’s size and w parameter. The width prop takes priority from what I remember, but I’ll need to double-check the code.

I'll get back asap.

8

OK so, <PrismicNextImage> overrides the w and h parameters.

  • w sets the width. next/image generates srcSets, which must change the width of each image.
  • h sets the height. Our Imgix image loader removes the h parameter.

I think we can make the following change to <PrismicNextImage> to make width/w/height/h more intuitive:

  • Tell developers to use the width and height props instead of the w and h imgixParams properties.
  • Update the TypeScript types to not allow the w and h properties in imgixParams. The width and/or height props should be used instead.
  • Log a warning when the w or h properties are used in imgixParams instructing the developer to use width and height props instead.
  • For developers that already have w and h in their imgixProps (e.g. imgixParams={{ w: 500 }}), tread them the same as the width and height prop.

So we're tracking these changes and we'll update you here once they're done.

2 Likes