nhoizey / eleventy-plugin-images-responsiver

Global solution for responsive images in Eleventy, allowing authors to use Markdown syntax for image and yet get responsive images in generated HTML.

Home Page:https://nhoizey.github.io/eleventy-plugin-images-responsiver/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

eleventy-plugin-images-responsiver

npm npm GitHub stars Follow @nhoizey@mamot.fr

eleventy-plugin-images-responsiver is a simple solution for most responsive images needs with Eleventy.

This Eleventy plugin allows authors to use the standard Markdown syntax for images (![alt text](image.jpg "title text")) and yet get responsive images in the generated HTML, with srcset and sizes attributes.

Why does this project exist?

As Steve Jobs once said:

You've got to start with the customer experience and run backwards to the technology.

Responsive images are one of the most difficult topics nowadays for front end developers and content authors, they involve multiple features and syntaxes, but they are required to provide a good performance to Web users.

Most content authors should not have to learn the complex responsive images HTML syntax, and how it is used by browsers to load the right image for current viewing context.

Knowing that <picture> is only required for rare advanced usages, eleventy-plugin-images-responsiver should be enough for most use cases, known as Resolution Switching. Read this article on Cloudfour's blog to know more of the theory.

How does it work?

eleventy-plugin-images-responsiver is the glue between Eleventy plugin and transformations system and images-responsiver, the generic HTML transformation npm package for simple responsive images.

Eleventy uses Markdown-it to transform Markdown content into HTML, and then runs the transform added by eleventy-plugin-images-responsiver, which calls images-responsiver to actually transform the HTML.

Warning This plugin doesn't generate any image, it has to be used either with already existing images, a local image resizing solution (should work with the official eleventy-img plugin), or a third party service ("image CDN") like Cloudinary.

Learn more in the detailed documentation.

Installation

To install and use the plugin, install it as a dev dependency in your Eleventy project:

npm install eleventy-plugin-images-responsiver --save-dev

Usage

Instead of jumping directly into the list of features and configuration options, let us take your hand and guide you through a step by step tutorial with actual examples.

Let's start here!

If you already know how to use the plugin and want to go directly to a section of the tutorial, here are direct links:

Alternatives

To deal with responsive images in Eleventy, there are multiple other plugins:

Contributing

First, thank you for considering contributing to eleventy-plugin-images-responsiver! It's people like you that make the open source community such a great community! 😊

There are many ways to contribute to this project. Get started here.

License

This project is licensed under the MIT License.

Authors

See also the list of contributors who participated in this project.

About

Global solution for responsive images in Eleventy, allowing authors to use Markdown syntax for image and yet get responsive images in generated HTML.

https://nhoizey.github.io/eleventy-plugin-images-responsiver/

License:MIT License


Languages

Language:JavaScript 69.3%Language:Shell 30.7%