iframe Shortcode

iframe is various outputs has different HTML tags like amp-iframe for AMP HTML and iframe for Vanilla HTML. Bissetii created this shortcode to generate the necessary iframe HTML codes accordingly and simultenously.

Example usage:

1
{{< iframe "default" "bissetii.data.iframes.example.myExample" >}}

This shortcode is available starting from v1.12.1.

Heads-Up

While the shortcode is useful, it breaks the Markdown syntax conventions due to Hugo specific shortcode feature. Therefore, when using other Markdown renderer, these shortcodes would be rendered as text instead of HTML code fragments.

Also, be careful and stay safe while using this shortcode. It allows any form of HTML to be embedded into your Markdown page.

Using iframe

There are a number of requirements for using iframe shortcode. You should fulfill them from the top to the bottom in sequence.

Create Dataset in Data File

Due to the highly robust, unique, and use-case specific security requirements for each iframe, it is at best to use dataset approach via the Hugo data/ directory. iframe shortcode recognizes the following TOML data file pattern:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
[myExample]
URL = "/"
Sandbox = [
	"allow-scripts",
	"allow-same-origin",
]
Width = "300"
Height = "300"
Class = ""
VanillaHTML = "bissetii-only/iframe/myExample/content.html"
AMPHTML = """
### Markdown Header
This is a markdown message.
"""
Layout = "repsonsive"
Title = "Example iframe Data File"

Import AMP-iFrame Extension

For Accelerated Mobile Pages (AMP) HTML output, before proceeding to call the shortcode, you need to import the amp-iframe in order to render <amp-iframe> for AMP output. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
...

[amp]
modules = [
	...,
	"amp-iframe",
]


...

Calling Shortcode

{{< iframe <type> <datasetPath> >}}

iframe shortcode takes 2 parameters:

  1. <type> - the type of iframe.
  2. <dataPath> - the data path for the dataset in the data path.

type Parameter

The first type parameter is a reserved parameter mainly to facilitate various kinds of iFrame styling in the future. To see all types of available iFrame styling, please visit: iFrame Component.

dataPath Parameter

The dataPath paramter is a Pathing.Name combination to select a dataset from a given data file inside data/ directory. It goes by the format of relative.path.to.file.listName. For example:

Dataset    :                            .mySite
Stored File:  data/subdirectory/myIFrame.toml
dataPath   :       subdirectory.myIFrame.mySite

The dataPath should be: subdirectory.myIFrame.mySite.

Example Usage

Since this is a HTML renderer in Markdown file, you want to call in the shortcode using the < symbol instead of %. The brackets are as follow:

1
2
3
4
5
6
# This is Markdown Heading
Your normal text here.

{{< iframe "default" "bissetii.data.iframes.example.myExample" >}}

## Back to Markdown

This will render the output as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<h1>This is Markdown Heading</h1>
<p>Your normal text here.</p>

<iframe src="https://www.zoralab.com/en-us/"
        sandbox="allow-scripts allow-same-origin"
        width="300"
        height="300"
        class="my-class"
        title="Example iframe Data File">
        <p><strong>Example of Using Markdown</strong></p>
<p>This is markdown text.</p>
</iframe>


<h2>Back to Markdown></h2>

Conclusion

That’s all about iframe shortcode in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.