the-deuce.jpg

How to Format Images for Feed Readers

If you’re like me, then you obsess over getting things like images, blockquotes, and lists to display “just right” on your Web site. Through intelligent use of CSS, you can exercise absolute control over your layout, presenting the reader with articles so rich with style that Donatella Versace would be jealous.

Unfortunately, an ever-growing percentage of your readers are never going to see your code-wrangling handiwork, because they prefer to read articles through a feed reader like Google Reader or Bloglines. To make matters worse, you have almost no control over the way your posts will display across the various readers. You can’t use your in-site CSS styles, and – this is the biggest sin of all – images are often displayed inline with text.

The horror.

It’s true…ugly feeds can happen to good people. Check out what I mean in the figure below.

Inline image in Google Reader

Figure 1. An ugly inline image in Google Reader.

You wouldn’t let inline images slip through the cracks like this on your own site, and if you’re anything like me, the feed reader issue drives you nuts. It gets worse, though, because WordPress is not the easiest shrew to tame when it comes to properly formatting posts for display both on your site and in feed readers.

And while WordPress isn’t the only CMS platform out there, the inline image problem extends well beyond the WordPress user base. Therefore, those of you on MovableType, TypePad, Drupal, etc. still ought to be able to glean something positive from this brief tutorial.

When you’re done, you’ll have better looking feeds that are easier to read, and you’ll have the added benefit of actually being able to sleep at night, which I hear is a bonus. Figure 2, shown below, is an example of a nicely-formatted image within a feed reader—notice how the paragraph text picks up under the picture instead of beside it.

Proper image display in Google Reader

Figure 2. A properly-formatted image in Google Reader.

Feed Reader Formatting Options

As you might expect, feed readers do not offer much flexibility when it comes to styling images. Essentially, you’ve either got a nice image like you see in Figure 2 above, or you end up with the hideous beast that I forced you to look at in Figure 1.

You’re probably accustomed to using image-handling CSS classes (like left, right, and center) on your own site, but at this time, the associated styles will not carry over into feed readers1.

You might also be familiar with the align="left" and align="right" attributes, and while those will work inside feed readers, they are considered deprecated in new XHTML specs from the W3C2. Therefore, if I were to teach you this method, it would be the equivalent of me teaching you the ins and outs of a 5600-baud modem—a complete waste of time, and certainly nothing that is going to help you a couple of years down the road.

So, the bottom line is that the most standards-compliant, most consistent result you can hope for in feed readers is going to resemble Figure 2 (regardless of the image-handling class used), and that’s what you’re going to learn here.

WordPress Post Formatting for Display in Feed Readers

Properly formatting your posts so that images display correctly in feed readers is simple, albeit somewhat counter-intuitive. To illustrate, we’ll start with a very basic example—we’d like a center-aligned image, followed by a paragraph of text (just like you see in Figure 2).

For starters, you’ll need to make sure that you’re editing your post inside the normal text editor and not inside the Rich Visual Text Editor. Although WordPress 2.1+ allows you to switch between the two views, I experienced some problems with this, especially when editing a post after it had already been published. I highly recommend that you disable the Rich Visual Text Editor by going to UsersEdit, and then de-selecting the box next to “Use the visual editor when writing.”

Next, all you have to do is ensure that you treat your image reference like a separate paragraph of text, regardless of whether it’s centered, aligned to the right, or aligned to the left. Done correctly, our example WordPress post entry box would end up looking like this:

WordPress post entry field

Figure 3. A centered image should be treated as an individual paragraph.

Without the single line space between the image reference and the first paragraph of text, you’ll end up with the nearly-pornographic result you saw in Figure 1. Make sure that extra line space is in there before you hit publish, and your post will hit the feed readers in style.

What about left and right-aligned images? To get them to display properly in a feed reader, all you have to do is set up your img reference in a separate paragraph in your post editor, but you also need to make sure that it appears directly before the text that you want it to sit next to. The following example shows exactly how you would structure your post entry box for a right-aligned image:

WordPress post entry field

Figure 4. For consistent results, treat left or right aligned images as separate paragraphs.

If you’ve done everything correctly, your post will end up looking like this in a feed reader:

Proper image display in Google Reader

Figure 5. A left or right-aligned image doesn’t float beside the text in Google Reader, but at least it doesn’t break the flow of the text.

