Rich ContentPatrick Martini May 18, 2021 [Features] #video #audio #images #shortcodes
Several custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), in addition to those already provided by Zola.
audio were created to help you take advantage of modern HTML elements in your writing.
video shortcode takes a
sources parameter (an array of strings)
and returns a
<video> tag. Each string in the
sources array should
be a path to a video file of a different type (
mp4, etc). Each
individual source is then converted into a
<source> tag, and the
element is returned.
Your browser doesn't support the video tag and/or the video formats in use here – sorry!
image shortcode returns a
<picture> tag and accepts three
sources (an array of strings),
fallback_alt (both strings).
Each string in the
sources array should be a path to an image file of
a different type (
falt are used to create an
<img> tag for the browser to fall
back on if the other formats aren't yet supported, fw and fh set the width and height of the fallback
gif shortcode is exactly the same as the video shortcode
– it takes an array of strings called
sources and returns a
<video> tag. The only difference is in the outermost tag, which has
four additional properties:
<video> tag in place of gifs allows for reduced file sizes,
which is especially important in regions where internet is slower or
Your browser doesn't support the video tag, which I use in place of .gifs, and/or the video formats in use here – sorry!
audio shortcode takes a
sources array of strings and returns an
<audio> tag. Each string in the
sources array should be a path to an
audio file of a different type (
The browser will play the first type it supports, so placing them in order of size smallest to largest will use the least bandwidth if that is your goal.
Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
Back to top