ResponsiveImg

Installation

1. Simply copy the ResponsiveImg folder into site/addons/
2. Ensure you are Serving Cached Images Directly
3. That's it!

Usage

ResponsiveImg makes use of Statamic's shorthand tag syntax:

{{ responsive_img:[image_name] }}

Add additional attributes by using the attr option:

{{ responsive_img:[image_name] attr="id:my-id|class:some-class|alt:Lorem Ipsum" }}

Loop over an array of images using the assets tag:

{{ assets:gallery }}
  {{ responsive_img:id attr="class:image-{ index }|alt:{ alt }" }}
{{ /assets:gallery }}

To lazy-load images using JS, add the data-src option:

{{ responsive_img:[image_name] data-src="true" }}

When using data-src, you are free to use any lazy-loading library that makes use of this technique. If you want to keep things simple and merely defer image loading until the rest of the page is ready, the following vanilla JS snippet should get you started:

Parameters