JSPM

@dyve/11ty-plugin-sanity-responsiveimage

1.2.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 8
  • Score
    100M100P100Q30467F
  • License ISC

@11ty shortcode outputs responsive <img> tag with srcset attribute using the sanity.io CDN

Package Exports

  • @dyve/11ty-plugin-sanity-responsiveimage

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@dyve/11ty-plugin-sanity-responsiveimage) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

11ty-plugin-sanity-responsiveImages

@11ty shortcode outputs reponsive <img> tag with srcset attribute using the sanity.io CDN

Install

npm install @dyve/11ty-plugin-sanity-responsiveimage

Add the plugin to Eleventy

.eleventy.js

// import the plugin
const responsiveImage = require('@dyve/11ty-plugin-sanity-responsiveimage');

module.exports = function (eleventyConfig) {
  // add the plugin to eleventy
  eleventyConfig.addPlugin(responsiveImage, { client: sanityClient });
};

Configuration

This plugin requires an instance of @sanity/client.

For more information check the official documentation

Plugin options

{
  client: sanityClient; // your instance of @sanity/client
}

How to use

In your 11ty templates use the shortCode sanityImage.

With a SanityImageObject:

  {% sanityImage metadata.hero.image, {srcs:"420,600", alt: metadata.hero.image_desc} %}

With a sanity CDN url:

{% sanityImage "https://cdn.sanity.io/images/<sanity-project-id>/production/c763e4d43ffef64035de83214a2163ee123e75db-720x720.jpg", {srcs:"420,600,900,1024", alt:"some alternative text"} %}

shortCode options

{
    // string: comma separated list of image width. Note: the last width will be used as `width` attribute on the <img> tag
    srcs: "420,600",
    // defines the `alt` attribute on the <img> tag
    alt: "alternative text"
    // string: css class to add
    classList: "cls1 cls2"
    // element style
    style: "width: 50px;"
}

Example

{% sanityImage "https://cdn.sanity.io/images/XXX/production/f3533b119b9fe433461316680948eb8fbd53e848-960x640.jpg", {srcs:"420,600,900,1024", alt:"my description"} %}

generates

<img
  src="https://cdn.sanity.io/images/XXX/production/f3533b119b9fe433461316680948eb8fbd53e848-960x640.jpg?fit=crop"
  srcset="
    https://cdn.sanity.io/images/XXX/production/f3533b119b9fe433461316680948eb8fbd53e848-960x640.jpg?rect=160,0,640,640&w=420&h=420&fit=crop&auto=format    420w,
    https://cdn.sanity.io/images/XXX/production/f3533b119b9fe433461316680948eb8fbd53e848-960x640.jpg?rect=160,0,640,640&w=600&h=600&fit=crop&auto=format    600w,
    https://cdn.sanity.io/images/XXX/production/f3533b119b9fe433461316680948eb8fbd53e848-960x640.jpg?rect=160,0,640,640&w=900&h=900&fit=crop&auto=format    900w,
    https://cdn.sanity.io/images/XXX/production/f3533b119b9fe433461316680948eb8fbd53e848-960x640.jpg?rect=160,0,640,640&w=1024&h=1024&fit=crop&auto=format 1024w
  "
  sizes="100vw"
  width="1024"
  alt="my description"
/>

Aspect ratio

By default if no width and height properties are specified the plugin will assume it's a square image. If widthand height are specified they will be used to calculate the aspect ratio of the image.