How to display images properly on Feed Readers

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 1 - Properly Formatted Image

Figure 2 - Image Broken in RSS FEED

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’]
WordPress Blue Links
[/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’]
Wordpress Logo
[/sourcecode]

How to Add the Attributes

– Switch to the code editor – HTML View:

Switch to 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

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

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!

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

20 Comments.

  1. Lyndi says:

    This is interesting, you have put in a lot of work here. Currently I use a plugin called ‘Align RSS Images’ to do this job for me. I will try this, maybe I can reduce the number of plugins I use. Thanks.

  2. Alok says:

    yah Arun, i am always facing this alignment problem with images and videos too.
    So, i am thinking, you have solved my some problems. 🙂
    Thanks for sharing with us.

  3. Amal Roy says:

    Nice post buddy. Many of them could now get the alignment problem solved easily. Good Luck :).

  4. Anish K.S says:

    Thanks buddy, nice tips, will follow these 🙂

  5. Phaoloo says:

    Nice and simple trick 🙂

  6. bestlinkbuildingblog says:

    I think the latest release of wordpress has the align image function built-in. Or are you suggesting that we do not use the builtin image align function.

    While I have used the function to align my images with text of the post, I am not sure if it came out all right on the feed reader or not. Please let us know.

    • I am not suggesting not to use use the inbuilt align. The image uploader adds a class attribute to the image, and the class is defined in your css. It does not actually insert the align attribute.

      Check your post with a right aligned image in a feed reader. If its looking good, you don’t have to do anything. Else use this tweak 🙂

  7. Hesham says:

    very good tips, thanks a lot for your effort!

  8. sham says:

    Nice piece of info..I will try following it..

  9. robb says:

    i usually didn’t bother about RSS
    but hey, great tips !!

3 Pings / Trackbacks.

  1. Twitted by inaghita says:

    […] This post was Twitted by inaghita […]

  2. Interview with Arun Founder of Million Clues – Famous Bloggers Club | New Media Bloggers says:

    […] How to display images properly of Feed Readers […]

  3. […] If you see that your images break between text in the RSS Feed or Email, follow this detailed guide. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*