Problem Summary. With WordPress 2.6.1, when inserting images using the included visual editor, the code for the image placement is not complete. For this reason, on an Apple computer (and perhaps with other operating systems as well), using the Safari browser or Firefox browser, the images will show up on the left when viewed after publishing, although they show up on the right when editing prior to publishing.
Problem Solution. Follow these instructions to learn more and resolve this problem. Please note that the quotes shown here may be “smart quotes” in which case you won’t be able to copy and paste the code shown here. Or, if you do, you’ll need to correct the quote marks from smart quotes to normal quotes.
- The code used by WordPress for a typical image to be at the right with text wrapping to the left is as follows: <a href=”http://www.website.com” target=”_blank”><img class=”alignright” src=”http://www.imagesite.com/image.jpg” alt=”” width=”300″ height=”213″ /></a>
- In the example provided above, the www.website.com is replaced by the URL (website address) of the location you’d like the visitor to go to if they click on the image. If you don’t want this feature, just remove everything from <a… to .com> and remove the </a> at the end. The target=”_blank” statement means that if someone clicks on the image to go to the address you’ve indicated, it will open in a new window. In the example above, the www.imagesite.com/image.jpg is replaced by the address and location of the image you are using. Note that the Width and Height dimensions should be whatever are appropriate for your image (usually these are set automatically once you provide the location of the image).
- The problem with the code provided above in #1, is that it is lacking information to describe the image as floating on the right side of the text. The correct code should read: <a href=”http://www.website.com” target=”_blank”><img class=”alignright” style=”float: right; margin-left: 5px; margin-right: 5px;” src=”http://www.imagesite.com/image.jpg” alt=”” width=”300″ height=”213″ /></a>
- So, what’s been added is this statement after the <img class=”aligntright”… style=”float: right; margin-left: 5px; margin-right: 5px;”
- By adding the style statement to your image code, this should fix the problem. Note that the margin spacing is optional, but 5px seems to work well.
- If no word wrap is desired, then the statement should begin style=”float: center; …
Example. The complete code used for the image found in the upper right of this post is as follows:
<a href=”http://resourcesforlife.wordpress.com/”><img class=”alignright” style=”float: right; margin-left: 5px; margin-right: 5px;” title=”WordPress Logo” src=”http://dreamweaver7.files.wordpress.com/2008/01/halo_wordpress.jpg” alt=”” width=”206″ height=”160″ /></a>
Breaking it down item by item:
- <a href=”http://resourcesforlife.wordpress.com/”> … This is where you’ll go if you click on the image.
- <img … Starting the image properties information string.
- class=”alignright” … The image should be aligned to the right.
- style=”float: right; margin-left: 5px; margin-right: 5px;” … The image should be floating on the right with text wrapping around it. There should be 5 pixels of space around the image on the right and left.
- title=”WordPress Logo” … This is the title of the image.
- src=”http://dreamweaver7.files.wordpress.com/2008/01/halo_wordpress.jpg … This is where the image is located.
- alt=”” width=”206″ height=”160″ /> … There is no alternate description provided. The Width is 206 pixels and the height is 160 pixels.
- </a> … This is to mark the ending point of the link which begins before the image properties code.