Aligning Images In RSS Feeds

When inserting an image into a post, WordPress lets you choose an alignment (left/right/center/none) and even add a caption. This usually works well when viewing the post on the blog itself, but will often look messed-up in the RSS feed. Basically, the image becomes unaligned and breaks the intended post layout. I’ve found an easy way to fix it.

As it turns out, the problem appeared when WP developers chose to remove the deprecated “align” attribute from the WordPress-generated <img> tags. Now, following web standards is all well and good, but what if you still want to align an image in a way that works in the feed, too? The typical answer is to add a style="float:left;" (or “float:right;”) attribute to each aligned image. However, that would become very bothersome if you had to manually edit the HTML code every time.

So I created a plugin that will do it automatically.

Plugin Description

“Align RSS Images” is a simple plugin that scans your RSS feed and ensures that every image has the correct alignment and margin settings. Technically speaking, it finds HTML elements styled with any of the WordPress-generated classes and appends an appropriate style attribute to each element. This is done dynamically when the feed is generated, so your actual posts won’t be modified.

Left-aligned picture in a RSS feed

Sidenote : Yes, I know that using styles in a RSS feed isn’t exactly standards-compliant either. Nevertheless, it works fine with Google Reader and the W3C Feed Validator says the feed is OK. So most likely the sky won’t fall on your head if you use this plugin 😉

Download

align-rss-images.zip (2 KB)

Requirements : WordPress 2.6 or later
Installation : Just upload and activate. The plugin is completely automated, but due to caching you may need to wait a few hours for the changes to appear in your RSS reader.

Related posts :

98 Responses to “Aligning Images In RSS Feeds”

  1. Brian says:

    I looked into your elegant code. I was importing theme styles into TinyMCE Advanced plus fiddling with 3.0’s new editor-style.css. I’m betting both were importing. When WordPress loaded a test post into its editor, alignment was perfect at first, then slightly paused, then in a quick flash jiggered the alignment incorrectly. Although I copy/pasted identical lines, it seems reading one file and over-riding the other broke the alignment. Using *only* styles.css, my problems went away and your excellent Align RSS tool is working perfectly as always. Sorry to fill your comment thread with noob.

  2. ovidiu says:

    I just switched my feed to ATOM as default, could your plugin work with that feed too? I am using this plugin to do that: http://wordpress.org/extend/plugins/atom-default-feed/

  3. White Shadow says:

    It already should. I just tried the “Atom Default Feed” plugin on another site of mine and the images in the feed were aligned.

  4. Ovidiu says:

    great. I have no deeper knowledge about the itnernal workings of RSS versus ATOM so I thought it would be easier to jsut ask instead of hunting for that bit of information.

    thanks 🙂

  5. […] Genauso habe ich fast nie die Infos aus dem Plugin WP System Health verwendet. Das RSS-Hack-Plugin Align RSS Images werde ich in Zukunft vielleicht mal anderweitig nachbauen, ist aber auch nicht wirklich nötig. Und […]

  6. […] all my other plugins disabled.)For completeness’ sake, here are the rest of the plugins I use:Align RSS Images Audio Player Broken Link Checker Contact Form 7 FD Feedburner Plugin Clean Options Google XML […]

  7. Hi!

    I installed your plug-in, it didn’t work, and so I uninstalled it and deleted it. The problem is that now my feedburner images are showing a 403 error! Any ideas how to fix this?

    Thank you.

  8. White Shadow says:

    Try updating/resync’ing the feed.

  9. Thank you for responding!

    I did ping it and after that didn’t do anything I also resynced it.

    I decided to try reinstalling the plugin and I noticed that now it is aligning the photos where they should be — but you can’t see or access the images.

  10. White Shadow says:

    I looked at your feed and, as far as I can tell, the reason why images don’t show up is that you have some sort of hotlink protection set up on your server.

    In other words : when you try to view the images in the feed, your server notices that the current page (i.e. whatever RSS reader you’re using) is not from your site. So it assumes the post content must’ve been stolen by an evil spammer to display on their spamblog, and decides to block the images.

    The fact that you can access the images if you do it from a page on your site further strengthens that theory. For example, you can view any image just fine if you open the “uploads” folder in your browser and click the corresponding link(s):

    http://littleindiana.com/wp-content/uploads/2010/10/

    All of this has nothing to do with the Align RSS Images plugin. Most likely, you just happened to uninstall the plugin at the same time when hotlink protection got turned on.

  11. I installed the Feedburner plugin for my RSS feed and of course the images in the posts weren’t aligned on the left. So I uploaded your plug-in and waited for several hours (overnight actually) because of caching (if that’s a verb–but you know what I mean). Anyway this morning, the images in my RSS feed are still screwy. You can see my RSS feed here:
    http://feeds.feedburner.com/boulderdog/zSjw

    Here’s my blog address: http://www.boulderdog.net

    FYI-I don’t have a CSS option.

    Any suggestions? Thanks so much. Deborah

  12. White Shadow says:

    My first guess would still be that there’s a caching-related problem. Here’s why: the lastBuildDate element present in the source code of your feed indicates that the last time Feedburner updated it was more than 12 hours ago.

    Try pinging Feedburner to force a feed update.

  13. Thank you for the suggestion. I followed you instructions “Try pinging Feedburner.” Unfortunately, the images still are not aligned as you can see here:

    http://feeds.feedburner.com/boulderdog/zSjw

    I also read through the comments on this site as you suggested but didn’t find anything relevant to my problem. I’m not a programer so I am loathe to monkey around with WP code as it appears some others have.

    Any other suggestions?

  14. White Shadow says:

    Could you temporarily disable the Feedburner redirect and check if anything changes?

  15. Thank you for replying. I disabled Feedburner. As you can see there are only summary of posts in the RSS. Apparently this is an artifact of WP. Even though I have checked ‘full text’ for the RSS feed, only excerpts of posts are visible. Also, I think this is a WP thing as well, images are not included in RSS excerpts.

    Anyway, here’s the URL for my RSS with Feedburner deactivated:

    feed://www.boulderdog.net/feed/

    Thank you for your help.

  16. White Shadow says:

    As far as I can tell, the feed contains the full contents of each post now, so I assume you fixed that. The images are also finally aligned, too (at least in my RSS reader).

  17. I’m not sure what happened, but thank you for everything! It’s working!!!! And, now when networked blogs at FB pulls my posts it’s pulling the picture in the post rather than a thumbnail of my blog. That’s what I was really after.

    Thank you so much for your responsiveness and help. I can’t begin to tell you how wonderful it is to send a plea for help into cyberspace and actually receive it!

    Have a great day.

  18. […] that’ll help in keeping your pictures where you want ‘em. Enter Align RSS Images (site here)- it simply does what its name implies- it aligns your images in your feed as you intend them to […]

  19. […] If you have images that don’t honor your alignment preferences when viewing in an RSS reader, this plugin will fix it. Fix RSS Images here. […]

  20. […] RSS Images Align RSS Images är en av många plugins som erbjuder korrekt align på bilder i din RSS […]

Leave a Reply