11ty Picture Shortcode

Another tiny 11ty shortcode, this time to accept more than one parameter to a single shortcode.

Parameters follow the shortcode name and are comma separated, applied to the function in order as you would expect.

_1tty/shortcodes/picture.js

/\*\*

- Picture generates a consistent img with alt text and caption.
-
- picture src='../img/elephant.jpg', 'elephant', 'this is an elephant'
- \*/
  module.exports = function (src, alt, caption, width, height) {

const altText = alt || 'screenshot';

return `<figure class="screenshot">
<img src="${src}" alt="${altText}"
${width ? `width="${width}" ` : '' }
${height ? `height="${height}" `: '' }>
${caption ? `<figcaption>${caption}</figcaption>` : '' }

</figure>`;
};

Wrapping the markup in this way means we can change the img or figure tags in one place. Not much more to say about it than that.