A plugin for integrating imgix into Jekyll sites
Ruby 50 2 years ago imgix/jekyll-imgix


First, add liquid and jekyll-imgix to the :jekyll_plugins group in your Gemfile:

group :jekyll_plugins do
  gem 'rouge'
  gem 'kramdown'
  gem 'liquid'
  gem 'jekyll-imgix'

Then include jekyll-imgix in the plugins: section of your _config.yml file:

plugins: [jekyll/imgix]


jekyll-imgix requires a configuration block in your _config.yml:

  source: # Your imgix source address
  secure_url_token: FACEBEEF12 # (optional) The Secure URL Token associated with your source
  include_library_param: true  # (optional) If `true` all the URLs will include `ixlib` parameter

Multi-source configuration

In addition to the standard configuration flags, the following options can be used to serve images across different sources.

  sources:  # imgix source-secure_url_token key-value pairs. FACEBEEF12            # Will generate unsigned URLs
  default_source:  # (optional) specify a default source for generating URLs.

Note: sources and source cannot be used together.


jekyll-imgix does not do anything unless JEKYLL_ENV is set to production. For example, you will want to run JEKYLL_ENV=production jekyll build before deploying your site to production.

jekyll-imgix exposes its functionality as a single Jekyll Filter, imgix_url.

Pass an existing image path to it to activate it:

<img src={{ "/images/bear.jpg" | imgix_url }} />

That will generate the following HTML in your output:

<img src="" />

You can also pass parameters to the imgix_url helper like so:

<img src={{ "/images/bear.jpg" | imgix_url: w: 400, h: 300 }} />

Which would result in the following HTML:

<img src="" />

Multi-source usage

To use jekyll-imgix in a multi-source setup:

<img src={{ "/images/bear.jpg" | imgix_url: "", w: 400, h: 300 }} />
<img src={{ "/images/bear.jpg" | imgix_url: w: 400, h: 300 }} />  <!-- will use default_source from config -->

Which would generate:

<img src="" />
<img src="" />

In absence of correctly configured default_source, imgix_url will report RuntimeError if it's used without specifying a valid source.


Bug reports and pull requests are welcome on GitHub at

Code of Conduct

Users contributing to or participating in the development of this project are subject to the terms of imgix's Code of Conduct.


FOSSA Status

More Framework Libraries