0
votes

I have created a blog site using RStudio, Blogdown, and Hugo. I have figured out how, in the posts, to embed iframes. Specifically, I needed to embed a YouTube video and Amazon affiliate links. Those are working just fine in the post itself.

The problem I have is that on the home page where there are featured images and a little snippet of what the blog post is about also shows the embedded HTML as plain text. Look at the descriptions in the image posted, they show the embedded HTML.

My toml file has this code chunk in it so I can embed the iframes:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
    unsafe = true

How can I make the main page not show the HTML as plain text?

Screen Shot of my main page - notice embedded text

This is a theme called "hugo-theme-dream" and can be found here.

I found out where the issue might be, but still have no solution. In the layouts->_default folder there is a summary.html file with this line of code: {{ .Summary | safeHTML }}

Do I need something that would ignore HTML perhaps, instead of safeHTML? For now, I am removing the .Summary altogether until I find a better method. Is there a way to tell Hugo what exactly I want as the summary perhaps?

My site contents can be found here.

1

1 Answers

0
votes

I found the solution that works in my case. It turns out, you can easily put a summary variable in the front matter and override the default summary of the first 70 characters of the description. For example,

---
title: NoMa Gallaudet, Tent City and Red Bear Brewing Company
author: mtgingrass
date: '2020-08-31'
slug: noma-gallaudet-tent-city-and-red-bear-brewing-company
categories:
  - Washington DC
tags:
  - DC
summary: This is a test summary
---

## Video

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/WobR0rjWcqA' frameborder='0' allowfullscreen></iframe></div>

Now the HTML will not be part of the summary. This causes a little extra work for the author; however, it solves the issue.