Rich Content
Jake G May 18, 2021 [Features] #video #audio #images #shortcodesSeveral custom shortcodes are included to augment CommonMark (courtesy of d3c3nt theme), in addition to those already provided by Zola. video
, image
, gif
, and audio
were created to help you take advantage of modern HTML elements in your writing.
Video
The 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 (webm
, mp4
, etc). Each
individual source is then converted into a <source>
tag, and the
element is returned.
Usage
Output
Your browser doesn't support the video tag and/or the video formats in use here – sorry!
Image
The image
shortcode returns a <picture>
tag and accepts three
parameters: sources
(an array of strings), fallback_path
, and
fallback_alt
(both strings).
Each string in the sources
array should be a path to an image file of
a different type (webp
, png
, jpg
, etc). fpath
and
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
Usage
Output
![ITS OVER 9000!](over9000-640.webp)
GIF
The 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: autoplay
, loop
, muted
, playsinline
.
Using the <video>
tag in place of gifs allows for reduced file sizes,
which is especially important in regions where internet is slower or
less reliable.
Usage
Output
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
The 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 (ogg
, mp3
, flac
, wav
, etc).
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.
Usage
Output
Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!