Add Cover Image to RSS feed

[theJoshMuller]

What does this PR change? What problem does it solve?

This PR is a step towards solving issue 891. This is how I dealt with issue #891 on my personal website, so I thought I'd pass it back upstream.

Most RSS aggregators I've played with seem to pull image data for a post from either the <enclosure /> tag, or from the first image referenced in an article. This PR makes the cover image visible in both of these places.

Was the change discussed in an issue or in the Discussions before?

It offers a preliminary (though, imperfect) solution to #891 by adding a given post's .Params.cover.image to the RSS feed's <enclosure />, and into the body/content of the post. (Assuming the .Params.cover.image variable is set; otherwise, it defaults to the current functionality)

This code works on all the RSS aggregators I tested it on, but there are a couple problems with it that are beyond my current Go/Hugo knowledge.

1. Technically the enclosure tag requires a length attribute, with the length of the media file in bytes. Yihan Wu outlines a solution to this, but I kept getting a error calling readFile: file does not exist hugo whenever I tried to implement that solution. I gave a several-hour effort to try to figure it out, but alas Hugo/Go works differently than I'm used to coding in, so I couldn't crack it. All RSS readers I tried seemed to work fine with the code as I've written it, so I'm submitting it even though this "required" attribute is missing.
2. The type in the <enclosure> tag is hard-coded as jpeg. Ideally, this would take the file extension (or mime type?) of the media file, and dynamically change the type to webp/png/whatever, but I also couldn't figure that out in the time I gave myself for this task. All my personal site images are JPEGs, so it's been fine for me. Also, this PR still seemed to work fine when I tested it on a few RSS readers with WEBP images, even though strictly speaking the syntax is incorrectly saying those images are JPEG. Ideally, the mime type would be dynamically changed, but it seems to be working for now in all the places I've tested.

PR Checklist

• I have enabled maintainer edits for this PR.
• I have verified that the code works as described/as intended.
  (☝🏽 to the best of my current abilities and knowledge)
• This change does not include any CDN resources/links.
• This change does not include any unrelated scripts such as bash and python scripts.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

[elyserobinson]

Thank you! Been asking for this for a minute and couldn't figure out how to change it myself.

[jbassetti]

Implemented this, but getting the following in VSCode

"WARNING: calling IsSet with unsupported type "invalid" () will always return false."

And the cover doesn't seem to load in my RSS tests.

[theJoshMuller]

@jbassetti I also noticed that error. Having looked through some Hugo and Go docs and conversations, my understanding was that simple Warnings like that aren't a problem. Someone who knows Go better than me can maybe mod my code so that it doesn't show that warning, but it doesn't seem like the warning is a problem, from what I understand.

Which RSS reader were you using in your tests? Do you have an example of a feed that did load its cover photo on that reader? Would love to play with it and see what's up with it.

Since implementing this code I've also found a reader that doesn't load RSS cover photos on it. As of yet haven't been able to figure out how this specific reader wants to have its RSS cover photos marked up. Many readers I've tested (inoreader, Brave News, Fluent Reader) all seem to be working great with this code at the moment. But there are a couple I haven't been able to crack yet 🤔

[jbassetti]

@theJoshMuller

Thank you for your reply. I got it working. And, I found out what the issue was. It was me, not the code (I'm new to Hugo).

For anyone with the similar issue, check your image paths. Here is a quick narrative of my debugging.

I had my page's cover image in a /content page bundle directory. In the .md file, I liked to the image (for example): "images/123.jpg"

When I run my local server and deploy the site, the cover images using the above method appear fine. But when in a RSS feed, the url "images/123.jpg" is obviously not valid.

• One solution is to include the image's final path in the .md file like this: "https://some-url/some-bundle/images/123.jpg"
• The better solution is to place the image in the /static/some-image-directory/ folder and and set the path as: "/some-image-directory/123.jpg"

The problem with the first solution is that the image does not load when running the local server, as there is no image deployed yet at that url. Only when the site deploys does that url work. This method works with RSS.

In the second solution, which is the better solution, Hugo automatically generates the static URL path and works with RSS.

By the way, I tested the feed on MailChimp RSS campaign and on the RSS.app website. Both of the above methods work without issues for cover images and regular images.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information