Help with RSS and Images

Javier_Cabrera · April 9, 2021, 1:11pm

So I added a news section to my site and I thought it would be a cool idea to use HUGO’s RSS feature, but my images are not showing on some readers, and when they show, they show in the wrong place.

Here’s how my news section looks like on Freedly:

And here’s how it looks on NewsBurn:

On Freedly, I have no images and I only get the Summary, not the full content.
On NewsBurn, I get images, but only on some posts, and when they show up, they show up at the end of the post and not after the title, like this:

I have no idea why this is happening. My images are .jpeg and my RSS seems to be ok.

<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1" xmlns:content="http://purl.org/rss/1.0/modules/content" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>{{ .Site.Title }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content in {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{ with .OutputFormats.Get "RSS" }}
        {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{ end }}
    {{ range .Pages }}
    {{ if .Params.article_img }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
        <media:content type="image/jpeg" medium="image" width="1200" height="500"
                url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" />
        <description>{{ .Description | html }}</description>
        <content:encoded>{{ .Content | html }}</content:encoded>
    </item>
    {{ end }}
    {{ end }}
  </channel>
</rss>

That goes without saying I get a Schema error when I try to validate my RSS:

Schema Error: XML document with no namespace; cannot determine any schema to use for validation.

ju52 · April 9, 2021, 1:35pm

most readers handle it different, the imgage should in in an enclosure

I rolled my own feed templates - look here

the RSS ( and JSON and ATOM) feed is there

github.com

gj52/HugoSample/blob/master/themes/photon/layouts/_default/home.feed.xml

{{ print "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"no\" ?>"  | safeHTML }}
{{ partial "xml/rss" .}}
<rss version="2.0" 
    xmlns:atom="http://www.w3.org/2005/Atom" 
    xmlns:media="http://search.yahoo.com/mrss/"
    {{ with site.LanguageCode }}xml:lang="{{ . }}"{{ end }} 
    xml:base="{{site.BaseURL }}" > 
  <channel>
    <title>{{ site.Title }} RSS</title>
    <link>{{ absURL .Permalink }}</link>
    {{ with  site.Home.OutputFormats.Get "FEED"}}<atom:link href="{{.RelPermalink}}" rel="self"      type="{{ safeHTML .MediaType.Type }}" />{{end}}
    {{ with  site.Home.OutputFormats.Get "ATOM"}}<atom:link href="{{.RelPermalink}}" rel="alternate" type="{{ safeHTML .MediaType.Type }}" />{{end}}
    {{ with  site.Home.OutputFormats.Get "JSON"}}<atom:link href="{{.RelPermalink}}" rel="alternate" type="{{ safeHTML .MediaType.Type }}" />{{end}}


    {{with site.Params.description}}<description>{{plainify site.Params.description }}</description>{{end}}
    <generator>>Hugo {{hugo.Version}}</generator>
    {{ with site.LanguageCode }}<language>{{.}}</language>{{end}}
    {{ with site.Params.Copyright }}<copyright>@ {{ site.Params.CopyrightYear }} {{htmlEscape .}}</copyright>{{end}}
    <lastBuildDate>{{site.LastChange.UTC.Format  site.Params.dateFormatRFC822Z | safeHTML }}</lastBuildDate>

This file has been truncated. show original

davidsneighbour · April 9, 2021, 2:03pm

Can you link your RSS-Feed? That would make more sense to see what the resulting output is and why an image might be ignored. I have the slight idea that the URL to the image might be a local path (/path/to/image) instead of a proper url (https://domain.ext/path/to/image) and some RSS readers might work that out and others think “whatevs”.

And the error - probably not the issue. But it might be good to add some namespaces to your RSS template. As you have your own RSS layout that shouldn’t be so hard.

Javier_Cabrera · April 9, 2021, 2:04pm

Thanks for that, it help me add the image and is now showing. But still, my image shows after the content, which pisses me off!

And it should be the same on Freedly, but it just doesn’t shows the images at all.

Javier_Cabrera · April 9, 2021, 2:04pm

Sure thing, here’s the feed
https://thefreebundle.com/news/index.xml

davidsneighbour · April 9, 2021, 2:08pm

Selection_151

Let’s fix that one

Selection_152

How do you write your content? I would expect this to be either a “physical” apostrophe ' or '.

Feedly might be in some form of recovery mode because the XML does not check out.

Javier_Cabrera · April 9, 2021, 2:08pm

Also, the first post (for some strange reason) is not showing an image on NewsFeed, while the most recent ones do.

{{- $pctx := . -}}
{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
{{- $pages := slice -}}
{{- if or $.IsHome $.IsSection -}}
{{- $pages = $pctx.RegularPages -}}
{{- else -}}
{{- $pages = $pctx.Pages -}}
{{- end -}}
{{- $limit := .Site.Config.Services.RSS.Limit -}}
{{- if ge $limit 1 -}}
{{- $pages = $pages | first $limit -}}
{{- end -}}
{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1" xmlns:content="http://purl.org/rss/1.0/modules/content" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>{{ if eq  .Title  .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title>
    <link>{{ .Permalink }}</link>
    <description>Recent content {{ if ne  .Title  .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{- with .OutputFormats.Get "RSS" -}}
    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{- end -}}
    {{ range $pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>
      <enclosure url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" length="" type="image/jpeg" />
      <media:content   url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" width="1200" height="500" medium="image" type="image/jpeg" >    
        <media:thumbnail url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" width="600" height="250"  />       
      </media:content>
      <description>{{ .Content | html }}</description>
    </item>
    {{ end }}
  </channel>
</rss>

davidsneighbour · April 9, 2021, 2:12pm

That seems to be some form of a proprietary article image:

<media:content   url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" width="1200" height="500" medium="image" type="image/jpeg" >    
        <media:thumbnail url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" width="600" height="250"  />       
      </media:content>

In the olden days there was a tag called “enclosure” maybe add it:

https://www.rssboard.org/rss-specification#ltenclosuregtSubelementOfLtitemgt

I would also check, if the page of each item defines og:image tags (all the social media headers). Maybe feedly takes the images from there. Some of the feeds there always show the same image for me, so I am pretty sure they take something from the page itself instead of the feeds.

Javier_Cabrera · April 9, 2021, 2:14pm

That’s odd, I’m using a physical apostrophe.

I’m using {{ Contnent | safeHTML }} on the actual page template, and on the RSS template I’m using {{ Content | html }} because if I use safeHTML it throws errors because of the html tags. That’s why that ’ gets rendered, but how do I render those apos then?

davidsneighbour · April 9, 2021, 2:14pm

Ehm, I just saw the enclosure tag in your layout. Forget what I wrote. but check the og: tags in your pages.

davidsneighbour · April 9, 2021, 2:18pm

Try adding CDATA tags around your UNENCODED description content:

<description><![CDATA[

whatever you want to write here without it being `]]>`

]]></description>

But that is only the fix for the side effect. won’t solve the image issue.

Javier_Cabrera · April 9, 2021, 2:38pm

No dice, I have no idea what’s going on here.

The <description><![CDATA[ helped I believe. What you were using to validate my feed?

davidsneighbour · April 9, 2021, 2:44pm

I opened it in Chrome.

ju52 · April 9, 2021, 3:56pm

check it with a validator

Javier_Cabrera · April 9, 2021, 7:56pm

Apparently, I made it, but my RSS head is still throwing warnings.

I used the one that was linked by bep and got the following message.

"This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations."

The code is:

{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1" xmlns:content="http://purl.org/rss/1.0/modules/content" xmlns:media="http://search.yahoo.com/mrss/">

Other than that, images now show up, but by the life of me I have no idea why they show up AFTER the content!

Javier_Cabrera · April 9, 2021, 9:03pm

All right, I’m done with this thing. Its infuriating, to be honest.

Some feed readers show the image, but not the content! What is it with this thing? Why is not keeping consistency! My RSS is valid!

This is the first time I ever had to mess with something like this. Two full days trying to get this thing to work with the template that comes with Hugo. Wasted.

NewsBlur on the other hand, shows everything correct.

Freedly and others keep showing things wrong.

I’ve no idea what’s going on here.

Here’s the code. If someone has any idea why this thing is not showing the content, let me know. Please.

{{- $pctx := . -}}
{{- if .IsHome -}}{{ $pctx = .Site }}{{- end -}}
{{- $pages := slice -}}
{{- if or $.IsHome $.IsSection -}}
{{- $pages = $pctx.RegularPages -}}
{{- else -}}
{{- $pages = $pctx.Pages -}}
{{- end -}}
{{- $limit := .Site.Config.Services.RSS.Limit -}}
{{- if ge $limit 1 -}}
{{- $pages = $pages | first $limit -}}
{{- end -}}
{{- printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1" xmlns:content="http://purl.org/rss/1.0/modules/content" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>{{ .Site.Title }} News</title>
    <link>{{ .Permalink }}</link>
    <description>Links to Science Fiction &amp; Fantasy Stories Online from {{ .Site.Title }}</description>
    <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }}
    <language>{{.}}</language>{{end}}{{ with .Site.Author.email }}
    <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }}
    <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }}
    <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }}
    <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }}
    {{- with .OutputFormats.Get "RSS" -}}
    {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
    {{- end -}}
    {{ range $pages }}
    <item>
      <title>{{ .Title }}</title>
      <link>{{ .Permalink }}</link>
      <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate>
      {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}}
      <guid>{{ .Permalink }}</guid>

      
       <media:content url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" width="1200" height="500" medium="image" type="image/jpeg" >    
        <media:thumbnail url="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg" width="600" height="250"  />       
      </media:content>

      <content:encoded>
        {{ printf "<![CDATA[" | safeHTML }}
        <img src="{{ .Site.BaseURL}}news/images/{{ .Params.article_img | html }}.jpeg">
        {{- printf "%s" .Content | safeHTML }}
        {{- printf "]]>" | safeHTML }}
      </content:encoded>

      
    </item>
    {{ end }}
  </channel>
</rss>

jmooring · April 10, 2021, 4:14pm

Let’s say I create two RSS reader apps: one for iOS, and one for Android.

For the iOS app I decide that I will only show the two most recent items in date descending order. I will show a header (branding) image, but I will not show any of the item images. I also decide to truncate your text to 120 characters per item and strip the HTML.

For the Android app I decide to show the five most recent items in date ascending order. I will show only one image per item, and if you use the same image in two items I will not show either item (penalty).

My point is that you have no control over either app.

My advice is to examine highly syndicated feeds like the New York Times, Wired, and others to see what has worked for them.

Finally, organizations such as Feedly or NewsBlur may provide optimization guidance unique to their services. For example, Feedly published this article several years ago—I have no idea if it is still accurate:

https://blog.feedly.com/10-ways-to-optimize-your-feed-for-feedly/

Topic		Replies	Views
RSS Feed Stopped Showing Posts support	4	961	September 8, 2019
Images in Hugo RSS? support	38	8858	May 8, 2018
Page Bundle, relative image path in RSS feed wrong support	9	2091	November 14, 2023
New RSS feed having odd caching issue and not finding pages	8	662	May 11, 2018
RSS feed with individual post images	6	1282	January 12, 2018

Help with RSS and Images

Related topics