Shortcode Examples

Hugo Built-in Shortcodes

Hugo provides several built-in shortcodes for common content needs:

YouTube (youtube)

{{< youtube "M7lc1UVf-VE" >}}

Result:

Figure (figure)

{{< figure src="/images/lighthouse.jpg" title="Lighthouse" >}}

Result:

Highlight (highlight)

{{< highlight html >}}
<div class="example">
  <p>This is sample code</p>
</div>
{{< /highlight >}}

Result:

1
2
3

<div class="example">
  <p>This is sample code</p>
</div>

Vimeo (vimeo)

{{< vimeo 146022717 >}}

Result:

Custom Shortcodes

Extended YouTube (youtubeext)

Our custom YouTube shortcode with time control features.

{{< youtubeext "M7lc1UVf-VE" 60 120 >}}

Result:

Bandcamp (bandcamp)

Embed Bandcamp tracks or albums.

{{< bandcamp track 3663864347 3603521890 >}}

Result:

{{< bandcamp album 3663864347 >}}

Result:

Bluesky (bluesky)

Embed Bluesky posts.

{{< bluesky "https://bsky.app/profile/alice.bsky.social/post/j52ib6uwm2g29" >}}

Result:

Facebook Video (facebook-video)

Embed public Facebook videos.

{{< facebook-video "FreakSceneNet/videos/1210723478945933" >}}

Result:

Video (video)

Universal video embed supporting YouTube, Vimeo, and direct video files.

{{< video src="https://youtube.com/watch?v=M7lc1UVf-VE" title="YouTube Video" >}}

Result:

{{< video src="https://vimeo.com/146022717" title="Vimeo Video" >}}

Result:

Image (img)

Advanced image handling with responsive sizes and WebP support.

{{< img src="lighthouse.jpg" alt="A lighthouse" caption="Beautiful lighthouse at sunset" width="800" >}}

Result:

Gallery (gallery)

Create a grid of images.

{{< gallery columns="3" caption="Photo Gallery" >}}
  {{< img src="lighthouse.jpg" alt="Lighthouse" >}}
  {{< img src="sunset.jpg" alt="Sunset" >}}
  {{< img src="beach.jpg" alt="Beach" >}}
{{< /gallery >}}

Result:

Photo Gallery

Bundle Gallery (bundle-gallery)

Create an advanced gallery from page bundle images.

{{< bundle-gallery columns="3" thumbnail_size="400x" large_size="1500x" quality="90" >}}

Result:

Callout (callout)

Create highlighted content blocks.