eleventy-plugin-sharp's Introduction

eleventy-plugin-sharp

npm: npm i eleventy-plugin-sharp

Inspired by the Craft CMS image transform API.
This plugin gives you the full power of the awesome sharp library in your 11ty templates.

Usage

// .eleventy.js
const sharpPlugin = require('eleventy-plugin-sharp');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(sharpPlugin({
    urlPath: '/images',
    outputDir: 'public/images'
  }));
};

Filters

Filters are used to build up the Sharp instance. Pretty much all the methods that the Sharp API provides can be called. output options, resizing, operations, colour, etc.

Shortcodes

In addition shortcodes are used to execute the async functions of Sharp, something filters don't support.

getUrl(instanceOrFilepath) Saves the image to disk and gets the url.
getWidth(instanceOrFilepath) Gets the width of an image.
getHeight(instanceOrFilepath) Gets the height of an image.
getMetadata(instanceOrFilepath) Gets the metadata of an image.
getStats(instanceOrFilepath) Gets the stats of an image.

Responsive images using `<picture>`

The sharp filter is optional if the input file is followed by any Sharp transform.

{% set image = "src/images/zen-pond.jpg" | sharp %}

<picture>
  <source srcset="{% getUrl image | resize({ width: 1440, height: 460 }) | webp %} 1x, {% getUrl image | resize({ width: 2560, height: 800 }) | webp %} 2x" media="(min-width: 640px)">
  <source srcset="{% getUrl image | resize({ width: 640, height: 320 }) | webp %} 1x, {% getUrl image | resize({ width: 1280, height: 640 }) | webp %} 2x">
  <source srcset="{% getUrl image | resize({ width: 1440, height: 460 }) %} 1x, {% getUrl image | resize({ width: 2560, height: 800 }) %} 2x" media="(min-width: 640px)">
  <img class="articleHero-image" srcset="{% getUrl image | resize({ width: 640, height: 320 }) %} 1x, {% getUrl image | resize({ width: 1280, height: 640 }) %} 2x" alt="{{ image.title }}">
</picture>

Get the dimensions of a saved image w/ custom output filepath

{% set bannerImage = "src/images/zen-pond.jpg" | resize(1440, 460) | toFile("public/images/custom-name.webp") %}

{% getUrl bannerImage %}
{% getWidth bannerImage.fileOut %}
{% getHeight bannerImage.fileOut %}

eleventy-plugin-sharp's People

Contributors

Stargazers

Watchers

eleventy-plugin-sharp's Issues

Only generates one images size and source

I installed the plugin and setup a test case with the same code from the readme. Interesting enough, it only generates the first size (width: 1440, height: 460). It feels like using the getUrl with the resize filter somehow memorizes the given options and then applies them to all other occurrences of getUrl | Filter.

That's what the output looks like:

<picture>
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" media="(min-width: 640px)">
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x">
    <source srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" media="(min-width: 640px)">
    <img class="articleHero-image" srcset="/static/images/wartsaal_bar-1440x460.webp 1x, /static/images/wartsaal_bar-1440x460.webp 2x" alt="Die in rot gestrichene Bar des Wartsaal Kaffee's">
</picture>

@luwes Can you confirm that the example in the readme works the way you think it should?

Recommend Projects