Jekyll Srcset Tag
This gem allows you to use the srcset variety of responsive images in your Jekyll project. It takes a path to a fullsize image and will generate resized images at the sizes and ppi's specified in your jekyll output.
It's still early days on this, seems to work in a quick build, but we're getting started putting it through something more substantial that should help improve it.
It borrows heavily from the work done in Jekyll Picture Tag by Rob Wierzbowski - It's origins lie in a messy hacked version of that plugin. This differs by supporting srcset and a few other tweaks that resolved some of the problems I was having with it.
Installation
Bundler
Already Have a Gemfile?
Add the following to your Gemfile
gem 'jekyll-srcset-tag', '~> 0.1'
Then run
$ bundle install
No Gemfile?
Create a plugin to load bundler gems in your _plugins
directory
# _plugins/bundler.rb
require "rubygems"
require "bundler/setup"
Bundler.require(:default)
Create a Gemfile
# Gemfile
source 'https://rubygems.org'
gem 'jekyll-srcset-tag', '~> 0.1'
Then run
$ bundle install
System Gem
Install the gem
gem install 'jekyll-srcset-tag'
Create a plugin for it
# _plugins/jekyll_srcset_tag.rb
require "rubygems"
require "jekyll-srcset-tag"
Usage
Set up your config
By default this plugin expects to find your source images in _assets/images/fullsize and will output them in an images/generated directory.
You can tweak this in your config
# _config.yml
srcset:
source: _assets/images/fullsize
output: images/resized
You should add an entry to keep_files, otherwise on incremental builds jekyll will delete the files
# _config.yml
keep_files: ['images/generated']
Put it in your liquid templates
Example syntax:
{% srcset movies/terminator.jpg ppi:1,2 alt='Terminator' %}
{% srcset_source media:'(min-width: 400px)' size:'512px' width:512 %}
{% srcset_source width:320 %}
{% endsrcset %}
This will generate the following HTML
<img src="/images/generated/movies/terminator.jpg-5c03014/320x256.jpg" srcset="/images/generated/movies/terminator.jpg-5c03014/1024x819.jpg 1024w, /images/generated/movies/terminator.jpg-5c03014/512x410.jpg 512w, /images/generated/movies/terminator.jpg-5c03014/640x512.jpg 640w, /images/generated/movies/terminator.jpg-5c03014/320x256.jpg 320w" sizes="(min-width: 400px) 512px, 100vw" alt='Terminator' />
And the following images
.jekyll/images/generated/movies/terminator.jpg-5c03014/320x256.jpg
.jekyll/images/generated/movies/terminator.jpg-5c03014/512x410.jpg
.jekyll/images/generated/movies/terminator.jpg-5c03014/640x512.jpg
.jekyll/images/generated/movies/terminator.jpg-5c03014/1024x819.jpg
The syntax for srcset
is {% srcset path/to/your/image.jpg [ppi:x,y,z] [html attributes] %}{% endsrcset %}
The syntax for srcset_source
is {% srcset_source [media:string] [size:string] [width:int] [height:int] %}
You can optionally add fallback:true
as an option to srcset_source to specify which image path will be output in the src attribute and thus rendered on older browsers.
Contribute
Please do in anyway you like - I bet making this doc better would be a good place to start. Pull requests welcome.
License
MIT