Help with RSS and Images

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.

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

1 Like

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.

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.

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

Selection_151

Let’s fix that one :slight_smile:

Selection_152

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

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

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>

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.

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 &rsquo; gets rendered, but how do I render those apos then?

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

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.

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?

I opened it in Chrome.

check it with a validator

1 Like

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!

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>

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/