HUGO

How to use <iframe> content correctly in a yaml file

Hello,

I am using the Hugo-creative-theme, and I would like to embed some external content via an iframe. I don’t really know how I should do it and would appreciate any help.

My Github page

What i have tried:

Within the layout folder I have created a file (h5p.html) and the following is within

{{ if .h5p }}
<iframe src="https://elearnvietnamese.h5p.com/content/1290436679514644339/embed {{ .h5p }}" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>
{{ end }}

Then in the yaml file where I want to put this content, I have added the name of content to the list (h5p)

modalID: 1
title: Greetings | Meeting people on the street
date: 20-09-2018
img: 1.jpg
client: My Vietnamese Tutor
clientLink: "#"
category: eLearning
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.
h5p:

I don’t know what I am I missing!

I am thinking that I might need to add something into the modals.html template where the formatting for this page comes from but I’m not sure.
Any help is much appreciated.

Ben

What are you trying to do? I presume the subject is a question, but using "<iframe> content in a yaml file" doesn’t make sense to me. YAML is a text format, so I think you mean you want to embed an iframe in a content file.

If that is the case, build a shortcode. There are other ways to do it, but that will work and teach you how.

It was good to share your repo, but your repo doesn’t have content or layouts, so it won’t actually be useful to assist you. :slight_smile:

To piggyback on @maiki’s recommendation, you are confusing, I think, partial templates with shortcodes, the latter of which you can use in the content area of your markdown files (i.e. everything below your closing ---). It also looks like you don’t have anything inside layouts in your current repo because you are using the hugo-creative-theme. Luckily, it’s easy for you to add layouts at the root of your project, since Hugo will first look at your declared theme and then inside your root project directory.

Shortcode Example

1. Create a shortcode template at /layouts/shortcodes/hp5.html

<iframe src="{{.Get 0}}" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>

2. Call this shortcode inside a content file

