react-datocms
react-datocms copied to clipboard
Feature: Provide the option to art direct the DatoCMS Image with multiple responsiveImage data object
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 🙇🏻