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.

Gallery Shortcode

We build a custom image gallery that support Hugo image processing with Image zoom. You just need to specify the directory name of images. You can use the shortcode in your content.

{{< gallery dir="images/gallery" class="my-gallery" height="400" width="400" webp="true" command="Fill" option="q10 r90" zoomable="true" >}}

1. dir for the directory of the images. You can use local images from [assets/static/content].
2. class value will be the parent class-name of your gallery.
3. height can specify the height of the image.
4. width can specify the width of the image.
5. webp can be set to true or false (default is true). If false it will not convert images into webp format.
6. command can be used to implements the Resize, Fit, or Fill. Learn more about commands here.
7. option can specify the image options like background color, quality, hint, rotate, anchor, and resample filter. Learn more about options here.
8. zoomable can be set to true or false (default is false). If true images will popup on click.

Collapse Shortcode

{{< collapse "this is a simple collapse" >}}
This is the content that collapse
{{</ collapse >}}

Collapse shortcode allows you to create collapsible content blocks. You can use it to create accordions or to create collapsible panels. It takes one parameter as collapse header and inner content.

Notice Shortcode

{{< notice note >}}This is a simple note{{</ notice >}}

You can use this shortcode to display a notice. The notice can be styled with the following tags: note, warning, tip, info. You can use markdown in the notice.

Tab Shortcode

{{< tabs >}}

  {{< tab "first tab" >}}
  This is first Tab Content
  {{< /tab >}}

  {{< tab "second tab" >}}
  This is second Tab Content
  {{< /tab >}}
  
{{< /tabs >}}

This shortcode allows you to create a tabbed content block. You can add as many tabs as you like. The content of every tab writes in the tab shortcode. You can use this example code to create a tabbed content block.

Highlight Shortcode

{{< highlight html >}}
<section class="section">
  <div class="container">
    <h1>Hello World!</h1>
  </div>
</section>
{{< /highlight >}}

This shortcode allows you to highlight text. Highlight takes exactly one required language parameter. See the Highlighting documentation for a list of supported languages.

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.

HTML5 or CDN Video Shortcode

We build a HTML5 or CDN based video shortcode for hugo. You just need to specify the local video directory(or CDN link). You can use the shortcode in your content.

{{< video src="video/my_video.mp4" class="my-custom-video" height="auto" width="500" autoplay="false" loop="false" muted="false" controls="true" >}}

1. src for the directory or URL of the video. You can use local images from [CDN/assets/static/content].
2. class value will be the class-name of your video
3. height can specify the height of the video.
4. width can specify the width of the video.
5. autoplay can be set to true or false (default is false). If true video will autoplay.
6. loop can be set to true or false (default is false). If true video will restart after end.
7. muted can be set to true or false (default is false). If true video sound will muted.
8. controls can be set to true or false (default is false). If true video controls will show.

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.