Rich Content
May 18, 2021 by Jake G [Features] #video #audio #images #shortcodes - 3 minSeveral 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
{{ video(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
Output
<video controls>
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000_av1.mp4" type="video/mp4">
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000_vp9.webm" type="video/webm">
Your browser doesn't support the video tag and/or the video formats in use here – sorry!
</video>
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
{{ image(sources=["over9000-960.webp", "over9000-640.webp", "over9000-400.webp"], fpath="over9000-640.webp", fw=640, fh=480, falt="ITS OVER 9000!") }}
Output
<picture>
<source srcset="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000-960.webp" type="img/webp">
<source srcset="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000-640.webp" type="img/webp">
<source srcset="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000-400.webp" type="img/webp">
<img src="over9000-640.webp" alt="ITS OVER 9000!" width="640" height="480" />
</picture>
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
{{ gif(sources=["over9000_av1.mp4", "over9000_vp9.webm"]) }}
Output
<video autoplay loop muted playsinline>
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000_av1.mp4" type="video/mp4">
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000_vp9.webm" type="video/webm">
Your browser doesn't support the video tag, which I use in place of .gifs, and/or the video formats in use here – sorry!
</video>
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
{{ audio(sources=["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]) }}
Output
<audio controls>
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000.ogg" type="audio/ogg">
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000.mp3" type="audio/mp3">
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000.flac" type="audio/flac">
<source src="https://deploy-preview-61--abridge.netlify.app/overview-rich-content/over9000.wav" type="audio/wav">
Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
</audio>