Bolt CMS Responsive Image Extension

This is a Bolt Content Management System extension that enables you to use a twig tag to produce responsive images using srcset.

Installation

In the backend of your Bolt install navigate to the "Extras" menu in your dashboard and click "view/install extensions". In the "Install New Extension" search box type either "Responsive Images" or paste the following snippet.

cdowdy/boltresponsiveimages

Then click "Browse Versions and install the latest stable version.

Config Settings

For the examples on this page I will be using a rule set I have created in the extensions config titled - demos_bolt.

Each responsive image set will need a config defined in the extensions config file. One is already there called 'default'. You can use this but the widths and which descriptor that is used are in most instances not suitable for your project or site.

For a custom set of rules start off by giving the rule set a name inside the config. This pages rule set as mentioned above is 'demos_bolt'. Here is this demo page rule set as defined in the extensions config.

demos_bolt:
    widths: [ 320, 520, 900 ]
    heights: [ 0 ]
    widthDensity: 'w'
    sizes: [ '(min-width: 800px) 30vw', ' 90vw' ]

For this particular page I know that on screens wider than 50em (800px) the image will be approximately 30% of the viewport ( taking into consideration the column padding/gutters ). To help you get you head around this you can read Jake Archibald's Anatomy of Responsive Images.

Quick Usage

You can quickly use Bolt Responsive Images in your templates with the default settings wherever you want a responsive image set.

{{ respImg( record.image, 'default' ) }}

This will produce three (3) images of the following widths:

  1. 320
  2. 480
  3. 768
red-panda

Red Panda Stretching By Eric Kilby

Using Widths

Usage examples for using the "w" descriptor.

To use the W descriptor either use the default settings "widthDensity" setting of "w" or create your own set of rules with the widthDensity setting set to w in that rule set.

We'll use the config defined above in the "Config" section.

Template Usage

Using with a record image

red-panda
{{ respImg( record.image, 'demos_bolt' }}

Using with a File From Files

red-panda
{{ respImg( 'demos/respimg/red-panda.jpg', 'demos_bolt' }}

Using Densities

To use screen densities with the extension use an 'x' in the 'widthDensity' config setting. The 'sizes' config option isn't needed if using the 'x' descriptor but the 'resolutions' option is. The 'x' descriptor is also good to use with fixed width images. More on why fixed width images can be found here at Cloudfour Blog: Responsive Images 101 Display Density.

Config:

demos_density:
    widths: [ 320, 640, 900 ]
    heights: [ 0 ]
    widthDensity: 'x'
    resolutions: [ 1, 2, 3 ]

Using with a record image

red-panda
{{ respImg( record.image, 'demos_density' }}

Using with a File From Files

red-panda
{{ respImg( 'demos/respimg/red-panda.jpg', 'demos_density' }}

Advanced Usage

You can over ride just about any default setting or user supplied setting in the extensions config inside a template. You must supply the image you wish to use, followed by a rule set (or use defaults) then followed by which custom settings you wish to use.

Template Usage

Template Override Examples

Override Default Width Settings & using a record image

red-panda

{{ respImg( record.image, 'default', {
    'widths' : [300, 440, 640, 800, 1000 ],
    'sizes' : [ '(min-width: 50em) 30vw, 90vw' ]
    })
}}

Override Default Width Settings & using an image from 'Files'

bear_cub_tree

{{ respImg( 'demos/respimg/bear_cub_tree.jpg', 'default', {
    'widths' : [300, 440, 640, 800, 1000 ],
    'sizes' : [ '(min-width: 50em) 30vw, 90vw' ]
    })
}}

Using the Default settings but replacing the 'width' descriptor with the 'x' or density descriptor

Using a record image

red-panda

{{ respImg( record.image, 'default', {
    'widthDensity': 'x',
    'resolutions' : [ 1, 1.5, 2]
    })
}}

Using an image from 'Files'

bear_cub_tree

{{ respImg( 'demos/respimg/bear_cub_tree.jpg', 'default', {
    'widthDensity': 'x',
    'resolutions' : [ 1, 1.5, 2 ]
    })
}}

Source

The source for Bolt Responsive Images can be found at my github page

Bolt Responsive Images Extensions Store Page