WordPress 2.5+ Tutorial – How to Upload and Insert an Image Using WordPress

My Sample Caption for This Image

My Sample Caption for This Image

Related post: WordPress 2.5+ Tutorial – How to Position an Image and Wrap Text Around an Image

Inserting an image using WordPress version 2.5 or later is slightly different than inserting an image using WordPress version 2.3 or earlier. Versions 2.5 and 2.6 are essentially the same. Version 2.6 is the latest version as of July 2008.

Inserting an image that you have already uploaded to WordPress but haven’t used in a particular post or page is actually a bit confusing in version 2.5 or later. You need to be able to find the elusive “Insert into Post” button. It’s not obvious.

There are many other settings and features in the “Add media” tools in the WordPress editing interface. This tutorial covers only the most basic aspects of uploading and inserting an image.

So check it out.


How to Upload and Insert an Image Using WordPress 2.5+

About these ads

11 Responses

  1. hi

    thanks for the tutorial
    i tried all the above steps but still the image doesnt allign the text , it appears on an area that has no text on it , then the text appears after the image , i used the align left option but nothing happened
    please help :(( :((

  2. sorry i forgot to mention that i am using the insert from url not upload option , i want to use this feature not upload from pc

  3. Hi queeneve,
    You may have a WordPress theme that overrides the align feature.

    Can you tell me the URL of the page you are having trouble with? If you don’t want people to see the URL here in the comments, just let me know and I will not publish it.
    Mark M.

  4. queeneve,
    The align / text wrap will not be affected by your choice of insert using URL vs. Uploading from your computer.

    If you can tell me your domain or website URL or WordPress.com username (assuming your site is on WordPress.com), then I can look at the HTML Source to see what’s going on there.
    Mark M.

  5. thank you so much!!!!!

  6. Hello, I have the same problem, I done the step from the tutorial but stiil not eorking, is there a plugins or some cod that i have to put on style.css so the text will warp around the image? Thank in advance!!!

  7. Thanks Mark for this wonderful tutorial. I am having trouble with inserting a screenshot in my blog because the right side is cut off. The image is a bit too wide and I have tried to resize it without success. The other problem is to ensure that the resized screenshot remains legible because it’s mainly text. Any help is most appreciated. http://shebamuturi.wordpress.com/2009/11/07/a-tale-of-two-e-conferences/

    • @shebamuturi
      Thanks for your question. If you happen to have Photoshop, this is where it really comes in handy. If not, I suggest trying Photoshop Elements. It’s Photoshop “Lite” for PC or Mac. It’s about $80 but you can get older versions for less. http://www.adobe.com/products/photoshopelwin/

      Also take a look at freeware called Paint.net: http://www.getpaint.net/ for Windows PCs. Windows includes a program called Paint that you can use to resize images. It’s not a great piece of software, but it does the job. I’m not sure how it differs from Paint.net.

      Microsoft Office comes with a number of extra “Tools”. One is a program called Picture Manager. This can also be used to resize images. It’s easier to use than Paint.

  8. Thanks Mark for your prompt response – you are the best. Windows Paint worked although it’s not great as you warned. I had to drop the idea because the resized screenshot wasn’t legible. I will follow your suggestion to invest in Photoshop. Thanks again.

    • @shebamuturi
      Glad that was helpful. It’s a great question you raise. I need to do a tutorial on it! But as you note, there’s not a really easy solution unless you are willing to pay for software. Check out Photoshop Elements. I think it has enough features to accommodate what you want to do. For the font resizing problem you mention, there’s a “Filter” in Photoshop/Elements called “Sharpen – Unsharp Mask”. It’s great for that. It gives small blurry type a much sharper edge, making it easy to read.

      Something else that helps readability is saving graphics – like logos and fonts, things with large blocks of solid color – as a .GIF image. (Although Paint produces very poor quality .GIF images, so that won’t help unless you’re using Elements or similar software.) Save photos and color gradients as a .JPEG / .JPG image.

      You might also be able to find an older version of Photoshop or Adobe Creative Suite (like CS3 or CS2) on eBay. I have gotten new copies of old versions of software on eBay for a very good price.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 223 other followers

%d bloggers like this: