TIL: Fixing Broken Action Text Images in Atom Feeds

For a while now we've seen that images in our Pika atom feeds were not displaying in some feed readers. In fact, they weren't displaying in my own feed reader, which routes through Feedly. I was sad.

I spent a lot of time troubleshooting this. Compared our feed with a lot of atom and RSS feeds that worked. Eventually I came to a hair-brained idea: what if Rails's Action Text image display markup was confusing these feed readers?

Here was the content portion of our non-working atom feed for an entry with an image:

<content type="html">&lt;div class="trix-content"&gt;
  &lt;div&gt;An image is a beautiful thing.&lt;action-text-attachment sgid="eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJamRuYVdRNkx5OW1abVptYjNKMWJTOUJZM1JwZG1WVGRHOXlZV2RsT2pwQ2JHOWlMekV3TkRZL1pYaHdhWEpsYzE5cGJnWTZCa1ZVIiwiZXhwIjpudWxsLCJwdXIiOiJhdHRhY2hhYmxlIn19--a454c3d90c064b8d45d7ed11524dfbdd856d125a" content-type="image/png" url="https://pika.pika.page/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3583419d5d88973090c20d101d0e61b2231f0740/image.png" filename="Screenshot 2024-01-04 at 11.31.26.png" filesize="65537" width="1884" height="272" previewable="true" caption="An image caption"&gt;&lt;figure class="attachment attachment--preview attachment--png"&gt;
      &lt;img src="https://pika.pika.page/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3583419d5d88973090c20d101d0e61b2231f0740/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJHa0NBQU09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--d0f1a0938c0356b14f70446487c075f2965131bb/image.png"&gt;

  &lt;figcaption class="attachment__caption"&gt;
      An image caption
  &lt;/figcaption&gt;
&lt;/figure&gt;&lt;/action-text-attachment&gt;
&lt;/div&gt;
&lt;/div&gt;
</content>

That's a little hard to follow, but taking out the escaped HTML, take note of this one spot:

<action-text-attachment sgid="eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJamRuYVdRNkx5OW1abVptYjNKMWJTOUJZM1JwZG1WVGRHOXlZV2RsT2pwQ2JHOWlMekV3TkRZL1pYaHdhWEpsYzE5cGJnWTZCa1ZVIiwiZXhwIjpudWxsLCJwdXIiOiJhdHRhY2hhYmxlIn19--a454c3d90c064b8d45d7ed11524dfbdd856d125a" content-type="image/png" url="https://pika.pika.page/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3583419d5d88973090c20d101d0e61b2231f0740/image.png" filename="Screenshot 2024-01-04 at 11.31.26.png" filesize="65537" width="1884" height="272" previewable="true" caption="An image caption">
  <figure class="attachment attachment--preview attachment--png">
    <img src="https://pika.pika.page/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBaFlFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3583419d5d88973090c20d101d0e61b2231f0740/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2RkhKbGMybDZaVjkwYjE5c2FXMXBkRnNIYVFJQUJHa0NBQU09IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--d0f1a0938c0356b14f70446487c075f2965131bb/image.png">
    <figcaption class="attachment__caption">
      An image caption
    </figcaption>
  </figure>
</action-text-attachment>

That special <action-text-attachment> markup is certainly non-traditional HTML. I got to wondering if maybe some feed readers were choking on it. So I set to removing it.

# app/helpers/posts_helper.rb
def excise_action_text_attachment_from(html)
  doc = Nokogiri::HTML.fragment(html)
  doc.search('action-text-attachment').each do |attachment|
    attachment.replace(attachment.inner_html)
  end
  doc.to_html
end

# app/views/posts/index.atom.builder
entry.content(excise_action_text_attachment_from(post.body.to_s), type: :html) if post.body.present?

It worked! Images were finally appearing in Feedly and all of the other feed readers we've tested. These hunches don't work out that often for me, but when they do. 👨‍🍳😘