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.