Parameter Won't Render

support
1

Hi,
I want to render an iframe on one page. In my front matter, I have this:

puzzle= '<iframe title="LiChess Daily Puzzle" src="https://lichess.org/training/frame?theme=brown&bg=dark" style="width: 400px; height: 444px;" allowtransparency="true" frameborder="1"></iframe>'

In the body of my markdown file I have this:

{{ .Params.puzzle }}

In stead of the iFrame, when I type hugo server to test the page, the content in the double braces appears on my page. I have to be missing something very basic and obvious. What is it?

Thanks so much. I’ve done reading about shortcodes and I have not gotten that to work either. Instead of embedding the page, I see a link inside the iframe. The above was the latest attempt.

2

You cannot place template code in content. Use a shortcode instead.

3

Hi Joe,

Thank you so much for the quick reply. I also tried using a shortcode. When I did, instead of the page rendering in the iframe, a link to the page rendered in the iframe.

In my markdown file, I call the shortcode like this.

{{< daily-puzzle >}}

Here is my shortcode file.

<iframe title="LiChess Daily Puzzle" src="[https://lichess.org/training/frame?theme=brown&bg=dark](https://lichess.org/training/frame?theme=brown&bg=dark)" style="width: 400px; height: 444px;" allowtransparency="true" frameborder="0"></iframe>

I’ve been playing around with my configuration file because I was reading about getting the markdown to render. I have some commented out parameters, because I’m still trying to understand how that works. Here is the commented out code.

# [markup.goldmark.renderer]
# html.withunsafe=true
# unsafe = true
# xhtml = true

Thanks for everything.

Jim

4

content/post/test.md

+++
title = 'Test'
date = 2021-01-01T00:00:00-00:00
draft = false
[puzzle]
title = 'LiChess Daily Puzzle'
src = 'https://lichess.org/training/frame?theme=brown&bg=dark'
+++

{{< daily-puzzle >}}

layouts/shortcodes/daily-puzzle.html

<iframe
  title="{{ .Page.Params.puzzle.title }}"
  src="{{ .Page.Params.puzzle.src }}"
  style="width: 400px; height: 444px;"
  allowtransparency="true"
  frameborder="1">
</iframe>

Or parameterize the shortcode instead of setting front matter…

markdown

{{< daily-puzzle title="LiChess Daily Puzzle" src="https://lichess.org/training/frame?theme=brown&bg=dark" >}}

layouts/shortcodes/daily-puzzle.html

<iframe
  title="{{ .Get "title" }}"
  src="{{ .Get "src" }}"
  style="width: 400px; height: 444px;"
  allowtransparency="true"
  frameborder="1">
</iframe>
5

Hi,
Thank you for the code. I understand it now. I’m sorry to have to write this reply.

When I implemented it, my page showed an iframe with a link to the page. I expected to see the actual page. Am I misunderstanding what’s supposed to happen, or is there possibly a configuration paramater I need to add or change that wouldmake my site show the page?

6

Without looking at your project repository, I would just be guessing.

Here’s a working example:

git clone --single-branch -b hugo-forum-topic-40809 https://github.com/jmooring/hugo-testing hugo-forum-topic-40809
cd hugo-forum-topic-40809
hugo server