RSS Images too big on zoho

support
1

I’m trying to get my rss to work on zoho but the image is too big. The support team said i have to fix the rss.
My images are webp 1200x
MailChimp my current email sub provider renders fine.

I don’t know RSS. Resize won’t work and throws an error.
plainify removes the image altogether.
My solution is not to use zoho and stay with mailchimp, but i just hate everything else about them. On the other hand, mailchimp “just works”. But i think something can be done to fix the zoho thing so the images are 600x.

rss file is here.
You can look at all the history. Basically i put my feed back to its original state.

My website is americanmonk.org
My feed is American Monk on American Monk: Life with Buddha, Dhamma and Saṅgha

2

I don’t use Zoho but from what I got you’re trying to send email with their API, is that it? If not, what steps are you taking to send the new post by email ?

For newsletters, 1200px is an overkill because email clients add so much User Interface around that we’re left with 600px for content
. I usually go for 400px when using images in newsletters.

Also I don’t see any image processing in your rss template. Can you show an example of a failing post? I find it odd that an email service would have issues with an image width, unless it was over 1Mb or something. My rss feed is close to the internal hugo rss template and I am using mailgun successfully to send weekly newsletters.

3

Your shortcode fails because the images are in the static directory. Global resources (captured with resources.Get and friends) must be in the assets directory, or in a directory mounted to assets.

4

Yes…I know that it needs to be in the assets/images folder.
I put the original images on the static . Then I moved to assets/images
But things were not working so I just moved everything back. Later I will try again. You can see the commit history.

But the rss was failing in the assets/images/ directory as well.

The question is how to make it 400px for email? or 600px. I understand it needs to be less. I understand that 1200 is too big.

i’d just like it to be a size to fit.

Zoho is an email automation service similar to mailchimp.
The service sends out an email to subscribers and has a simple template based off the rss feed.

5

resize was giving an error when everything was in assets/images directory.
It said that rss didn’t support image resize in the current version. My version is

hugo version
hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa linux/amd64 BuildDate=2024-01-26T15:54:24Z VendorInfo=gohugoio
6

Your are rendering .Content in your RSS feed. If you want to have different sizes depending on the output format (html vs. rss) you will need to implement an image render hook for the rss output format. See description of lookup order here.

This exercise is not a simple undertaking for a casual or inexperienced Hugo developer.

7

yes… i’m very inexperienced so that would not be a solution. I was an msvc++ programmer in the 90’s. I’m monk now but resurrected some skills for making a flutter app. I’m quite dependent on gpt+ these days and losing my skills again out of laziness, but you would be surprised how good gpt+ is, even with hugo, or even zoho.

I have joked to my more technical helper that the solution is to stay with MailChimp.
However, gpt suggested putting a css (in the rss) to fit the image to size, but I could not get that to work. Somewhere in the chat, it said to try hooks but also said it was involved. I don’t want to do hooks.

8

Then I suggest you stick with what you have.

9

(I meant to say, i’m not technically able to do hooks).
yes… looks like the solution is to stick with mailchimp, or make separate thumbnails for featured image.

why is there not a way to put css in the rss.html to have the image size to fit.?

10

That’s an RSS question, not a Hugo question, and you should probably make inquiries on Stack Overflow or similar. From what I can gather, even if you somehow resorted to inline styling, some readers will honor, some will not.

11

There is, but you looking on that wrong. RSS is not for styling on how it will look on RSS Readers. All readers ignoring any styling. You can style with style.xsl but thats only on how it will look when you open your RSS feed in web browser (example here styled Hugo RSS). RSS readers ignoring any styling. If you want picture served in RSS to be 600x wide, than you need to process it in that file. You can do this with HUGO.

But from what I understand, you would be better building additional RSS feed that you will style for use for mailing service leaving the main one as it is for general use.

RSS feed generated is serving data, and not teling how the data need to look like.

12

okay… i moved the files back to assets/images
How do I use hugo resize without errors showing and complaining that it hugo version cannot do this?
You can look at the various history of the rss and see that it was tried.
Or if rss is limited in hugo as i think it is … how do i have it so the resultant rss uses 600x featured images?

13

Firstly, have a look on my approach Add and use an image sitemap with Hugo – Dariusz Więckiewicz 🇬🇧 where I am explaining how to add Image Sitemap to Hugo. Ignore most of it and use this approach to create additional RSS feed (sopy your RSS code to new file), than work on it.

For your purposes you need to rethink this part:

<description>{{ .Content | html }}</description>

This part is taking the content generated in Hugo and display it there in HTML form. It simply taking all what you see on website and placing it there. If you convert images to WebP, they will be also passed there. You don’t have control on how things are displayed there.

Your RSS is displaying full content and that what you putting into your newsletter. Your RSS cannot re-process the whole content file again hence not easy to solve this. If you change your images to be served 600x wide (site wide) thats how it will be in newsletter as well.

