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:
|
|
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:
|
|
- Line 1 - defines the dataset title.
- Line 2 - specifies the
iFrame
URL. - Line 3 - specifies the
iFrame
sandbox=
permissions property. Default is empty value. This field is an array of strings holding all compatible sandbox security policy. - Line 7 - defines the
width
parameter. This goes by pixel or etc. defining on how wide you need it to be. Dynamic values like percentage wonโt work here since the component is dynamically styled. This is compulsory for AMP HTML. - Line 8 - defines the
height
parameter. This goes by pixel or etc. defining on how high you need it to be. Dynamic values like percentage wonโt work here since the component is dynamically styled. This is compulsory for AMP HTML. - Line 9 - the values for
class=
property. - Line 10 - defines the iframe content for Vanilla HTML. It first scans for available partial for scanning. If the file is unavailable, it will then process the content as Markdown format. Should any HTML error occurs, the content will finally be processed as HTML format.
- Line 11 - defines the iframe content partials path for AMP HTML. Its
choices of processing is the same as
VanillaHTML
. - Line 15 - defines iFrame
layout=
property. This is only used in AMP HTML where the value is alwaysresponsive
. - Line 16 - defines iFrame
title=
property. This is for accessibility usage.
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:
|
|
Calling Shortcode
{{< iframe <type> <datasetPath> >}}
iframe
shortcode takes 2 parameters:
<type>
- the type of iframe.<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:
|
|
This will render the output as:
|
|
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.