Inserting and Aligning Images In Your Wordpress Blog

by Costa on October 22, 2007

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.

Related posts:

  1. Aligning Images With Your Stylesheet. UPDATE: If you are using the new version of WordPress 2.6 and above, check this post: Align Image In WordPress 2.7 A lot of Wordpress Themes don’t include the functions to align images, something which I find very strange and have no explanation for. I mean, they have written the...
  2. Display Thumbnail Images In Post Excerpts Maybe for some reasons or another, you do not like to use plugins to display images in your post excerpts. Using plugins do have limitations. For one, you cannot control the images to be displayed and the post the images to be displayed in. Doing it manually lets you...
  3. Insert Thumbnail Images In Your Homepage Post Excerpts Under normal circumstances, if you are not using a theme that comes with the the Customs Filed functions written in, you cannot insert images to your homepage excerpts. Many bloggers likes to show just a small excerpt of their post in the front page by inserting the “read more” command...
  4. Wrapping Text Around Your Thumbnail Images WordPress 2.9 latest feature that lets users post thumbnail images in their post excerpts has certain limitations which makes me refrain from using this feature. This new feature however will be great if you are planning to use your Theme like a magazine style layout with thumbnail images fixed on...
  5. Inserting A New Header Image I said before that I don’t like to mess with header images for WordPress Themes that does not comes with any header images. Themes like this one that I am using does not have provisions for header images and when you are not good in CSS codes like me, trying...

{ 1 trackback }

Things That You Should Learn in Blogging | Blog Gigs
October 29, 2007 at 10:15 am

{ 1 comment }

Jaxon S October 22, 2007 at 10:57 am

Interesting. I didn’t know about these things. What I do normally is to manually float it right or left then set the value for the margin or padding in relation to the text, also manually.

I shall definitely try the methods you mention here.

Comments on this entry are closed.