How to include iframe/youtube in post summary?

support
1

I first tried using the shortcodes - which worked for my main content, but not the summary (even though it’s the first thing in the post).

All I see in the summary is the first text after the youtube link.

I was able to force it with this in the frontmatter:

summary: <iframe width="560" height="315" src="https://www.youtube.com/embed/..."

But then I’m forced to add my own text from the article that I want for the summary.

I’ve set markup.goldmark.renderer to unsafe.

2

do you have a repo for help? We should look in your partials :wink:

If you define the youtube ID in frontmatter, copy the content from your youtube shortcode to the summary partial. You can NOT use parameters for the partial like for the shortcode
could look like

<div>
	<a href="{{ .RelPermalink }}">{{ .Title  | markdownify }}</a>
	<iframe width=854 height=480 src="https://www.youtube.com/embed/{{ .Params.youtubeid }}?html5=1" frameborder="0" allowfullscreen></iframe><br/>
</div>
3

Thanks @ju52

Unfortunately it’s not ready for publication yet. However, I am using the Anubis theme without modification.

The summary partial is here: https://github.com/Mitrichius/hugo-theme-anubis/blob/master/layouts/partials/postSummary.html

My post looks like this:

---
title: My title
date: 2020-07-03T15:38:50.098Z
description: My description
#summary: <iframe width="560" height="315" src="https://www.youtube.com/embed/...." frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/...." frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Some text here

Note I’ve commented out the summary. If I uncomment it, I see the YouTube video fine in the summary, but obviously not the text.

If I leave the summary commented out, I see my text, but not iframe/video.

I’ve also tried with a shortcode.

So far as I can tell from your proposed solution, you’re saying the .summary var just doesn’t contain the iframe, and there’s no way to get it in there? So I just need a special conditional in the summary partial (as I don’t necessarily have a youtube video).

If that’s the case, the position will no longer be the same as in the post itself right, unless I always put it at the top.

4

Automatic Summary Splitting

By default, Hugo automatically takes the first 70 words of your content as its summary and stores it into the .Summary page variable for use in your templates. You may customize the summary length by setting summaryLength in your site configuration.

try to increase summaryLength

5

Thanks again @ju52 - I just tried that, and all it seems to do is give me more of the plain text after the iframe.

6

I wouldn’t use .Summary for this purpose. I notice .Summary loses everything, including Markdown formatting. So I suspect it will never pass along functional HTML to the browser.

Instead make a summary.html partial that injects a

  1. Thumbnail
  2. Title
  3. post metadata
  4. .Summary
  5. YouTube embed code

Then just use the summary partial to inject that into any place you need a complex summary.

If your theme has a summary.html partial, add something like this:

{{ if isset .Params.#summary }}
    {{ .Params.#summary }}
{{ end }}

I’m not an expert in coding Hugo, so this will probably not work. But I think you get the idea.

To explain, it means “if the .Params.#summary parameter is set, print out .Params.#summary.”

7

I feel like having video content in the summary must be a common use case, so I’m surprised it doesn’t work at all out of the box.

Your solution seems to assume a youtube embed code is treated specially, and will be just placed in the summary partial if it’s there. But that disconnects it from the layout in the post, where you might want a line of text beforehand.

8

Use Manual Summary Splitting.

Content that comes before the summary divider will be used as that content’s summary and stored in the .Summary page variable with all HTML formatting intact.

+++
title = "Test"
date = 2020-07-07T08:10:10-04:00
draft = false
+++
This **word** is bold and _this_ is emphasized.
{{< youtube qtIqKaDlqXo>}}
<!--more-->
Consequat irure ut ullamco anim.
1 Like
9

Brilliant! That worked perfectly, thank you.

10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.