Ads By Google

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.

Share This Post
Ads By Google
 

Free Updates

Subscribe to receive Free WordPress Theme Tips, Reviews and Discount Codes

Related WordPress Theme Tips

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...

How To Stack Your Blog Images With CreativityStacking your post images, if done creatively can add a lot more life to your post. To stack your images properly involves some simple mathematics of addition and subtraction. We...

Better Display Of Images In your WordPress Post ExcerptsMany WordPress users have problems displaying images in their WordPress blog if they decide to use post excerpts instead of full post in their home page. There are also many...

Creating A Google SiteMap for your WordPress BlogMost of you should already have created a sitemap for your WordPress blogs, so this is for the benefit of those who have just started. First download the Sitemap Generator...

Where To Find And Download Free ImagesOne of the most asked questions from emails I received is “Where Do You Find Images For Your Post?” Many a times, I feel quite surprised at questions like these....

Those who found this page were searching for:

  1. wordpress cannot insert image into post blank
  2. thumbnail images too close to text
  3. wrap text around an image in wordpress 3.1
  4. wordpress theme seo optimized
  5. adding colours to sidebars blogspot
  6. wordpress "image as title"
  7. genesis post align images text
  8. seo optimized wordpress themes
  9. embed youtube in gmail
  10. align text alongside product image in wp

2 Responses to “Inserting and Aligning Images In Your WordPress Blog”

Read below or add a comment...

  1. Jaxon S says:

    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.

Trackbacks

  1. [...] out my previous post about this topic. Image Linking is also very useful when [...]