Although the solutions proposed above are really quite simple in retrospect, they are the only ones I tested where on-site formatting was not compromised. The resulting code is, in my opinion, a little bloated because it contains unnecessary <p> tags, but it still satisfies the following critical requirements:

  • No text is broken or displaced in feed readers due to images.
  • Visitors to your site will not be able to tell that you’ve done some behind-the-scenes work to ensure that your post displays optimally within a feed reader.
  • You don’t have to modify any core WordPress files in order to make this happen—you just have to know how to get the text editor to play nice.

Now go forth, and hook up your RSS subscribers with posts that are a little easier on the eyes!

1 Bloglines is the smartest feed reader that I tested, as it will actually float images left or right depending upon the CSS class used in the img declaration. However, this is the exception, not the rule, so I won’t be addressing this facet of Bloglines directly in this tutorial. Regardless, the techniques described here will work like a charm in Bloglines, so proceed with confidence.

2 Check out the W3C‘s XHTML 1.1 img tag specs.

3 And yes, I know my image captions are “broken” in feed readers, but they look so cool on my site. What can I say, I guess a caption tutorial is next on my list.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

121 comments… read them below or add one

JBagley June 13, 2007

I knew I wasn’t the only one hacked off at images displaying all over the place in feed readers! Thanks for the tip.

Reply

Matt J June 13, 2007

Oh the curse of the obsessive. I knew I had passed into that group when I was obsessing over the odd one pixel of padding that threw one heading out of alignment with another. Like the reader is EVER going to notice. Sigh.

Reply

Emon June 13, 2007

Ah, so simple it hurts.
By the way, Chris, why do YouTube embeds appear on Google Reader fine but not Google Videos?

I embed a lot of videos on my blog and Google video embeds don’t even show on the Reader. I’ve started to include a link to the video for feed readers only, but who has the time to click to open a new link?

The last place I expected Google Videos to not appear is Google Reader. Thanks!

Reply

blogjunkie June 13, 2007

Hi Chris, this is a pet peeve of mine as well. I originally solved it by wrapping my images in <div class="right"> (which is also redundant code I admit) but did the job nicely.

Then WordPress 2.1 comes out and adds an opening <p> after my <div>, but no closing </p>!

And so, I’ve also resorted to using your technique. Cheers.

Reply

Sofi April 12, 2010

:) Oh the curse of the obsessive. I knew I had passed into that group when I was obsessing over the odd one pixel of padding that threw one heading out of alignment with another. Like the reader is EVER going to notice. Sigh.

Reply

Adnan June 13, 2007

I’ve also been considering this as well, ever since I’ve adopted the “class” tag instead of the dated “align” – I thank the use of your Cutline theme for that ;)

Thanks for the post – much appreciated!

Reply

Bruce June 13, 2007

Thanks much, Chris. This had been on my mind a lot the past couple of weeks. In a few posts I just used divs to make it work out right (or left :) ), but this is sure more simple.

BTW, I have gotten away completely from using the rich text editor … my first really bad experience with it was with an embedded YouTube video. Then I started paying attention to what it else it was mangling.

Separate subject: looks like you’ve gotten the Subscribe To Comments plugin back up and running (?) … is it now suited for WP 2.2?

Thanks again.

Reply

Keiron June 13, 2007

Definitely food for thought there!

I’ve got one of your old designs on my blog at the minute, but would like to design something original myself that is “easy on the eye”, unfortunately I’m a programmer and sometimes my graphic design eye gets left at home in a box!

Reply

jonolan June 13, 2007

Thank you. I’ve been experiencing exactly these sort of problems. Now I know what’s causing them.

Reply

Dan Black June 13, 2007

or you can use HTML (instead of xHTML) and use the otherwise deprecated align attribute. Then again I don’t use WP so perhaps there is no way to circumvent the use of xHTML?

@Matt J: the reader may notice. I notice things like that and I’m a reader of blogs.

Reply

steve June 13, 2007

thanks for the info on how to edit our rss feeds but how do we edit others?

like:
http://www.thesuperficial.com/index.xml

are there any web tools that will let me do this and give me a new url? etc.

Reply

Chris Messina June 13, 2007

I proposed something a bit different — and more in line with microformat trends and XHTML practices. You might check it out — essentially the idea is to use generic classes like “figure-a”, “figure-b” and so on and then work on a couple levels to get feed readers to add the proper formatting descriptions to their default CSS rendering.