I am using featured image in my frontmatter and using summary to display content. I want traffic back to my website, hence if somebody want to read more, they need to head back to my site to read full text.

my part of description in RSS is as follow

{{ if .Params.featuredImage }}
{{- $ftimgsrc := "" -}}
{{- if .Page.BundleType -}}
{{- $ftimgsrc = .Page.Resources.GetMatch .Params.featuredImage -}}
{{- else -}}
{{- $ftimgsrc = resources.Get .Params.featuredImage -}}
{{- end -}}
<description>{{ .Summary | html }}</description>
<content:encoded>{{ "<![CDATA["  | safeHTML  }}{{ printf "<img src=\"%s\" />" $ftimgsrc.Permalink | safeHTML }}{{ .Summary | safeHTML }}{{ "]]>" | safeHTML  }}</content:encoded>
{{ else }}
<description>{{ .Summary | html }}</description>
<content:encoded>{{ "<![CDATA["  | safeHTML  }}{{ .Summary | safeHTML }}{{ "]]>" | safeHTML  }}</content:encoded>
{{ end }}

It is not easy to advise you what you need to do. You need to do trial and error approach.

14

I didn’t see anything that would make the featured image smaller in the article.

Perhaps the easiest way is just to make duplicate images for featured images.
or use a single image with a resize shortcode inside all of my md’s for the featured image tag.
With a small global regex or script, I can solve my problem and reduce to 400x even.

I just wish there was a more 1 shot global way.

15

Yes, it do not resize in above code.
ps. I always serve full size.

But you can incorporate Resize feature, in this example 480x, updated code below

{{ if .Params.featuredImage }}
{{- $ftimgsrc := "" -}}
{{- if .Page.BundleType -}}
{{- $ftimgsrc = .Page.Resources.GetMatch .Params.featuredImage -}}
{{ $ftimgsrc = $ftimgsrc.Resize "480x" }}
{{- else -}}
{{- $ftimgsrc = resources.Get .Params.featuredImage -}}
{{ $ftimgsrc = $ftimgsrc.Resize "480x" }}
{{- end -}}
<description>{{ .Summary | html }}</description>
<content:encoded>{{ "<![CDATA["  | safeHTML  }}{{ printf "<img src=\"%s\" />" $ftimgsrc.Permalink | safeHTML }}{{ .Summary | safeHTML }}{{ "]]>" | safeHTML  }}</content:encoded>
{{ else }}
<description>{{ .Summary | html }}</description>
<content:encoded>{{ "<![CDATA["  | safeHTML  }}{{ .Summary | safeHTML }}{{ "]]>" | safeHTML  }}</content:encoded>
{{ end }}
16

i give up with messing with rss code.
I’ll put back the original again.

I’m going to have to fix lower level dup the files or in the md files with shortcode.

17

Perhaps one last try.
zoho has an RI:image tage that can be resized.

It seems that the custom rss i was using was always putting everything in the description.
If I renamed rss.html to something else so it does not get used, then I can get description as text, but the image is not “shipped” in the rss.

If I could just get the image and description to somehow be readable, that would be good.
You can see my default rss (none specified and by default), has no image on it now.
Shouldn’t a default Rss have the featured image on it?

Mailchimp alos sees no images with the default hugo rss
This is getting rediculous how much time I’m wasting on email automation. I could do 20 manual ones with the amount of time I spent already.

20

No.

You need to remember that RSS specification is a bit old. Adding images come development of RSS readers and not the specification for this format. This is where other formats come forward. Also, you don’t know how people are using RSS and how they building websites. This is outside of Hugo. Hugo provides base template for RSS and than you need to adjust it to your needs.

Yes, thats the point. You got here option to choose to serve whole content (.Content) or summary (.Summary). Hugo gives you flexability to adjust what you want to display.

From my example above I am taking a summary and, if featured image is available, adding featured image on front of summary.

Instead featured image (for example, if is not specified, you can grab first image from the post and add it. Like I am grabbing images in my post regarding adding image sitemap.

This is searching for images in content

{{ if (findRE `(?s)<img.+?>` .Content) }}{{ range $k, $_ := findRE `(?s)<img.+?>` .Content }}{{ if $k }}{{ end }}

And this is pasting link to images from <img src=

{{ replaceRE `(?s).*src="(.+?)".*` "$1" . | absURL }}

Than need to figure out how to pict first one and paste instead featured image:

{{ printf "<img src=\"%s\" />" $ftimgsrc.Permalink | safeHTML }}

from above code. Unable to help you more.

Remember, image is not shipped if you not specify in code that it need to be shipped.

This part from your original RSS file will output in HTML with all images.

<description>{{ .Content | html }}</description>

Read specification of each mail services (if available) to see what elements from RSS template they read and they use. I used to use TinyLetter (before it was sent to dir) with RSS and I managed to get what I want, but sometimes it was a struggle, as this service not always read the correct part of RSS field.

1 Like