search

prismicio / prismic-react

React components and hooks to fetch and present Prismic content
https://prismic.io/docs/technologies/homepage-reactjs
Apache License 2.0
152 stars 40 forks source link

width is being ignored imgixParams #164

Closed DnSu closed 2 years ago

DnSu commented 2 years ago

<PrismicImage field={photoRow.photo} imgixParams={{ w: 200, h: 200, fit: 'crop' }} />

resulting image URL params ?auto=compress%2Cformat&h=200&fit=crop&width=1200

width is being ignored.

angeloashmore commented 2 years ago

Hi @DnSu, sorry for the late reply. I'm just getting back from vacation and going through issues now. 🙂

The w/width Imgix param is managed through the widths prop rather than the imgixParams prop. Using widths allows you to control the output's srcset attribute.

If you only need one width rather than a set of widths in the srcset, you can set widths to a single value like so:

<PrismicImage field={photoRow.photo} widths={[200]} />

This will output something like the following:

<img
  src="https://images.prismic.io/example/image.jpg?auto=compress,format&w=200"
  srcset="https://images.prismic.io/example/image.jpg?auto=compress,format&w=200 200w"
  alt="The image's alt text"
/>

If you need to set the width and height attribute on the output's <img> element, you can still use the width and height props like so:

<PrismicImage field={photoRow.photo} widths={[200]} width={200} height={200} />