While class=right and so on work to some degree, out of the original context, where layout might not be possible (say, on a cell phone), such classes are meaningless, if not inaccurate. It’s better, therefore, to use something that isn’t presentational but can be reused in new contexts for other purposes.

Reply

Chris P. June 13, 2007

Bruce — I use WordPress 2.1.3 to run this site, so that’s why the Subscribe to Comments plugin still works. After testing other places and discovering the 2.2 compatibility issue, I decided not to upgrade this site until a new version of the plugin is released.

Dan — In the article, I noted that the HTML elements you mentioned are deprecated in current specs from the W3C (check this footnote for more).

Steve — I’m afraid you can’t edit other people’s RSS feeds. If there are tools that allow you to do this, I’m not aware of them.

Chris — Glad you stopped by, as that was some pretty interesting reading. At this point, I think there is no good solution to this problem that we can point to and say “yes, this is it.”

Regardless, I do think that this is an issue that is best solved by microformats. John Allsopp, whose book I’m currently reading, stopped by your site and mentioned that he wasn’t sure if microformats extended into this particular “structural” realm.

Personally, I think if you look at the idea behind microformats, then yeah, it makes sense that image display should be standardized in a microformat environment. This would greatly assist in areas like image search, and also in identifying and extracting digital media content from Web pages.

I see enough potential benefit to think that a microformat is certainly the “best-fit solution” here. Also, different feed readers would be more likely to adapt to a microformat standard simply because it wouldn’t be a proprietary concept native to one platform.

In the meantime, though, I think feed readers ought to be smart enough to identify classes attached to images. Bloglines does a fair job of this already, and I have a hard time finding something “wrong” with classes like left, right, and center

But like I said earlier, all of these solutions pretty much stink at the moment. Unfortunately, we’re probably still a couple of years away from something that we’ll all look at as an acceptable universal solution.

Reply

subcorpus June 13, 2007

hmm …
interesting …
thanks …

Reply

Jason June 14, 2007

After skimming it, I sent this article to a friend who was having trouble with this exact problem. It wasn’t until he asked me about it that I realized the ‘solution’ proposed here is to move your alignment control to a class (which the feed reader won’t understand) because the reader will mess it up anyway.

Did I read that correctly?

Reply

Brian June 14, 2007

Maybe I’m missing something, but what does the class= left|center|right reference?

Reply

Chris P. June 14, 2007

Jason — No, try reading the article.

Reply

Jason June 14, 2007

lol… RTFM huh? Guess I deserved that one…

Reply

Chris P. June 14, 2007

Brian — Those are typical CSS classes that are employed by many popular WordPress themes for handling images. Although use of the align attribute is still quite prevalent, it was deprecated years ago in favor of using CSS to control the positioning of images.

Reply

Brian June 14, 2007

Thanks Chris. So the theme has to have it defined somewhere in order for it to work….

In typical implementations, is it usually defined specifically for tags, or would it work on other floating elements (e.g. ), etc?

Reply

Chris P. June 14, 2007

Brian — In my themes, I define these elements specifically for use with img tags, but it’s highly likely that if you checked out a bunch of WordPress themes, you’d see many different implementations.

Reply

Brian June 14, 2007

Dugg the article & thanks for the replies.

Weird tho, anything that looked like html markup was stripped out my last comment. It was supposed to read “…specifically for img tags…”, and “…(e.g. div class = left )…”.

Reply

Wild Bill June 15, 2007

Thanks Chris, image alignment in my feeds has been driving me batty for a while now and this fix is so easy it won’t take much to fix this problem.

Reply

免费动画片 June 15, 2007

Thanks Chris.

Reply

mihnea June 19, 2007

I have the same problem with the Google Reader. I will try to fix it like you said. Thanks!

Reply

HART (1-800-HART) June 20, 2007

wwwooooooops! the Subscribe to Comments doesn’t work in 2.2.? After 90% of my sites are upgraded to 2.2 version .. this didn’t even occur to me to test.. // Thanks for heads up. //

Reply

Rod June 21, 2007

Hi Chris,

Interesting issue. I’ve not even been able to show images at all in feeds, but the real reason I’m commenting is to share one of the tidiest feeds I’ve seen. Check out this guy’s feeds especially in Google expanded view. Very beautiful. http://johnplaceonline.com/

Reply

Chris P. June 21, 2007

