in Uncategorized

Gatsby & images in RSS

Gatsby uses plugins to transform markdown and images into HTML. (I think they have parents or cousins that work more broadly, but I’m familiar with them inside a Gatsby context.) One of them, gatsby-remark-images, does a lot to improve performance (transforming images into different sizes, handling placeholders and using ”blur-up” tricks, etc).

This is great for a blog with images. BUT… when all of the HTML that wraps those images gets stuffed into an RSS feed, the result doesn’t always look great. In particular, when my feed is displayed on micro.blog, my images’ aspect-ratios are distorted based on the app’s window width.

The hacky solution I came up with was to do a string-replacement inside the RSS query. All the HTML in that function gets run through

html: html.replace('width: 100%; height: 100%; ', '')

and my images become fixed in size. Fixed!

(But wait … now I’m looking at the same image in my regular web-based feed reader, and the aspect ratio is fine, it’s just that the image remains 700px wide at all times regardless of window width. I wonder if setting CSS width and height to auto instead of just wiping them clean, would work?)

Next day, even more update: In Inoreader, on the web, the image is always, always fixed-width. In micro.blog, it scales correctly. In the new NetNewsWire it also scales correctly. So there’s something about the app-ness (as compared to web-ness) that makes it work.

It’s okay, it’s just not perfect.

Write a Comment

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Related Content by Tag