Feed Readers suck only your content, all the style elements always stay on your blog. The result? Your post looks so cool online, but when it hits the RSS readers (as seen by the people who actually read your blog), the images are broken.

Figure 1 - Properly Formatted Image

Figure 2 - Image Broken in RSS FEED

If your images looks like figure 1 online and like figure 2 in your RSS reader or inbox, then follow some simple steps to make them look good.

Formatting Images in the RSS Readers

There are two was to do this:

Using an inline style element with every image (Not Recommended):

WordPress uses classes to define the style of images. Right aligned images are included in a class allignright and it’s defined in your style sheet, style.css.

Unfortunately, RSS readers cannot read your style sheets, so the styling of the images is lost.

To counter this we can include an explicit style=”float:right;” inline with the image. See the code below:

[sourcecode language='css']

[/sourcecode]

But using inline style is a bad practice, but if the next one doesn’t work for you, add the style inline.

Using the Align attribute:

Add align=”right” (replace right with left, or center if you want your image to be in those areas)

See the example below:

[sourcecode language='css']

[/sourcecode]

How to Add the Attributes

- Switch to the code editor – HTML View:

Switch to HTML View

- Find the code for the image and copy-paste the align attribute (align=”right”) to the end of the code. That’s it.

Insert Align Attribute Manually

Create a Custom Quicktag for the Align attribute

Either you can save the attributes in a text file and copy paste them every time or you may create a custom Quicktag.

Custom Quicktag for Align Attribute

Quicktags are defined in quicktags.js in the wp-includes\js folder. In WordPress 2.8 this file is compressed and editing is not easily possible. There is another file quicktags.dev.js which is the expanded version.

- Backup both files and delete quicktags.js. Rename quicktags.dev.js to quicktags.js.

- Insert the following function to the list of other similar functions defined in quicktags.js (the renamed version of quicktags.dev.js):

[sourcecode language='php']
edButtons[edButtons.length] =
new edButton(‘ed_imgar’
,’IMG Allign’
,’align=”right”‘
,”
,’t’
,-1
);
[/sourcecode]

Now you will see a new button in the HTML view as show in the image above. Move the cursor to the code of the image and press the button and the code will be inserted.

The code above will insert align=”right”, if you want left of center, create similar buttons. For every button the function name has to be different. ed_imgar is the function name of the above button.

Broken images are history!