Feature: react-datocms — Provide the option to art direct the DatoCMS Image with multiple responsiveImage data object

✋ Feature Requests
1

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 :bowing_man:t2:

I also created an GitHub Issue if the library maintainer want’s to discuss things there.