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.

Share :
  • Reddit
  • del.icio.us
  • Digg
  • StumbleUpon
  • DZone
  • Ping.fm
  • Sphinn
Related posts :
This entry was posted on Wednesday, December 31st, 2008 at 20:33 and is filed under Blogging. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

46 Responses to “Aligning Images In RSS Feeds”

Pages: [1] 2 » Show All

  2. 2
    WordPress Plugin Releases for 01/02 says:
    January 2, 2009 at 15:30

    [...] Align RSS Images [...]

  3. 3
    Dank says:
    January 2, 2009 at 15:30

    Brilliant. Just what I’ve been looking for!

  6. 6
    ジェイソン (Jason) says:
    January 2, 2009 at 18:14

    Thanks so much for this. I’ve been thinking about writing something myself to do this, but never got around to it :P

  7. 7
    Ben M says:
    January 2, 2009 at 23:02

    This works great! Thanks!

    You might consider adding span to the preg_replace_callback part of the ws_align_rss_images function. I spent some time banging my head against the wall wondering why div, img, and p tags would be filtered by the plugin, but not spans. Of course, I only have myself to blame for that because I didn’t scroll all the way to the bottom of the plugin file to realize that spans weren’t even being screened for filtering. I use a span tag for captions instead of a p tag, which was why I wanted span to be included.

  8. 8
    White Shadow says:
    January 3, 2009 at 02:13

    Done (didn’t test it myself, but should work).

  9. 9
    Links for 2nd January 2009 | Velcro City Tourist Board says:
    January 3, 2009 at 03:01

    [...] Aligning Images In RSS Feeds [...]

  11. 11
    | Internet Heaven says:
    January 3, 2009 at 17:30

    [...] Align RSS Images [...]

  14. 14
    Wordpress: allineare le immagini all’interno dei feed says:
    January 7, 2009 at 12:36

    [...] C’è una soluzione rapida, semplice ed indolore che come potrete immaginare consiste nell’installazione di un semplice plugin: A lign images in RSS Feeds. [...]

  15. 15
    Thomas Herold says:
    January 15, 2009 at 02:39

    It has no effect on my feed. I use: img class=”alignleftb”. Do I have to change anything inside the plugin code to make it work?

    Thomas

  16. 16
    White Shadow says:
    January 15, 2009 at 03:46

    Are you sure it’s “alignleftb“? I didn’t see that class in any of the docs (only “alignleft”), so the plugin doesn’t recognize it.

    You could add this class to the $explicit_alignment_styles array to make it work. Take a look at the other CSS rules already listed in the code for an example of how to format the new entry, it’s pretty easy.

Pages: [1] 2 » Show All

Leave a Reply