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.
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:
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:
How to Add the Attributes
– Switch to the code editor – 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.
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.
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):
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!