Rich Content

by FIGBERT

d3c3nt ships with several custom shortcodes to augment CommonMark, 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=["example.webm", "example.mp4"]) }}

Output

<video controls>
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.webm" type="video/webm">
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.mp4" type="video/mp4">
  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). fallback_path and fallback_alt are used to create an <img> tag for the browser to fall back on if the other formats aren’t yet supported.

Usage

{{ image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") }}

Output

<picture>
  <source srcset="https://d3c3nt.figbert.com/posts/rich-content/example.webp" type="img/webp">
  <source srcset="https://d3c3nt.figbert.com/posts/rich-content/example.jpg" type="img/jpg">
  <source srcset="https://d3c3nt.figbert.com/posts/rich-content/example.png" type="img/png">
  <img src="example.png" alt="Lorem Ipsum"/>
</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=["example.webm", "example.mp4"]) }}

Output

<video autoplay loop muted playsinline>
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.webm" type="video/webm">
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.mp4" type="video/mp4">
  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 (wav, ogg, mp3, etc).

Usage

{{ audio(sources=["example.wav", "example.ogg", "example.mp3"]) }}

Output

<audio controls>
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.wav" type="audio/wav">
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.ogg" type="audio/ogg">
  <source src="https://d3c3nt.figbert.com/posts/rich-content/example.mp3" type="audio/mp3">
  Your browser doesn't support the audio tag and/or the audio formats in use here – sorry!
</audio>