Rod — That guy’s feeds look great because he’s using inline styles on his img declarations to determine a float status and also padding around his images. In theory, anyone could do this and achieve great results. Problem is, inline styles are frowned upon in the development community because we (developers) are working towards complete separation of markup and style (HTML and CSS).

Inline styles are a “valid” technique, but no purist would ever let that slide. Plus, using inline styles precludes futureproofing, which is a critical strategy that pays huge dividends as you upgrade and improve your site in the future.

Reply

Andy Beard June 24, 2007

Bloglines isn’t smart

It is the only feed reader, to my knowledge, that totally strips out inline CSS.

Feedburner supports inline CSS
Emails by Feedburner support inline CSS
Google Reader Supports Inline CSS

Bloglines turns inline CSS into a huge mess.

In the end, I have rolled back to using… the deprecated solution (align left / right), and I am going to switch my fomating of footers to use… tables

Reply

James D Kirk June 26, 2007

Ack! Don’t do it Andy! Leave the tables for dining on!

I hadn’t actually heard/read about the concepts that using inline styles were not a “good” thing, however, it does make sense to me after considering it. I use it on all my blogs at our community site. I’ve started to experiment with a dual approach of using both inline styles for the readers to give me at a minimum the alignment, padding, and no borders, while also using my themes style sheet by calling a class specific for the images.

Extra work, yeah. But at the same time, what are you going to do as a site owner/publisher until widespread standards (be they microformats or whatever) are, well, standard!?!

Reply

Dave June 28, 2007

Chris, thanks again for another simple and well explained tip for all us, learn on the go bloggers. Much appreciated.

Reply

Susie June 30, 2007

I totally love your style. Love your dog, your design. You rock… and very good content. Keep up the awesome work.

Reply

Marcia July 5, 2007

I am just migrating to Wordpress. org. Thank you for the info.

Reply

FIAR July 5, 2007

Wow! I didn’t even know there was a problem with images in a feed. Thanks for the tip.

Reply

manish jain July 9, 2007

Chris,

The one thing I HATE about you is that you come out with an awesome blog post and then disappear for a month. I cannot wait a month between your excellent posts.

later,

mrj

Reply

Salik July 13, 2007

this is an excellent tip for me too.

yes- i do pay a lot of attention to how my website and it’s feed looks on different browsers/feed readers but I am still working on making my blog compatible with both firefox and explorer…

and this is another insight.

thanks.

personally- i liked your theme very much…
it looks clean- and very beautiful.

would love to come back again.

Reply

Robert July 16, 2007

Chris,

How do you get Brian’s RSS and mail envelope graphics to bleed over the page margins?

I use your Coppyblogger theme and want to do something similar with my San people pictoglyphs.

See the logo on the righthand sidebar (top) at my site.

Will be grateful for any help you can provide.

Regards
Roberty Bruce

Reply

Sam Newton - LA Boom Operator July 18, 2007

that’s got some great pointers so that anybody that’s new to RSS feeds can get their stuff looking good. and it’s very simple. I’m So excited about it. even bigger sites can learn from this example. I seen a couple of bigger site mess up my feed. I won’t name names though.

Reply

David Bradley Blogging Tips July 19, 2007

Such a relief to discover I am not alone in my misery. I have been misaligned, maligned and resigned to displacement, your suggestion offers me hope of image salvation.

Thank you, Thank you, Thank you…

db

Reply

Fubiz July 30, 2007

Thanks for the tips!

Reply

Hopeful Spirit July 30, 2007

VERY helpful!

Now . . . can you tell us how to get those lovely captions underneath the photos on our blogs if using Word Press??

Reply

asia August 8, 2007

Chris, great designs/sensibilities, love the visual pop in this blog’s design.

I have this tagged at delish for future ref and I will use it, thanks for helping the digitally challenged like me.

Hey what is your opinion of using www. or not, you may have posted about already and am a fat lazy walrus who hasn’t checked, but still agonizing over this one….I see you use it, but what do you think about just http.

Please help before i need more botox ;)

Reply

Chris Messina August 12, 2007

I’ve created a page on the microformats wiki to discuss this concept further:

http://microformats.org/wiki/figure-examples

Cheers!

Reply

Chris August 15, 2007

Thanks, this was driving me (a little more) nuts

Reply

Liew August 19, 2007

For your information, WordPress users can use Feed Styler plugin to style blog feed.

Reply

Paul August 22, 2007

