3. Shortcodes

What are Shortcodes?

These are small functions that can be called from markdown files to produce some HTML. This website has made custom shortcodes which are located in /themes/hackspace-theme/layouts/shortcodes.

Custom Shortcodes

donation

Description
This shortcode produces a simple PayPal donation button, which allows for users to donate to the Leicester Hackspace.

Parameters
n/a

Location
/themes/hackspace-theme/layouts/shortcodes/donation.html

Example

{{< donation >}}

groupimg

Description
A shortcode to be used in List entries in /content/, which will display all of the images that are in the local page bundle. Each image is output into their own <figure> element, with both a WebP image, JPEG image, and (lower quality) fallback JPEG image.

If the original image has Exif image data (images in the JPEG/TIFF format) and contains the ImageDescription tag, the shortcode will take this value and:

1. Use it as the alt attribute for the <img>
2. Add a <figcaption> to the <figure>, captioning the image with the text

If Exif data is not available, the filename will be used instead.

Parameters
width: The maximum width of pixels that the images should use. If a base image width is shorter than the entered value, it will use the base image width instead (small images stay small). Defaults to 730px

ignore: A space delimited list of files in the local page bundle that should be ignored by the shortcode. File extension should be included.

Location
/themes/hackspace-theme/layouts/shortcodes/groupimg.html

Example

{{< groupimg width="480" >}}
or
{{< groupimg width="400" ignore="image_file_to_ignore.jpg second_file_to_ignore.jpg" >}}

icon

Description
A simple shortcode, adapted from the svg shortcode, which embeds an SVG from the /static/icons/ subdirectory.

Parameters [0]: The first parameter provided is the file name of the icon (without it's file extension)

Location
/themes/hackspace-theme/layouts/shortcodes/icon.html

Example

{{< icon icon_name >}}

iframe

Description
A shortcode which adds an <iframe> element into the markdown.

Parameters
src: The src url of the iframe that you wish to add

width: The width of the iframe (either use a number or a %)

height: The height of the iframe (either use a number or a %)

attributes: Any additional HTML attributes that you want to add to the <iframe> element. Values should be delimited by a space and each attribute should ideally use a ' to enclose the value

Location
/themes/hackspace-theme/layouts/shortcodes/iframe.html

Example

{{< iframe src="https://iframe.domain/and/path" width="200" height="200" >}}
or 
{{< iframe src="https://iframe.domain/and/path" width="100%" height="200" attributes="class='custom-class' data-custom='custom-data-val'" >}}

img

Description
Create an image optimized for use on the main pages

Parameters

Location
/themes/hackspace-theme/layouts/shortcodes/img.html

Example

{{< img >}}

svg

Description

Parameters

Location
/themes/hackspace-theme/layouts/shortcodes/svg.html

Example

Embedded Shortcodes

Hugo comes pre-packaged with some shortcodes, they are referred to as Embedded Shortcodes. You can find out more about them on the hugo website