react-datocms icon indicating copy to clipboard operation
react-datocms copied to clipboard

Feature: Provide the option to art direct the DatoCMS Image with multiple responsiveImage data object

Open thomasverleye opened this issue 5 months ago • 0 comments

Just throwing this out there that it is quiet easy to setup art direction with the GraphQL api available.

I am currently switching srcSet to change aspect ratios from images through the srcSet from the responsiveImage endpoint.

  image {
    horizontalImage: responsiveImage(
      imgixParams: { auto: [compress, format], fit: crop, ar: "1:1", w: 350 }
      sizes: "33vw"
    ) {
      ...FieldResponsiveImage
    }
    verticalImage: responsiveImage(
      imgixParams: { auto: [compress, format], fit: crop, ar: "50:27", w: 520 }
      sizes: "100vw"
    ) {
      ...FieldResponsiveImage
    }
  }

And with that i can easily create this picture

<picture>
  <source srcSet={image.horizontalImage.srcSet} media="(min-width: 43.75em)" />
  <img src={image.verticalImage.src} srcSet={image.verticalImage.srcSet} alt={image.horizontalImage.alt ?? ''} sizes={image.horizontalImage.sizes} />
</picture>

I could create a proposal PR for this but not sure if this is something you would like implement in this library, so I'm also sharing the knowledge here 🙇🏻

thomasverleye avatar Sep 18 '24 06:09 thomasverleye