Rich Content

Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

Gist Simple Shortcode

{{< gist spf13 7896402 "img.html" >}}

	<!-- image -->
	<figure {{ if isset .Params "class" }}class="{{ index .Params "class" }}"{{ end }}>
	{{ if isset .Params "link"}}<a href="{{ index .Params "link"}}">{{ end }}
	<img src="{{ index .Params "src" }}" {{ if or (isset .Params "alt") (isset .Params "caption") }}alt="{{ if isset .Params "alt"}}{{ index .Params "alt"}}{{else}}{{ index .Params "caption" }}{{ end }}"{{ end }} />
	{{ if isset .Params "link"}}</a>{{ end }}
	{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
	<figcaption>{{ if isset .Params "title" }}
	<h4>{{ index .Params "title" }}</h4>{{ end }}
	{{ if or (isset .Params "caption") (isset .Params "attr")}}<p>
	{{ index .Params "caption" }}
	{{ if isset .Params "attrlink"}}<a href="{{ index .Params "attrlink"}}"> {{ end }}
	{{ index .Params "attr" }}
	{{ if isset .Params "attrlink"}}</a> {{ end }}
	</p> {{ end }}
	</figcaption>
	{{ end }}
	</figure>
	<!-- image -->

view raw img.html hosted with ❤ by GitHub

Twitter Simple Shortcode

{{< tweet GoHugoIO 1315233626070503424 >}}

Profile is a customizable single-page portfolio theme for Hugo featuring a contact form and blog. Made by @gurusabarishh.https://t.co/KwYcwfdy16
— GoHugo.io (@GoHugoIO) October 11, 2020

Vimeo Simple Shortcode

{{< vimeo 146022717 >}}

Youtube Simple Shortcode

{{< youtube w7Ft2ymGmfc >}}

Theme Custom Shortcodes

These shortcodes are not Hugo built-ins, but are provided by the theme.

Responsive Images with Cloudinary

You can learn more about this here.

Set the cloudinary_cloud_name parameter in your site config to use this shortcode.

{{< dynamic-img src="/my/image/on/cloudinary" title="A title for the image" >}}

Note that you do not include the file extension (e.g. .png) in the src parameter, as the shortcode will automatically determine the best quality and format for the user’s device.

Optionally, you can customize the general CSS styles for the image:

{{< dynamic-img src="/my/image/on/cloudinary" title="A title for the image" style="max-width:60%" >}}