Skip to content

Uses generated responsive image resolutions :: Those generated by metalsmith-picset-generate display in browser via a <picture> element

Notifications You must be signed in to change notification settings

AnthonyAstige/metalsmith-picset-handlebars-helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Uses picture sets generated by metalsmith-picset-generate to give browsers choice

Example use

Add to your pipeline like

npm i metalsmith-picset-handlebars-helper --save
const picsetHandlearsHelper = require('metalsmith-picset-handlebars-helper')
Metalsmith(__dirname)
	...
	.use(picsetHandlearsHelper())
	...

Assume

  • You have a handlebars package installed somewhere either directly or as a sub-dependency (We use that same version / install)
  • /img/picset/anthony_80webp_90jpg_2000,1000,500w.jpg as a 2000px wide 90% quality photo
  • metalsmith-picset-generate is used earlier in your metalsmith pipeline

Then use the handlebars helper like {{{picset "anthony" 500}}} to output something like

<picture>
	<source type="image/webp"
		srcset="img/srcsets/anthony-2000.webp 2000w, img/srcsets/anthony-1000.webp 1000w, img/srcsets/anthony-500.webp 500w" sizes="100vw" />
	<img src="img/srcsets/anthony-500.jpg"
		srcset="img/srcsets/anthony-2000.jpg 2000w, img/srcsets/anthony-1000.jpg 1000w, img/srcsets/anthony-500.jpg 500w" sizes="100vw" />
</picture>

Specification

Metalsmith requirements

  • You have a handlebars package installed somewhere either directly or as a sub-dependency (We use that same version / install)

Metalsmith options object

{
	path: 'img/picset'
}

path

  • Relative to Metalsmith source folder
  • Default: img/picset/

Helper use

Like {{{picset NAME DEFAULT_WIDTH SIZES ALT}}}

  • Parameter 1 (NAME): Image source name
  • Parameter 2 (DEFAULT_WIDTH): Default width
  • Parameter 3 (SIZES): Optional sizes
  • Parameter 4 (ALT): Optional alt tag

Generates <picture> elements with:

  • srcset parameters that include all files found following metalsmith-picset-generate's naming convention
  • <source> with .webp type in srcset
  • <img> with:
  • srcset with file type of .jpg, .png, or .svg as a fallback
  • src at default width and same file type as it's srcset
  • sizes attribute as specified duplicated on both the <source> and <img ...> tags

Background info

Philosophy

  • Convention over Configuration
  • Simple case of resizing only (artistic decisions not thought through for this)
  • Give the browser all availble choices
  • Reduce bandwidth bloat and keep high quality:
  1. .webp is first choice
  2. Responsive size is first choice
  3. Always give fallbacks
  • Standards based (Using <picture> with inner <img src="..."> fallback)

Inspiration

Implementation

  • Implemented on Node v6.9.1, untested in other versions
  • Doesn't install handlebars, as assumes you have it in your MetalSmith install and we want to use that same version

About

Uses generated responsive image resolutions :: Those generated by metalsmith-picset-generate display in browser via a <picture> element

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published