2.1 KiB
2.1 KiB
Jekyll Responsive Images
Jekyll Responsive Images is a Jekyll plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like srcset
or Imager.js.
Installation
Install the gem yourself
$ gem install jekyll-responsive-image
Or simply add it to your Jekyll _config.yml
:
gems: [jekyll-responsive-image]
Configuration
An example configuration is below.
responsive_image:
template: '_includes/responsive-image.html' # Path to the template to render. Required.
# An array of resize configurations. When this array is empty (or not specified),
# no resizing will take place.
sizes:
- width: 480 # How wide the resized image will be. Required
- width: 800
quality: 90 # JPEG quality. Optional.
- width: 1400
Usage
Replace your images with the responsive_image
tag, specifying a path to the image.
{% responsive_image path: assets/my-file.jpg %}
Any extra attributes will be passed to the template.
{% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}
Create a template to suit your needs. A basic template example is below.
<img src="/{{ path }}"
alt="{{ alt }}"
title="{{ title }}
{% if resized %}
srcset="{% for i in resized %}
/{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
{% endfor %}"
{% endif %}
>