https://github.com/luwes/eleventy-plugin-sharp

Eleventy plugin wielding Sharp's image processing power to the fullest.
https://github.com/luwes/eleventy-plugin-sharp

11ty eleventy sharp

Last synced: 1 day ago
JSON representation

Eleventy plugin wielding Sharp's image processing power to the fullest.

• Host: GitHub
• URL: https://github.com/luwes/eleventy-plugin-sharp
• Owner: luwes
• Created: 2020-08-30T12:30:02.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-11-16T18:32:40.000Z (12 months ago)
• Last Synced: 2024-10-31T11:51:33.738Z (9 days ago)
• Topics: 11ty, eleventy, sharp
• Language: JavaScript
• Homepage:
• Size: 63.5 KB
• Stars: 18
• Watchers: 3
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# eleventy-plugin-sharp

**npm**: `npm i eleventy-plugin-sharp`  

Inspired by the [Craft CMS image transform API](https://craftcms.com/docs/3.x/image-transforms.html).  

This plugin gives you the full power of the awesome [sharp](https://sharp.pixelplumbing.com/) library in your [11ty](https://www.11ty.dev/) templates.

## Usage

```js

// .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](https://sharp.pixelplumbing.com/api-constructor) provides can be called. [`output options`](https://sharp.pixelplumbing.com/api-output), [`resizing`](https://sharp.pixelplumbing.com/api-resize), [`operations`](https://sharp.pixelplumbing.com/api-operation), [`colour`](https://sharp.pixelplumbing.com/api-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 ``

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

```njk

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

  

  

  

  

```

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

```njk

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

{% getUrl bannerImage %}

{% getWidth bannerImage.fileOut %}

{% getHeight bannerImage.fileOut %}

```