Skip to content

Shortcodes

Jump to bottom
Sam Osborne edited this page Sep 12, 2016 · 5 revisions

Contents

Different shortcodes are available to achieve different visual effects when creating content.

Also available are all of the shortcodes built-in to Hugo - Highlight, figure, ref/relref, Twitter, YouTube, Vimeo, etc.

Shortcodes are written where the first word is the name of the shortcode, followed by any parameters: {{< name param1 param2 >}}.

Some shortcodes need closing, because they do things to the content within them. For instance, while the img shortcode does not need closing, the pull shortcode does. Shortcodes are closed using a slash: {{< /name >}}

Columns

The template supports the use of columned content. Columns are organised by first creating a row, and then columns within that.

{{< row >}}

Then, decide how many columns you would like and insert that number after the word col:

{{< col 2 >}}

Each column requires its own declaration. These shortcodes nest, so are used as follows:

   {{< row >}}
	 
	{{< col 2>}}

	         ...

	         Words for the first column

	         ...

	    {{< /col >}}

	    {{< col 2 >}}

	        ...

	        Words for the second column

	        ...

	    {{< /col >}}

	{{< /row >}}

Note that each column requires a start and end shortcode, all wrapped within the row.

Groups and Teams

These shortcodes are very similar, they list a section of the groups or the teams. They take one parameter and use a data file to get the content.

{{< grouplist rainbows >}} gets all of the Rainbows groups and puts them in a collapsed arrangement, while

{{< team beeston >}} gets all the team members in the Beeston district and sets them out with their photo, name, role and email address. These can be seen in action in the teams and groups pages.

The single parameter is essential: if there is no parameter, nothing happens. Equally, if the parameter doesn't match an available category within the data file, nothing happens. (If nothing is happening when it should, look out for typos.)

Images

If you want to include an image, it's really easy with the img shortcode. There are three available parameters for this shortcode: image URL, position, and alt-text.

Example: `{{< img http://placekitten.com/50/50 right "A kitten" >}}

Will produce an image of a kitten, put it on the right-hand-side of the page, and if the mouse hovers over it, the text will be revealed. Parameters must be given in the correct order, and this shortcode does not need to be closed.

Pull quotes

Slightly more complicated, but totally worth it. If you'd like a pretty pull-quote, or pull-text, you can do it using the pull shortcode.

The shortcode wraps around some paragraph content, and the pull-quote is placed before that paragraph.

There are two parameters for this shortcode: text and position. The order of these is essential. Position has three possible values: left, right or center. On smaller devices (such as phones), left and right quotes become center quotes for improved visibility.

Example:

	{{< pull "This text will be pulled to the right-hand-side" right >}}
		This paragraph has some text. The pull-quote will go before it.
	{{< /pull >}}

Buttons

See those cool raspberry buttons that are also links? You can do it too - just use the {{< button >}} shortcode. Wrap that around the text that you want to appear in the button and, hey presto, a button appears.

To make the button a link, using Markdown link syntax: [Link text](http://website.com), just put the shortcode within the square brackets:

[ {{< button >}} Button text {{< /button >}} ](http://website.com)

Embedding Flickr Albums

This is super easy to do, and a shortcode has been made so that everything works on devices of all shapes and sizes. First, you want to go to the Flickr album of your choice, and press the share button (arrow pointing to the right). From here, on the 'Share' tab, copy and paste the code you are presented with.

When editing the webpage, simply put the shortcode {{< flickr >}} around the code from the Flickr website: Example {{< flickr >}} ... Flickr code ... {{< /flickr >}}

To fit with our theme, please tick the box for Footer only.

Clone this wiki locally