Your article on Win $5,000 Playing Facebook’s Premier NFL Football Application have not the required space in your feed.

Reply

Chris P. August 22, 2007

Paul — You are absolutely correct, but I actually had to do that to get the image to appear correctly on this site.

In my article, the image declaration appears before the actual text of the article. Whenever this is the case, additional vertical spacing is provided above the image if I properly format my image for feed readers.

I am somewhat obsessive compulsive, and admittedly, I can’t deal with this extra spacing on my layout. It’s not “perfect,” and that drives me nuts. In cases like this, then, I end up biting the bullet and blowing the format for feed readers.

This is a problem that shows up on other sites as well, but the vertical spacing incurred on my layout is more obvious and unsightly than most.

Reply

Suzanne of New Affiliate Discoveries August 24, 2007

Chris, What a timely post! I was jsut trying to set up my feedburner feed for my new blog (linked above). I want to use feedburner like all the cool kids to track stats. Using the cutline theme, I can’t quite figure out where to insert the code, aside from just sticking the actual URL into the PHP code for the header file. Is there a better way to do it, like in the rss.php, rss2.php or feeds.php files?

Thanks for a great blog!

Reply

Chris Butterworth August 29, 2007

I was writing a post this morning and was getting frustrated by the alignment of the pictures, both in my own wordpress blog, as well as the feedreaders. Unfortunately, I’m not good enough with the code to use your solution (the basic class tag in your example didn’t work for me), so I came up with a workaround that seems to be effective.
I wrote my post in microsoft word 2007, and created a 1×1 table for each picture. So the flow went: text, table w/ picture, text, table w/ picture, etc.
The finished product looks good in my blog and in my google reader. I’d love to hear your input, and to offer this idea to less tech-savvy bloggers!

Reply

Griffin September 3, 2007

For your information, WordPress users can use Feed Styler plugin to style blog feed.

Thanks for the info, Liew! I didn’t know that, so this is definitely helpful since a couple of my sites run on Wordpress.

I don’t think that using inline styles or attributes is an issue at all really. Honestly I am more concerned about the people that use my site than some random person that might look at my source code someday. As long as you’re not using inline styling for every aspect of your site there should really be no noticeable issues with load times or search engine optimization.

Reply

Gavin September 7, 2007

I have always wondered how I could get images to display in my feed. Thank you for the tip

Reply

plasebo September 25, 2007

I consider that this type of css and html codes are too excessive. A proper xhtml page would degrade nicely on a feed reader. Most feed readers have their own default styles that are applied to HTML elements to provide a nice and consistent look.

Stick to it…

Reply

Stuart Leamer September 27, 2007

I am so disgusted with what you call ugly my god you must think that you are so attractive to have tohe GALL to make your own value judgemeents on people. I could not beleive that you whom I think are an American, would think that you are so georgeouse as to make your disgusting judgements on others of most photos that I saw where candid trusting photos. I as one whom you probabaly think that I am uglier than thow, I find it so disturbing that you can make these comments on people at their most vunerable, you must be so vain, does it matter what one presents on the outer surface at times when most vunnerable, I can see beauty in most of your photos and I don’t think that I am qualified to make any opinion re uglliness or beauty, Everyone that I look at has beauty of some description, I am sorry I just found your opionions offensive to me as one who is not so beautiful to your standards, but I am sure to my familiy I am not so offensive. Please excuse me if I seem to infringe on your Fifth amendment I think thats is it as we here in Australia do not have a bill of rights to fall back on as do you in the land of the FREE. Again I apologise for infringing on any of you rights but I just think that statements such as yours on that site may cut a lot deeper than maybe you intended, and as I said as one of who has felt the sharp knife of the beauty police thought I must say something, please don’t hesitate to put me straight if I am wrong. I think your site is wonderful and without stumble I may never have found you, Bravo Stumble Upon. Best wishes and love to you and yours Stuart Leamer Winchelsea Vic Australia

Reply

communicatrix October 3, 2007

OMG…I have actually been doing the right thing COMPLETELY BY ACCIDENT!!!

I must go lie down now…

Reply

Jazz October 9, 2007

thanks for the tip. I’ll be including some album artwork in some posts so the article will come in handy.

Reply

Rishi October 12, 2007

This was an amazing tip, Now I will mind from future to follow it in my blog posts. :)

Reply

Raquita October 16, 2007

