An unopinionated Jekyll plugin for generating and using responsive images
https://github.com/wildlyinaccurate/jekyll-responsive-image
a2d0e390b9 | ||
---|---|---|
features | ||
lib/jekyll | ||
.coveralls.yml | ||
.gitignore | ||
.travis.yml | ||
Gemfile | ||
LICENSE | ||
README.md | ||
Rakefile | ||
index.html | ||
jekyll-responsive_image.gemspec | ||
test-index.html |
README.md
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
You can either use the gem and update your _config.yml
:
$ gem install jekyll-responsive_image
# _config.yml
gems: [jekyll-responsive_image]
Or you can simply copy responsive_image.rb
into your _plugins
directory.
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 %}
>