CODEWITHSUNDEEP
iframehugohugo-shortcode
martin
martin

Reputation: 2194

Iframe source inside a hugo shortcode

I created a custom shortcode which includes an iframe to another static file of my blog. Something like this:

<iframe class="map" type="text/html" width="100%" src="/somefile.html?param={{ index .Params 0 }}" allowfullscreen frameborder="0">

The actual content is in the iframe src. I am trying to understand the best practice of where to put this file (somefile.html in the example above). Right now, it's under my static folder but I feel it would make more sense to keep it "closer" to the shortcode definition itself, especially if I want to share the shortcode with others.

Is there a way to make this work, i.e. reference a static html file within a shortcode template?

I considered using srcdoc but I couldn't figure out how to escape the quotes inside the html properly.

On a related note, is there a way to reference resources (like a stylesheet) from within the iframe source?

Upvotes: 1

Views: 739

Answers (1)

abenrob
abenrob

Reputation: 886

In my case I define the source url in the front matter for the page the iframe is contained within

---
iframeSource: "target_asset_name"
---

Then use it as such:

{{- $srcurl := (print .Site.BaseURL "iframe_assests_root/" .Params.iframeSource "/") -}}
<iframe src="{{- $srcurl -}}"></iframe>

in that way you can put it wherever you want (I put in assets/iframe_assets_root)

Another option would be to put in a folder in assets/ i.e. assets/iframesources/, and use page resources tools à la

{{- $ifsrc := resources.Get "iframesources/myiframe.html" -}}
<iframe src="{{- $ifsrc.Permalink -}}"></iframe>

Upvotes: 1

Related Questions