Rich Content

Several 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://lunce.com/overview-rich-content/over9000_av1.mp4" type="video/mp4" />
  <source src="https://lunce.com/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://lunce.com/overview-rich-content/over9000-960.webp" type="img/webp" />
  <source srcset="https://lunce.com/overview-rich-content/over9000-640.webp" type="img/webp" />
  <source srcset="https://lunce.com/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://lunce.com/overview-rich-content/over9000_av1.mp4" type="video/mp4" />
  <source src="https://lunce.com/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://lunce.com/overview-rich-content/over9000.ogg" type="audio/ogg" />
  <source src="https://lunce.com/overview-rich-content/over9000.mp3" type="audio/mp3" />
  <source src="https://lunce.com/overview-rich-content/over9000.flac" type="audio/flac" />
  <source src="https://lunce.com/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>

Back to top