thank you so much for hte tip – I have a second question which has to do with images, I use your cutline and I’ve been trying to add additional header images and now I have six showing at once – can you tell me what I am missing?
I’ve tried to find hte answer over at the cutline site – but honestly htey suck with out you! :) help if you can!

Reply

Balamurali November 15, 2007

At a glance, the issue might sound as a simple HTML trick but I’m sure only few bloggers out there would have rectified it in the right way.

Very good post! Cheers!

Reply

DSS November 19, 2007

Dear Chris,
I have attempted to use this tip within Wordpress 2.3, using your NeoClassical theme, and it didn’t work at all. That is, instead of getting the image on the blog, I got the url instead. Then Wordpress Codex has quite different instructions, starting with changing the style sheet. Can you help, please? I really would like to avoid the ugly inline photos I now have.

Thank you.

Reply

Chris P. November 21, 2007

DSS — I think that perhaps you have misunderstood the purpose of this particular article. The instructions described here should not affect how the image appears on your actual site; instead, this is merely a way to ensure that feed readers don’t end up spitting out ugly inline pictures.

With the Neoclassical theme, you can apply CSS classes to images to enhance the way they are displayed on your actual blog. I haven’t yet posted on the image handling classes of the theme, but you can use the styles from the Copyblogger theme as a guide.

Reply

Roy December 30, 2007

There’s nothing worse than looking back at a feed to find out most readers churn out loads of gobbledygook, and text around images is a toughy for newbies who struggle with this stuff like I did for oh so long. By the time I figured it out properly for myself, my feedburning software (freeware) 28 day license had expired.

Worse still, I’m “allegedly” a programmer!!!

Go figure!

Reply

Hannu April 8, 2008

Bit side question but how did you do that “attention” box?
H.

Reply

Hannu April 8, 2008

Never mind. I got it figured out (atleast one way of doing that)…
I used custom.css to format a box like that.

H.

Reply

Ariel July 28, 2008

Thank you very much for this post!

Reply

Dave Dragon August 13, 2008

Thanks for this post!

I’ve been battling the feed formatting monster myself.

Reply

Jill November 6, 2008

I use the dreaded table when I have 2 or 3 or more small images that I want to display one-to-a-line, because otherwise they either bunch up with each other on the same line – as many as they can in the width of the page – or they go into a staggered zigzag or stairstep pattern. Both on the blog and in the reader.

I have tried changing the alignments using both html and css, I’ve added white space between each image, I have wrapped each image in div and/or span tags and used lotsa p/br tags – and nothing works, other than putting them into a table. Is there something I don’t know?

Reply

Pauline Kenny November 14, 2008

Thanks! This was driving me crazy.

Reply

Yellow SEO December 22, 2008

Thanks Chris,

Awesome tips on Feed Reader Formatting was avoiding images in feeds because of formatting problems…Now I don’t have to worry about that anymore…

Reply

Andrew March 10, 2009

The div class is not read by Google Reader and most feed readers because they don’t understand CSS… the best way to do this is to “float:” left or right…

Reply

Hindusthan March 21, 2009

By the way, Chris, why do YouTube embeds appear on Google Reader fine but not Google Videos?

Reply

Adam Winogrodzki April 20, 2009

Great Thanks!

Reply

Zavrab October 2, 2009

I knew I wasn’t the only one hacked off at images displaying all over the place in feed readers! Thanks for the tip

Reply

Ari Herzog October 23, 2009

Adding a line break after an image works wonderfully the way you mention, but what if the text is intended to be to the left or right of an image, not beneath it? Will the RSS feed still mess it up?

Reply

Farnoosh Brock October 25, 2009

Thank you so much for this. It took me minutes to make this change on one post, hit refresh on my Google reader and see the results. Beautiful. I love that others can be obsessive about publishing clean like me!
Now if I could take the obsession further, there is one other bit that annoys me about photos, and that is the extra space at the bottom of a Right- or Left-flushed photo. It’s a tad bit much. Any way out of it? THANKS much, and Thesis Rocks!

Reply

Stanley November 15, 2009

You’re probably accustomed to using image-handling CSS classes

Reply

Elle January 15, 2010

Thank you for the post – good info!

Reply

nishant January 19, 2010

I need to display some news feed. at my site where I wana to display the news I want one image also with the news title and description. how can I do that. I think the news feed doesnt give me any image.

Is there something like I can read the link and get the image and display at my site.

Reply

çiçekçi February 21, 2010