You can then call this shortcode as follows in the prose section of your markdown files (i.e. again, everything you write free from in your markdown file after the closing --- yaml frontmatter delimiter:

...
---

## Level 2 Header

Here is some content I am writing. Blah blah blah. 

Speaking of Vietnamese, here is a video from Xin Chào on common Vietnamese greetings:
 
{{< hp5 "https://elearnvietnamese.h5p.com/content/1290436679514644339/embed" >}}

Additional content, blah blah blah....

When the site builds, that shortcode will render inside body copy as follows *:

<iframe src="https://elearnvietnamese.h5p.com/content/1290436679514644339/embed {{ .h5p }}" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>

* Note that you’ll probably want to put this in some kind of HTML wrapper to make it responsive.

Partial Template Example

Now, let’s say you want to have a video at the top of every post that shares the same template. For example, let’s say you want your pages to have a video at the top any time you specifically reference the iframe’s src inside a content file’s frontmatter

1. Create frontmatter that reference the URL for the iframe src in your YAML

---
title: Vietnamese Greeting
date: 2018-09-23
publishdate: 2018-09-23
description: An introduction to Vietnames greetings
hp5id: 1290436679514644339 
---

Note that unlike the example above, I’m just having you use the video ID, which you can do with the shortcode as well (on second thought, this will be easier and much shorter inside your markdown files).

2. Create the partial template at layouts/partials/hp5.html

{{ with .Params.hp5 }}
<iframe src="https://elearnvietnamese.h5p.com/content/{{.}}/embed" width="1088" height="637" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>
{{ end }} 

3. Use this partial in whatever page template you want

{{ partial "hp5.html" . }}

HTH.

2 Likes

Thanks @rdwatters for your reply. It is very detailed.

Thought unfortunately, I haven’t been able to get the iframe content to display.
I have tried both methods.

If looking at your The Partial Template Example

  1. In the project YAML file (which is located in the root directory (>data>projects) folder ) there is no frontmatter! with the 3 hyphens - - - wrapping its content as you have shown. see example of its content:
modalID: 1
title: Greetings | Meeting people on the street
date: 20-09-2018
img: 1.jpg
client: My Vietnamese Tutor
clientLink: "#"
category: eLearning
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel enim aliquid dicta ullam in repellendus amet perspiciatis adipisci architecto obcaecati sit voluptas ipsam, deleniti neque placeat tenetur cum tempore velit.
h5pID: 1290436679514644339

And when I added it with frontmatter as you showed in your step 1, that didn’t work either.
Step 2 - I created the partial template as you illustrated in the layouts > partials.
Step 3 - When I put this partial {{ partial "h5p.html" . }} into any page it didn’t work.
EDIT
I tried adding it in various pages. But I wanted it in modals.html where each portfolio item is generated from.

Sorry if there is something glaringly wrong that I am doing, pls let me know. This is my first time to work with Hugo so I’m still very new and unsure.
Best regards,
Ben

Are you putting inside your page templates (i.e. XXX.html) or inside your content files (i.e. XXXX.md)?

@jamestagal The problem here is that the repo you’re showing me hasn’t been updated in two days, so I can’t really test. Can you push your local code that is not working to the same GH repo so that I can clone locally and test? I’ve definitely done my fair share of embeds with iframes, so you shouldn’t be having this problem.

Hello @rdwatters

Actually inside page templates (xxx.html) because there are no content files (xxx.md) for this theme. I wanted to add the iframe content to one of the portfolio (YAML) pages in this theme.

I have just pushed my recent changes to my Github repo so you should be able to see it now.

https://github.com/jamestagal/awesome-static-site

Thanks for your help and time to look into this for me.
Best regards,
Ben

@jamestagal, the thing you are trying to do is edit a theme feature that works in a very specific way.

From the theme’s readme:

Copy the folder projects inside the data folder in the root directory of your site. Let’s make some changes to show your work.

Pay attention to the modalID . It must be a unique integer and be incremented with each new project you want to add to the portfolio. Otherwise, the corresponding modal can’t be rendered.

Furthermore, you can use Markdown syntax for URLs like here [text](//url.to/source) in the description.

The description field in those data files are actually rendered in modals.html, specifically:

So it means that whatever you put in that field is going to be transformed there. If you want to add more fields, so as an iframe partial, you need to ensure your output is showing in modals.html.

I’d probably add a section to modals.html (as a template override in your project) and use {{ with .h5pID }}, and then build my embed code around that.

1 Like

Thanks @maiki

Thanks for your reply. I followed the readme and copied over the yaml files to the projects folder in the root directory see one in my repo.
https://github.com/jamestagal/awesome-static-site/blob/master/data/projects/2014-07-05-project-1.yaml

And here is the iframe content in a partial located in the layouts folder: (Using suggestion from @rdwatters)
https://github.com/jamestagal/awesome-static-site/blob/master/layouts/partials/h5p.html

And on line 18 and 19 I added the {{ with .h5pID }}
https://github.com/jamestagal/awesome-static-site/blob/master/layouts/partials/modals.html

So still not getting any content on the modal page. Pls take a look if you can.
Best regards,
Ben

Sorry, I don’t have time to figure this out. I suggest you get a part of this working by itself, and then combining. For instance, get a partial working, as in it outputs the appropriate content. Or modify that modal.html to where it is showing something (you aren’t actually rendering anything, you are just checking if there is .h5pid).

You are trying to do three or hour things, so I suggest focusing on one at a time. :slight_smile:

Hi @maiki

I was able to embed the iframe directly into the aside.html template but haven’t been able to figure out the other methods explained here ie Shortcode and Partial Template in a YAML file. You can see the way the iframe embeds here. eLearn Vietnamese

I have a couple of related questions:

In the theme I am using, Creative-Hugo-Theme, in the example YAML files for the portfolio items, don’t use any frontmatter which @rdwatters refereed to in both his examples of embedding iframes with explicit instructions to how to add in relation to frontmatter.
Why is this so? Is this use of a YAML file not usually? and how does it work without frontmatter? I still trying to understand how to use these embed options correctly when my theme doesn’t use frontmatter.

Best regards,
Ben

There are two general ways to produce content pages: content pages in /content, and data files. The YAML for portfolios uses a data template (meaning a data file, rather than a piece of “content”).

The way that theme works is normal, but when @rdwatters was responding, you hadn’t shown a repo, and your YAML example looks like front matter. It was an educated guess, as we have no way of knowing what folks are talking about if they don’t show us. :slight_smile:

Read up on data templates if you want to understand more about how that theme loads portfolio projects.

2 Likes

hello @maiki @rdwatters
thank you both so much for spending the time to help out with my issues. Though I am still trying to work out how to get embedding to work with partial template, i have still learnt a few important thing n the process and a temporary solution for now
best regards.
Ben

2 Likes