rich-content.md (2689B)
1 +++ 2 title = "Rich Content" 3 description = "A brief description of Hugo Shortcodes" 4 date = 2020-08-26 5 +++ 6 7 d3c3nt ships with several custom shortcodes to augment CommonMark, in 8 addition to those [already provided by Zola][built-in]. `video`, 9 `image`, `gif`, and `audio` were created to help you take advantage of 10 modern HTML elements in your writing. 11 12 <!-- more --> 13 14 ## Video 15 16 The `video` shortcode takes a `sources` parameter (an array of strings) 17 and returns a `<video>` tag. Each string in the `sources` array should 18 be a path to a video file of a different type (`webm`, `mp4`, etc). Each 19 individual source is then converted into a `<source>` tag, and the 20 element is returned. 21 22 ### Usage 23 ```rs 24 {{/* video(sources=["example.webm", "example.mp4"]) */}} 25 ``` 26 ### Output 27 ```html 28 {{ video(sources=["example.webm", "example.mp4"]) }} 29 ``` 30 31 ## Image 32 33 The `image` shortcode returns a `<picture>` tag and accepts three 34 parameters: `sources` (an array of strings), `fallback_path`, and 35 `fallback_alt` (both strings). 36 37 Each string in the `sources` array should be a path to an image file of 38 a different type (`webp`, `png`, `jpg`, etc). `fallback_path` and 39 `fallback_alt` are used to create an `<img>` tag for the browser to fall 40 back on if the other formats aren't yet supported. 41 42 ### Usage 43 ```rs 44 {{/* image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") */}} 45 ``` 46 ### Output 47 ```html 48 {{ image(sources=["example.webp", "example.jpg", "example.png"], fallback_path="example.png", fallback_alt="Lorem Ipsum") }} 49 ``` 50 51 ## GIF 52 53 The `gif` shortcode is exactly the same as the [video shortcode][video] 54 – it takes an array of strings called `sources` and returns a 55 `<video>` tag. The only difference is in the outermost tag, which has 56 four additional properties: `autoplay`, `loop`, `muted`, `playsinline`. 57 58 Using the `<video>` tag in place of gifs allows for reduced file sizes, 59 which is especially important in regions where internet is slower or 60 less reliable. 61 62 ### Usage 63 ```rs 64 {{/* gif(sources=["example.webm", "example.mp4"]) */}} 65 ``` 66 ### Output 67 ```html 68 {{ gif(sources=["example.webm", "example.mp4"]) }} 69 ``` 70 71 ## Audio 72 73 The `audio` shortcode takes a `sources` array of strings and returns an 74 `<audio>` tag. Each string in the `sources` array should be a path to an 75 audio file of a different type (`wav`, `ogg`, `mp3`, etc). 76 77 ### Usage 78 ```rs 79 {{/* audio(sources=["example.wav", "example.ogg", "example.mp3"]) */}} 80 ``` 81 ### Output 82 ```html 83 {{ audio(sources=["example.wav", "example.ogg", "example.mp3"]) }} 84 ``` 85 86 [built-in]: https://www.getzola.org/documentation/content/shortcodes/#built-in-shortcodes 87 [video]: @/posts/rich-content.md#video