hello sir
I knew I wasn’t the only one hacked off at images displaying all over the place in feed readers

very blog merci

Reply

Bob February 23, 2010

This is exactly what I was looking for, if I can now link this to as per category and then optimise it to show on external sites then I shall be indeed a happy muppet

Reply

ariff February 23, 2010

I have this problem of not having images in my feeds. How to fix it?

Reply

dawn April 5, 2010

how do you actually get the images into the feeds in the first place? I am using wordpress 2.9.1
Thanks in advance

Reply

Chris Pearson April 5, 2010

Dawn, any images that you place in your posts will show up in your feed.

Reply

dawn April 12, 2010

hi
my feeds to do not have images – although I have many images in my posts.

and do not know what code to use to get them showing? can you advise? What file do you edit?
Thanks in advance

Reply

Chris Pearson April 12, 2010

Dawn, in order to see the full content of your feed, you’ll need to view it in an RSS reader like Google Reader or Bloglines. Once you do this, you’ll see that you’re already serving the images and full post content to people who choose to consume your site through the RSS feed.

The link you provided only shows feed excerpts (based on the WordPress excerpt function), and therefore, it won’t show any images by default.

Reply

dawn April 13, 2010

hi

Every day I get my rss feed supplied to me via feedburner – without images – so can you supply the code needed to get images via the wordpress excerpts rss feed system?
Thanks
Dawn

Reply

Chris Pearson April 13, 2010

Dawn, the only way your RSS feed is not showing images is if you have “Summary” selected under Settings → Reading → “For each article in a feed, show.”

There are no other settings or controls for your feed. There is no “code” necessary to make this happen.

Reply

dawn April 13, 2010

I have full text selected -not summary

I have read you need to add code to rss2.php?

Reply

Chris Pearson April 13, 2010

That would be news to me, as I’ve never had to modify anything on that end of things in over 4 years of working with WordPress.

Reply

Chris Pearson April 13, 2010

Also, if you’re using any plugins to handle your feeds, I recommend that you remove those immediately. Futher, I cannot provide additional help on this matter—you’re using a theme that I didn’t build and an RSS feed address that is not in keeping with the default style you’ll find in Thesis.

Reply

Gust May 3, 2010

Chris;
After much procrastination, I bought your developer’s version this morning and tried it on an old Wordpress site that was as slow as molasses on ice. After loading the site per your easy directions, and installing Hyper Cache, it moves faster than a “goosed politician” on election day. ( Pretty fast!) I’ve already learned the basics and am almost ready to begin the design part. From what I’ve seen so far, this is one fantastic theme that I should have purchased much sooner. I’ll start uploading it on all of my Wordpress sites. Keep your tips coming as I am an avid reader.

Reply

Trond E Haavarstein June 28, 2010

Hi Chris,

Same here, no modification needed in WordPress anymore. I recently installed the Reeder for iPad and it awesome, it my #2 apps.

Reply

Emediat July 16, 2010

Can we retain css in feeds?

Reply

Chris Pearson July 17, 2010

Nope—if we could, then there’d be no need for this post :D

Reply

Shanna July 21, 2010

Is this something that is built in to the current version of Thesis (1.8) when you use the post image?

Reply

Chris Pearson July 21, 2010

Shanna, Thesis has handled this kind of formatting on Post Images since version 1.5.1.

Reply

jsa wicki September 11, 2010

Thanks a lot for you , image alignment in my feeds has been driving me batty for a while now and this fix is so easy it won’t take much to fix this problem.So it is very helpful

Reply

No Name October 2, 2010

Great usefull tips on getting the problem fixed with images displaying right on these feeds. I think this should make the entire feed go a lot smoother now.

Reply

Columbus Dude October 2, 2010

Thanks for the usefull information. I’m having problems figuring out this whole RsS feed process do you know of any usefull articles on setting up RSS on a website starting from scratch?

Reply

Mike November 10, 2010

@columbus: i`m not at home right now, but later i can send you a great link!

Reply

Olli December 14, 2010

@wicki: i had the same problem, but it works great now!

Reply

M. Staudinger December 25, 2010

hey mike, could you please post the link to these information you were talking about?

Reply

Olli January 8, 2011

@feed-reader: so i gues i did something wrong, because my post doesn`t look like this!?

Reply

ArrGorilla January 11, 2011

