Inserting and Aligning Images In Your WordPress Blog

This another something for anyone who has just started to blog in WordPress. I have to clarify that I have never been trained in whatever computer programming language so whatever tips you read in this blog is not from an expert but from a noob who found out how to do things in WordPress through trial and error. Therefore, some of the tips I offer might be crude and stupid, but it worked for me and so I hope it will work for you too.

Inserting an image in your wordpress blog could be brain breaker for newbies. First, you have to do is to click on the “little tree” icon on the top of your text editor and you will be presented with this window.

Now all you have to do is to insert the image URL, which first of all you must know where the image have been uploaded to. So in reality, to insert an image using that tool, you have to upload the image first. To upload an image, scroll down a little bit below your text editor, you will find this.

This is the easy part. Click on “browse” to locate the image stored in your computer and then click “upload” After uploading, you will be given an option on how you want the image displayed.

If you choose “thumbnail”, it will appear as such, just a thumbnail of the image. Your reader will have to click on the thumbnail to view the actual size. This can be useful if you really want to display a really large image, but maybe discouraging for your readers because many a lazy to click and wait for the image to load unless it is something really interesting. I always resize my image in Photoshop to fit my blog, so I choose the “full size” option everytime.

If you don’t have Photoshop, you can actually resize your image in the text editor itself. More of that later. There is another option which I have never used. Displaying the image as “Title”. I don’t think you need that.

Linking the image to your page is the best option, I think, so i always use this option. After checking the appropriate options, click on the place in your text editor where you want the image displayed. It can be anywhere you fancy and click “Send to Editor”. Assuming that you are writing with your Visual Editor, the image will appear within the text editor on the place that you have clicked just now. Now you can resize your image if you know the size of your theme’s content area. Click on the image in you text editor and the image will be selected. From any corner of the image, you can drag the image to the appropriate size.

You can now publish your post, but the image will always be displayed on the left corner above the text. You cannot wrap your text around the image or align it anywhere else. To do that, you will have to depend on the “insert/edit image” button that we discussed initially, but you will have to find out the URL where the image is stored first. To do that click on “EDIT” just above the thumbnail image that you have just uploaded. (refer image above) You will be taken to this.

Select and copy the URL then go back to the “insert/edit image” window. Paste the URL that you have just copied into the “image URL” box. The dimension of the image will be automatically displayed. You can of course resize here also but I would not advise it as the image will go out of propotion.

The “alignment is “not set” if you leave it as it is, it will appear just as how it appeared just now. Since you want it aligned and wrapped around the text you can set it here. Using the drop down menu, select your choice, but I have to tell you, it doesn’t do a good job. Only the “left” right” and “top” option dos a little bit of good. You can leave the other options blank, as I doubt you know what are the correct pixels to type in. After everything is set, click “insert”. Your image will appear on the corner that you have chosen, like what you see on your right here.

Though you now have it aligned and text wrapped around it, it looks rather untidy. The text is too close to the image. I will show you a easier way to align them neatly in my next post, but it will take a little bit of messing with your theme’s stylesheet.