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" >}}
  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.

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.

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.

Improve this page on Github  — Last updated:  Mon, Sep 13, 2021