brobbrob
11

Eleventy Plugin Sanity Image

screenshot of Eleventy Plugin Sanity Image

Github

Overview

If you're looking to integrate Sanity's powerful asset pipeline with your 11ty templates, the template helper plugin for 11tyAlpha is a game changer. Currently in its early stages, this plugin makes it easy to handle images from Sanity, providing a seamless way to manage image assets within your projects. Whether you're looking for specific-sized images, responsive layouts, or simply easier integration, this plugin aims to simplify the process through a few clever shortcodes.

Setting up the plugin is straightforward, requiring a Sanity Client configuration within your .eleventy.js file. Once you're all set up, you'll discover a variety of shortcodes that allow you to tailor your image handling to your project's needs, ensuring an optimized experience for both developers and end-users.

Features

  • imageUrlFor: This shortcode generates a URL to your image on Sanity's CDN. You can specify the width to get the desired image size, ensuring optimal loading times.

  • croppedUrlFor: With this tag, you can retrieve a URL for your image cropped to the specified width and height. Just remember to use the complete image object to respect the cropping options set in your Studio.

  • responsiveImage: This powerful shortcode outputs an img element featuring responsive srcset and sizes attributes, automatically pulling images from Sanity's asset pipeline for seamless adaptability.

  • sanityImageObject (required): This first argument is essential for the responsiveImage shortcode; it ensures the returned image respects the user's cropping and hotspot selections.

  • srcSet (optional): This optional argument allows for a custom srcset, giving you control over which image widths are available, ensuring high-quality performance.

  • sizes (optional): By default, sizes are set to "100vw", but you can customize this to improve responsiveness based on your layout needs.

  • classes (optional): This allows you to add custom classes to your image, providing greater flexibility in styling and layout.