Shortcodes

Shortcodes are a way to add custom functionality to your contents/posts. They are used to add custom functionality to your posts. If you need to add a custom shortcode, you can contact us for a custom service.

Image Shortcode

We build a custom image shortcode that allows you to specify the image height, width, position, command, and many more options. You can use the shortcode in your content.

{{< image src="image.png" caption="Image Caption" alt="alter-text" height="100" width="200" position="float-left" command="fill" option="q10 r90" class="img-fluid" title="Image Title" webp="true" >}}

1. src is the source of the image. You can use a local image [assets/static/content] or an external image.
2. caption is the caption of the image. When you put a caption, then the image will wrap in a figure element.
3. alt is the alter text for the image. It helps to describe the image.
4. height can specify the height of the image.
5. width can specify the width of the image.
6. position can be set to left, right, center, float-left, float-right.
7. command can be used to implements the Resize, Fit, or Fill. Learn more about commands here
8. option can specify the image options like background color, quality, hint, rotate, anchor, and resample filter. Learn more about options here
9. class can add classes to the image. If you need to add any classes, then you can use the class attribute.
10. title can add a title attribute to the image.
11. webp can be set to true or false (default is true). If false it will not convert image into webp format.

Gist Shortcode

{{< gist johndoe 12345 >}}

You can embed a Github gist in your content. It takes two parameters, First the username and then the gistid. The following example will embed a gist from the user johndoe with the id 12345.

Youtube Shortcode

{{< youtube w7Ft2ymGmfc >}}

The youtube shortcode embeds a responsive video player for YouTube videos. This shortcode takes a single parameter, the video ID.

Vimeo Shortcode

{{< vimeo 146022717 >}}

The Vimeo shortcode embeds a responsive video player for vimeo videos. This shortcode takes a single parameter, the video ID.

Instagram Shortcode

{{< instagram BQD9zQQFQZ >}}

If you want to display your Instagram photos, you can use the Instagram shortcode. You only need the photo’s ID. You can find the ID in the URL of the photo. For example, the URL of the photo is https://www.instagram.com/p/BQD9zQQFQZ/ and the ID is BQD9zQQFQZ.

Twitter Shortcode

{{< tweet 877500564405444608 >}}

This shortcode allows you to embed a Twitter feed. You can use it to display a feed of a specific user’s tweets. This shortcode takes one parameter. The parameter is the id of the feed you want to display.