Chris, you know ever since I saw that images don’t end up looking good at the feed, I forgot about it and focused on blogging instead. Since you put together this article, I will go there and try to implement this. Though I don’t know how I end up, because I have built a habit posting pics and then aligning them as left/right/center and then hit publish :)

Reply

Charleston February 18, 2011

ArrGorilla: Kind of had the same problem. I’ve change all the images on my site to fit max post length. Seem to solve it but while I am on Google web master, there’s a bunch off links that are in error. So it’s better to ignore it like what you’ve say.

Reply

Atif February 21, 2011

Thanks Chris, It is so much useful post for those blogger that use images in their feeds.

Reply

Daus March 11, 2011

There’s nothing worse than looking back at a feed to find out most readers churn out loads of gobbledygook, and text around images is a toughy for newbies who struggle with this stuff like I did for oh so long. By the time I figured it out properly for myself, my feedburning software (freeware) 28 day license had expired.

Worse still, I’m “allegedly” a programmer!!!

Go figure!

Reply

Will Franco aka Flywheel May 24, 2011

I found a way to CENTER images in an RSS using the tag. Works like a charm for Google Reader.
<img class="aligncenter size-full… does not seem to work.

Reply

Kendzy June 14, 2011

Can I retain css? I can’t do it now.

Reply

Chris Pearson June 14, 2011

Kendzy, the answer is no—you cannot retain CSS inside feed readers.

Reply

Adrian August 14, 2011

Hi – people are still reading/commenting on this post (and Google likes it) now, in August 2011 – so I would love to see an update or new post – WP is now in 3.2; HTML5/CSS3 are here – there must be some improvements in RSS by now? Or is it like the fax machine of the internet, now all the cool kids are FB-ing, tweeting and Google +ing?

I’m a photographer, and I’m looking to harness feeds a bit like Getty does (see this) – no photos of Freida Pinto in mine though, sadly – and I share your loathing of the uncouth caption, gettin’ all up in my pictures.

Windows 7 can apparently do fun things with image feeds too (and despite their falling out of favour, so can digital photo frames), but I don’t quite get how, given the apparent size limits of feed images. So, any fresh insights/pointers would be welcomed.

Reply

Chris Pearson August 14, 2011

Adrian, as far as I know, nothing has changed with RSS or feed readers since I published this post.

The HTML is interpreted exactly the same way, and that’s the primary determinant in the resulting display of images.

That said, your charge that RSS is the “fax machine of the internet” may not be far off, at least from a marketing standpoint.

I’ve transitioned my business, DIYthemes, over to email instead of RSS, simply because the engagement is so much higher.

Oh, and you can exercise finite control over the display of emails, too, so that’s another huge bonus vs. RSS.

Reply

Martin November 29, 2011

Thanks, I’ve been looking for this.

Reply

Joseph Buarao January 15, 2012

wow.. great tutorial.. thanks for sharing… mate :)

Reply

Maija February 24, 2012

Thank you so much! That has been driving me crazy!

Reply

Kristine November 1, 2012

Thanks for this. Only it’s not working for me.
Most of my images are center aligned and are displayed as per your ghastly first example in RSS which bugs me endlessly.
However, if I edit the HTML to include a space beneath the image, extra space also appears in the post on my actual blog – which annoys me more.
It appears WordPress is including an automatic tag which I can’t work out how to remove.
Any advice?
Thanks.

Reply

Majalah June 19, 2013

Hi Chris, I have similar problem like Kristine. Is there any solution for this issue?

Reply

Enrico November 28, 2012

Thank you so much for this great tutorial and greetings from germany.

Reply

Spafford December 14, 2012

It looks like the post is from 2007 (?). Do the rules still apply? I’ve been looking for a solution to this!

Reply

Chris Pearson December 18, 2012

As far as I know, this technique still works as well today as it did in 2007.

Reply

Vohn McGuinness September 25, 2013

Hello, I am happy with HOW my images display in Wordpress reader. What I’d like to know is if I can control WHICH image is displayed. I recently wrote a blog post with three galleries & an image. I wanted the image to be displayed but Wordpress chose the first gallery, which is fine in context inside the post but looks rubbish as the image on reader. Is there any way I can change which image reader chooses to display? Thanks for any help you can offer. Vohn

Reply

Arieon March 14, 2014

A simple yet so powerful. With this, the image will be nicely placed for the feed readers and make it easy for people to read.

Reply

Hoot and/or Holler

Previous post:

Next post: