How to (and how not to) add a picture to a post in Wordpress

by admin on March 21, 2009

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Tips on adding images using the Wordpress Visual Editor

Often, when creating a blog post, you want to wrap text around a picture, like below, or have two pictures side by side. The problem is that using the Wordpress Visual Editor things can often go awry.  This post contains:

  • left aligned image with text wrapped on the right
  • two side by side images
  • left aligned image with text wrapped on the left
  • centred image
  • images with margins and border

adding-a-picture-to-a-post1

I frequently have problems uploading pictures into the precise position I want. Either the picture is mislaligned or the text does not wrap nicely around the picture.

This problem can be solved by switching from Visual to HTML mode providing you are familiar with a few HTML tags and Cascading style sheet attributes. However if you are not an HTML wiz, there seems to be no easy solution.

In this article I aim to demonstrate how to use the Visual editor how to insert pictures while retaining some control of the layout.

The picture above was added as follows: -

  1. Click on the ‘Add an image’ icon
  2. Select the Browser Uploader (as the Flash Browser does not work for me)
  3. Click Browse and navigate to the file on your PC then click open
  4. Click on Upload to upoad the file to your media gallery
  5. Then choose the size of the file - I choose medium - then I added a caption and description. I did not add a URL - you do this only if you want the image to be clickable
  6. Then click ‘Insert into Post’

However there is a problem. The editor view of the post shows the text wrapped around the image however the page itself has the text beneath the image. the wrapping of the text simply does not work if you include the caption and the text appears directly below the image.

post-with-caption-in-the-editorpost-with-caption-on-the-site

Captions and Alignment do not work together in the Wordpress Visual Editor

Basically, when there is a caption then the alignment does not work. My next step was to delete the caption.

clear-the-image-caption

  1. Click on the Image
  2. Click on the ‘Edit Image’ Icon
  3. Clear the ‘Edit Image Caption’ box
  4. Click Update.
  5. Click Save Draft
  6. Click Preview
  7. The text now appears wrapped around the image

Misalignment of columns

The next problem was with the text alignment.  It was all looking like a bit of a pig’s ear: the social media ‘Share and Enjoy’ links were bleeding upwards between the images.

alignment-issues-with-side-by-side-pictures

Equivalent of a <div style:”clear:both”> in the Wordpress Visual Editor

What I needed was  to be able to set the alignment instructions so they only applied to the images and not to the text in the next paragraph. This is the equivalent of a <div style:”clear:both”></div>in the Visual Editor. This instruction clears any previous alignment options and makes things work normally from this point on.

However if you switch to HTML mode, add the <div style=”clear:both></div> and then switch back to visual mode then the div gets stripped out. So this solution will not do.

I did find a modified approach that works. It involves adding a heading. The heading can have text but it can be left blank if you prefer

  1. Click the ‘Show Kitchen Sink’ icon so you have two rows of formatting icons
  2. Select the ‘Format’ drop down box on the left hand side on the second row and select something like Heading 3.
  3. Click the ‘Align Left’ icon in the middle of the top row
  4. Add some text for the heading
  5. Click the HTML tab - this gives you the HTML view of the page
  6. Scroll down to your heading and add the text clear:both immediately after the text style=”text-align: left; but before the closing (double quotation mark). The text should then say style=”text-align: left; clear:both”
  7. Click the Visual tab
  8. Click Save Draft
  9. Click Preview

The Visual Editor retains the clear:both instruction since it is associated with a heading and not a div. The solves the bleeding text problem.

Advanced Options for changing Image Borders, Margins and Sizes

The only other thing I found useful in putting together this post was the advanced editor options on images. These helped me size the images correctly, add margins and also add borders where I wanted them.

wordpress-image-editor-advanced-options

In this example I updated ‘Styles’ to create a small margin and make a red solid line border; the CSS class was automatically filled in by Wordpress when I specified the image should be centered.

A Summary of Tips for Image Editing in the WordpressVisual Editor

  1. Use the Browser Uploader; not the flash uploader
  2. Do not mix use of Captions and Alignment
  3. Use the HTML editor to add the style clear:both to headings in order to reset text  alignment
  4. Use the Advanced Options if you need to resize images, add margins or borders

My video camera and telepronter arrives next week so I will shoot a video on this.

And just maybe I will have a whole new set of problems including a video within a post.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

{ 2 comments… read them below or add one }

Rachel 03.29.09 at 3:56 am

thanks for that “clear:both” command. I actually used it in CSS so my metadata would stop wrapping around my images.

Rachel’s last blog post..Green Vegetable Soup

admin 03.29.09 at 2:02 pm

Hi Rachel,

I am glad the tip was useful. I only discovered the “clear:both” a few weeks ago and it has put an end to much frustration.

You have a fantastic looking site at http://rachelschell.com. I noted you have a custom Wordpress theme which you built yourself.

Is building custom themes one of the services that you offer or was this just a one off?

Best Regards

Russell

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>