Aligning Images in RSS Feeds
Design Problem:
The images in your posts look perfect on your blog, aligned to the left or right with the paragraph text beside the image, but when the post is delivered by RSS to a feed reader or to your subscriber’s email the styling is “broken” — the paragraph text “falls down” after the image or appears at the bottom of the image.
The Reason this happens:
When a post is displayed on your blog — at the web address where it lives online — the post and all its formatting (images, paragraphs, headers and subheaders, bullet lists, blockquotes, etc) pulls style instructions from the style sheet (style.css) in your blog template or theme.
When that same post is delivered by RSS feed — to someone’s feed reader program or to their email — it’s a kind of “copy” of the post content that is no longer “living” on your blog. The post is displayed in a different environment where it is no longer receiving instructions from the style sheet. The formatting, style, and appearance gets stripped of its original instructions.
A simple solution:
The easiest way to preserve your image style formatting is to embed the style instructions in the HTML image tag, so that the image “takes the style instructions along wherever it travels” outside your blog.
Manually edit the HTML image tag:
If you don’t know much HTML or CSS, chances are you use a Visual Editor mode when composing and editing your posts. You can either turn off the Visual Editing in your “Writing” options, or choose to “view the HTML code” when your in an edit post screen.
Look at the HTML for your image — it probably looks something like:
<img src="http://yourwebsite/images/postimage.jpg" />
src is where your image lives online; where you uploaded it. This is where the feed reader or email delivery of your post finds the image to display. alt or title tags display the alternate name you gave the post (which you may have been prompted to enter when you inserted the image into your post).
Add style instructions to the img tag
style=”…”
You can borrow these style instructions from your blog theme or template, found in the style.css file, so that it most closely matches the appearance on your actual web site.
If you want your image to align beside the paragraph text, you want it to float either to the left of right.
NOTE: In the following code examples, the lines are “wrapping” because they are longer than the width of this content area — there would be no line break in the URL of the src — the actual code is all one line, ok?
Floating an image to the left of the paragraph text
<img style="float:left;margin-right:20px" src="http://yourwebsite/images/postimage.jpg" />
Floating an image to the right of the paragraph text
<img style="float:right;margin-left:20px" src="http://yourwebsite/images/postimage.jpg" />
Note the little bit of margin added
In addition to the direction your want to float the image, add instructions for a margin of white space to appear between the edge of the image and the text — otherwise, the edge of the paragraph appears too close to the edge of the image. If you float or align the image to the left of the paragraph, then you need a bit of space — a margin — to the right of the image; if you float or align the image to the right of the paragraph, you want a margin on the left side of the image.
Make sure that there is no space between the closing bracket of the image HTML tag and the first letter of the paragraph text!
Save your edit.
Now, the style instructions for how the image and text display are embedded in the HTML, wherever it travels and appears.
This works perfectly in RSS feed readers and RSS-to-email delivery such as Feedburner Email, where you don’t have control of the email template code. It does NOT work in situations where the RSS of your post is picked up and displayed on another web site, such as Facebook RSS Note applications. Another web site may have stylesheets that override your instructions.
Slade Roberson is an intuitive counselor, ATP®, professional blogger, and the author of Shift Your Spirits, Automatic Intuitive Response, and the PageCoach Problogging Tutorial Series. Slade on Blogging shares behind-the-screens internet marketing, self-publishing, and blogging strategies with other personal development writers, coaches, and healing arts practitioners.
Comments
3 Responses to “Aligning Images in RSS Feeds”
Leave a Reply
-
Affiliates
-
Search
Hi Slade,
Thanks for th tutorial. I’m having exactly this problem with my Blog (www.stone-junction.blogspot.com) and it’s assocaiated feed (http://feeds.feedburner.com/Prefect-KeepingTheWorldOfPrInCheckQuiteStrictlyReally).
However, I’ve just tried to implement your suggestions and found that the images I use (which I insert using the visual editor in blogger, pausing only to manually edit the alt attributes) already have style code on them.
However, when the subscripction e-mail comes through each day, the images are invariably out of place. They always appear above the post, with the text aligned to the bottom of the image - i.e. the first line of text appears right at the very bottom of the picture.
Any thoughts?
Love the Blog by the way, great work.
Richard
Richard,
The Visual Editor is the issue, as it inserts the code. What I’m recommending is that you manually edit (hard code) that HTML in your HTML editor, to override the code inserted by the Visual Editor.
The HTML involved is fairly simple, especially after you become familiar with it. I personally turn off the Visual Editor in WordPress, which I believe you can do under the Settings, Writing options (or it may be under the Author settings).
Hope that helps! You’re very welcome,
Slade
Thanks Slade, I will have another go and see if that helps.
Richard