How do I add spacing to images in my RSS feed?
I'm pulling out my hair! I want to include images in my blog entries and have those images show up in the RSS feed too, but either I end up with no image showing up at all, or I end up with the text abutting the image, which looks terrible. What's the best practice with this, Dave?
I read almost 200 different RSS feeds every day with NewsGator Online and know exactly what you mean. Even the best, biggest sites have similar problems because either they don't remember that RSS feeds are read in other programs or because they don't know enough CSS or HTML to tweak the layout.
For example, here's a nice example of how the otherwise splendid GigaOm blog has spacing problems with its RSS feed:
Clearly it would be more attractive if there were just a few additional pixels of blank space around the edge of the image, and that's easily accomplished either in HTML or, better, using Cascading Style Sheets.
You include an image in your blog posting through a tag like this:
<img src="some url" />
I strongly -- strongly -- recommend that you always specify alt text too, ideally describing exactly what the image is about. This helps both with people who can't or don't want to load images (think "ADA Compliant") and it also helps with search engine ranking too. My image above, for example, includes the following: alt="GigaOm RSS Image Spacing Problems".
If you want to have the text wrap around the graphic, you're probably also adding align="right" or align="left" depending on your desired layout and appearance. Add these two in, and your image inclusion's a bit more complex:
<img src="URL" alt="alt text" align="right" />
That's a typical way to get a graphic on the page and, if it's in the part of your blog entry that's included in your RSS feed, in the RSS feed too. But what if you want to add a bit of spacing?
There are two ways to add spacing to an image. Within the world of HTML, you can add horizontal and/or vertical spacing with the hspace and vspace attributes, respectively. The unit of measure is pixels and the value is applied to both sides, so specifying hspace="8" will add 8 pixels of blank space on both the left and right of the image.
The more sophisticated solution is to use CSS, however, because you have greater control. If you want to have that 8 pixels of space around all four sides, for example, use margin:8px;, but if you really only want the right and bottom edges to have the extra spacing, you can do that with margin-right: 8px; margin-bottom: 8px;. Note carefully my use of colons and semicolons.
Dropping CSS into an HTML tag is done with the style attribute, so here's our completed example image that includes an additional 8 pixels of space around it:
<img src="URL" alt="alt text" align="right" style="margin:8px;" />
You can do that, right? :-)
What about missing images?
the other problem, and one that I see in RSS feeds with alarming frequency, is that the image is completely missing when the feed is viewed. Sometimes this is just a transient server problem, but mostly it's due to a lack of specifying a fully qualified URL.
Your blog articles can include partial URLs like "/images/neatpic33.jpg" without an issue, they show up fine when people read your blog by visiting your site, but without a domain name specified, the RSS readers just don't know what to do and can't deliver the image where you want it.
The fix is easy: Always specify the http:// material in any blog image reference.
On the image inclusion above, just by way of example, here's the actual HTML code I am using:
<img src="http://www.askdavetaylor.com/0-blog-pics/gigaom-rss-image-error.png" alt="GigaOm RSS Image Spacing Problems" />
Rather a long URL, but I'm confident it'll work regardless of how this blog entry is referenced.
That's all there is to it. I hope you find this helps you tweak your RSS feed to meet your aesthetic desires!
More Useful Blogs and Blogging Articles:
✔ Get my shopping cart plugin to work with WordPress?
We've put in a shopping cart for a client that's not working, and we need some help! The cart is currently using the...✔ Embed an audio player on a blog or web page?
I have some mp3 audio files I've recorded and would like to have people who visit my site be able to listen to...✔ Can I write a guest review for AskDaveTaylor.com?
Hi Dave. I'm a big fan of your site and love that you're doing so many reviews now. I've noticed, however, that there...✔ Change author on WordPress blog post?
I have two accounts set up for my WordPress blog and I'd like to be able to have all my posts from a...✔ How do I restructure my Wordpress blog without losing SEO?
I have a wordpress blog that was using categories in the url structure like this: /category_name/post_name/ Then I had read somewhere that if...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+