First of all, we'll need to upload an image to Wordpress.

Please note Beverley has written a great resource on finding images for your site. View it here.

Before you do, I want you to position your cursor on the line which you want the top of your image to appear on. For example, I want my image to be at the very top of the screen, so what I'll do is position my "I" beam on the very upper line of text, as shown in the screenshot.

I suggest that you add each image to your article on a new paragraph - it's just looks a bit nicer then having images in random positions around the page.

So, position your blinking "I" beam (don't worry, we'll "float" the image in the next step) as shown here (purple line):


Now we're ready to upload the image. Time to hit the suspicious looking Add Media button.

From here, the upload window will appear. It's pretty self-explanatory but I'll explain a few things anyway:

If you have content already uploaded into Wordpress, you will find that here. I have nothing uploaded to this website, so my page is blank. If you did though, you can easily insert old uploads quite easily.

On the side there are a few options:

Insert Media is the page that we're on. It's the easiest way to get media from your computer into Wordpress.

Create Gallery is a fancy pants way of creating a gallery of photos (you wouldn't have guessed, eh). Just drop a bunch of pictures in and Wordpress will automatically create a grid like view of all the pictures, no plugin required!

Set Featured Image is quite nifty. Some themes let you set a featured image for a post that can appear in other places on your blog, such as next to the content on the front page. If your theme supports featured images, you can set that here.

Insert from URL lets you "hotlink" an image from another website onto yours. This is generally bad practice, as it's kind of rude to piggy back off someone else's bandwidth, and there's always the possibility that the server hosting your image might go down and your image with it. Best to host images on your own web server.

So, if you've been following me, click back to Insert Media so we can actually stick something in our post. By far the easiest way to get something into the uploader is to drag and drop it onto the page, but if you want to do it the old fashioned way with the system dialog, just hit the Select Files button. I'm going to drag mine in.

As you can see, there's no target you have to aim for. When the screen goes blue, you can release that mouse button!

From here, the image will upload. This normally takes just a few seconds, although does depend on your internet connection and the size of the image.

By the way, so far we're just doing images, but Wordpress can upload a lot more:

Images

  • .jpg,
  • .jpeg
  • .png
  • .gif

Documents

  • .pdf (Portable Document Format; Adobe Acrobat)
  • .doc, .docx (Microsoft Word Document)
  • .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
  • .odt (OpenDocument Text Document)
  • .xls, .xlsx (Microsoft Excel Document)

Audio

  • .mp3
  • .m4a
  • .ogg
  • .wav

Video

  • .mp4, .m4v (MPEG-4)
  • .mov (QuickTime)
  • .wmv (Windows Media Video)
  • .avi
  • .mpg
  • .ogv (Ogg)
  • .3gp (3GPP)
  • .3g2 (3GPP2)

It is worth noting however that not all these files will be displayed in the same way as images. For now, let's just stick to pictures.



Join the Discussion
Write something…
Recent messages
mhamilt Premium
Thanks everyone, glad it's helpful!
Reply
lisawells Premium
Thank you so much. Clear, concise and just what I needed! Lisa
Reply
Hudson Premium
Thanks Mark,
Super explanation, very clear,
Hudson.
Reply
jpnetco Premium
Very nice explanation, I like your style, easy to follow. I've known how to add an image, but never looked at the additional tips you gave, now I look forward to adding more images.
Thanks.
Reply
Shawn Martin Premium
Thanks for the info! I just went through my site and fixed all the images. Thanks again!
Reply
Top