anthonyastige/metalsmith-picset-handlebars-helper

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

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

• Responsive Images: If you’re just changing resolutions, use srcset
• Don’t use <picture> (most of the time)
• Using the picture element to load WebP images with fallback
• Srcset and sizes

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

metalsmith-picset-handlebars-helper's Issues

Missing helper: "picset"

Ok, I am at a loss - I'm getting the following error and I have tried everything under the moon. Any ideas? I appreciate your input. Thnx

{ Error: Missing helper: "picset"
at Object. (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\helpers\helper-missing.js:19:13)
at Object.eval [as main] (eval at createFunctionContext (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:254:23), :25:74)
at main (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:175:32)
at Object.ret (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:178:12)
at Object.ret [as wrapper/main/article] (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\compiler\compiler.js:526:21)
at Object.invokePartialWrapper [as invokePartial] (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:72:46)
at eval (eval at createFunctionContext (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:254:23), :5:31)
at prog (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:221:12)
at execIteration (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\helpers\each.js:51:19)
at Object. (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\helpers\each.js:61:13)
at eval (eval at createFunctionContext (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:254:23), :5:34)
at Object.prog [as fn] (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:221:12)
at Object. (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\helpers\if.js:19:22)
at Object.eval [as main] (eval at createFunctionContext (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\compiler\javascript-compiler.js:254:23), :12:32)
at main (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:175:32)
at ret (C:\xampp\htdocs\node_modules\handlebars\dist\cjs\handlebars\runtime.js:178:12)
description: undefined,
fileName: undefined,
lineNumber: undefined,
message: 'Missing helper: "picset"',
name: 'Error',
number: undefined }

Sizes helpers

I work a lot in bootstrap and would like helpers to generate the sizes="" parameter more easily.

However this plugin should be generic enough to work outside of bootstrap.

Maybe another plugin to help this one? Would prefer not to extend it, but we could if needed.

Can we remove extra size=""?

Right now we redundantly add the attribute to both the <source> and the <img>

Default quality differentiation?

It might be optimal to set default quality to 100 for different filetype sources

• png @ 100 (expected lossless)
• jpg @ 80 (expected compression)

Reading quality from jpg would be iffy as it's not stored in the format by default, so don't go there.