CODEWITHSUNDEEP
iframelocalhugo
user25482
user25482

Reputation: 33

How to embbed a local html in a hugo post: specify the location of the html file

I'm trying to embed a local html file (as an iframe) in a hugo post however I don't quite understand where the html file should be placed.

In a similar post the following code is mentioned but I'm confused about the location of the program folder

---
title : "Hello World"
summary : "Simple program"
url : "program/helloworld"
--- 
<iframe width="100%" height="150" name="iframe" src="dashboard.html"></iframe>

On another post the following solution is described however, it is not clear where should the second part be placed (inside the markdown file or is it a shortcode) nor whether the target_asset_name should include only the file name (with extension) or it can be a subfolder within the iframe_assests_root

---
iframeSource: "target_asset_name"
---

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

I would greatly appreciate if anybody could provide a more specific example on any of the above answers. Thanks...

Upvotes: 2

Views: 1159

Answers (2)

user25482
user25482

Reputation: 33

Thank you for the reply. Unfortunately, I'm still confused as how the 'program/helloword' map to the content/posts folder. However, after reading, "Build Websites with Hugo" by Brian Hogan, I was able to embed the iframe by using a page bundle. For those (like me) who are unfamiliar with Hugo's syntax it basically involves making a folder with the post name (e.g. content/posts/iframe) and within it create: a markdown file with the name index.md and a folder where the html file would go (e.g. content/posts/iframe/iframes). Then, the embed the iframe in the markdown file using:

<iframe width="100%" height="550" name="iframe" src="iframes/myhtml.html"></iframe>

I still have to read more about page bundles, shortcodes and how variables are defined and accessed before I can get to a better solution but for now the above seems to work...

Upvotes: 0

Mr. Hugo
Mr. Hugo

Reputation: 12590

---
title : "Hello World"
summary : "Simple program"
url : "program/helloworld"
--- 
<iframe width="100%" height="150" name="iframe" src="dashboard.html"></iframe>

The code above means that your parent page is at https://www.yourdomain.com/program/helloworld (the 'url'). In this situation the 'dashboard.html' file should be placed in your 'static' directory, that lives in the root of your project.

Upvotes: 1

Related Questions