Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
thomasverleye opened this issue Sep 18, 2024 · 0 comments

Comments

@thomasverleye
Copy link
Contributor

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 🙇🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant