From a6a54f85954f3c5e24c6e79eb3b70ff1b2428635 Mon Sep 17 00:00:00 2001 From: Adam Culpepper Date: Sat, 14 Nov 2020 05:44:54 -0600 Subject: [PATCH] Update README.md --- README.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 73037ca..cc6ff65 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,12 @@ # Responsive Images - Eleventy Plugin (powered by Cloudinary) An [Eleventy](https://11ty.dev) shortcode that enables you to add an image from your [Cloudinary](https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/xdosfzqjnaqemyshp52j) account. +[![Maintained](https://img.shields.io/maintenance/yes/2020?style=for-the-badge)](https://github.com/adamculpepper) +[![Size](https://img.shields.io/github/size/adamculpepper/eleventy-plugin-responsive-images/.eleventy.js?label=Size&style=for-the-badge)](https://github.com/adamculpepper/eleventy-plugin-responsive-images/blob/master/.eleventy.js) +[![Stars](https://img.shields.io/github/stars/adamculpepper/eleventy-plugin-responsive-images?style=for-the-badge)](https://github.com/adamculpepper/eleventy-plugin-responsive-images/stargazers) +[![Issues](https://img.shields.io/github/issues/adamculpepper/eleventy-plugin-responsive-images?style=for-the-badge)](https://github.com/adamculpepper/eleventy-plugin-responsive-images/issues) +[![License](https://img.shields.io/github/license/adamculpepper/eleventy-plugin-responsive-images?style=for-the-badge)](https://github.com/adamculpepper/eleventy-plugin-responsive-images/blob/master/LICENSE) + ## What does it do? Turns [11ty shortcodes](https://www.11ty.io/docs/shortcodes/) like this: @@ -71,10 +77,24 @@ The following shortcode can be used %} ``` -Output +Output image Cloudinary Sample Image + +## Options + +| Option | Description | +| ------ | ------ | +| path [required] | path to image file +| width [required] | largest image width +| height | largest image height +| alt | image alt tag +| sizes | all sizes (in widths) you want to output +| classes | single class names seperated by spaces + + + ### Helpful - Make sure that the domains where you're hosting your photos are whitelisted in your Cloudinary settings, under *Settings > Security > Allowed fetch domains*. If you leave the field blank Cloudinary will [`fetch`](https://cloudinary.com/documentation/fetch_remote_images#remote_image_fetch_url) from any domain. - [Cloudinary Documentation](https://cloudinary.com/documentation)