gatsby-image
If you're using TakeShape with Gatsby, you'll most likely want to use Gatsby's famous gatsby-image
. Out of the box, the Gatsby GraphQL source plugin doesn't support gatsby image fragments but you can use the @takeshape/routing module to generate all the correct sizes.
import {getImageUrl} from 'takeshape-routing';
const sizes = `
(min-width: 900px) 1000px,
(max-width: 900px) and (min-width: 400px) 50em,
( not (orientation: portrait) ) 300px,
( (orientation: landscape) or (min-width: 1000px) ) 50vw,
100vw`;
const widths = [100, 500, 1000];
export function fluidImage(path, aspectRatio) {
return {
src: getImageUrl(path),
srcSet: widths.map(w =>`${getImageUrl(path,{w})} ${w}w`).join(','),
sizes
}
}
Then use:
import Img from "gatsby-image"
...
<Img fluid={fluidImage(path, 4/3)} />
With this approach you can tune the image params to your exact needs.