Positioning Images in WordPress

Last week, I happened upon this post which asked about how you position an image in WordPress – this person had been used to working with Blogger’s style of inserting images with the dialog and only 3 positions possible.

Although WordPress is a very powerful system to work on with your blogging, with the use of a simple plugin – Advanced TinyMCE Editor – all the image options are just as easy now, as it was with Blogger.

Generally, when you insert an image in WordPress, you’re using the upload section, found below the editor window in the new post page. It’s a very straightforward thing to do, but if you need a refresher, Snoskred has an excellent guide on how to do that. πŸ™‚

If the image you want to insert is not one you’re uploading to your own site – for example, a Flickr photo you have permission to repost (either direct from the photographer or through a Creative Commons license) – there is a function built into the Editor. It’s the Image button, which can be found in the second row of the toolbar –

Insert Image Button - shortcut Alt+Shift+M

That will bring up this dialog, just like this with all the lines blank –

Insert Image Dialog

When you put the address in, the editor will go ahead and load the image in the Preview panel. If you’re satisfied, then click Insert. The great thing is that, unlike Blogger, you can always go back and edit the image’s look without having to worry about knowing much HTML. πŸ˜‰

Click Insert to go on…

If you simply insert the image using the defaults, it will appear like this on your blog. It will use the specifications that are found in your theme’s CSS file for spacing and borders, and other bits for appearance.

Guide Tree If I start a paragraph right after the photo without a new paragraph or setting text positioning settings, as you can see, the text will start from the bottom right of the image. This is something that can also be changed in the Insert/Edit image dialog.

To access the dialog after you’ve posted the image into your post, simply click on that image, then either click on the Insert image button again, or right click on the image and select Image properties. The dialog will come up and look like the second one posted above. To change specific items about the image, click on the Appearance tab, which looks like this –

Update Image Appearance

The quickest way to change the alignment of an image in your post is to use the line of the same name. There are a myriad of selections that you can use. Below, using the same image as above, I’ll show you what the that will look like. The image above is using the “– Not Set –” option.

Guide Tree The baseline setting is no different to the not set setting. The text will start at the bottom of the text, as if the image was part of the line of text.

Guide Tree This is the top setting – in this setting, the image acts like it’s the main feature of the line, but the text to the right goes from the top of the image, and creates a large white space between the end of the first line’s text to the beginning of the second line.

Guide Tree The middle setting will place the text in the middle of the image vertically. This creates a large white space between the top of the image and the text, and then between the text and the rest of that paragraph.

Guide Tree The bottom setting is, again, no different to the default or the baseline settings – as in those, the image is seen as part of that line of text.

Guide Tree This is the text top setting – not really any different to “top”. By this point, you can probably see that with HTML, there are generally a few different ways to get to the same conclusion. πŸ˜‰

Guide Tree The absolute middle setting is another clone of the “middle” setting from above.

Guide Tree This is the absolute bottom setting – look familiar anyone? πŸ˜‰

Guide Tree

Now, we get to some interesting looking images. This is the left setting. As you can see, the text will now flow around the image; generally, if someone is putting text as part of their regular posting – such as showing people what product they’re talking about, or an image of the author of that particular column. The catch is that, with this setting, all of the text will flow around the image – including other images.

Guide TreeDepending on the width of your screen, this horizontal line might still be to the right of the last image, but the next image is over there, on your right. This is, as you might guess, the right setting. Once again, all text will wrap around the image, and this will include images once more. Eventually (and I’m judging this on my monitor being maximized and the editing window being quite wide), you will see that the text will start move back to the extreme left of the line after the previous image. If you’re on a smaller monitor, the text probably has already gone under this image. πŸ˜‰

Something you will have noticed is that the only image that has moved away from the left side of the page – that is because all of these adjustments to the alignment have to do with the vertical alignment of the image in relation to the text. If you want to put the image into the center of the post, you simply use the buttons in the toolbar. :)The next section that you see in the window are the dimensions. This is only really useful if you want to post a full image and then resize it to fit your needs. Generally, I don’t recommend using this function as this will make images not look very good – the only time that you should reduce the size of an image is when it is definitely too big for your blog’s design, and you can’t use a thumbnail linked to the original image. The next image will have a setting of only typing in 125 for width, and checking the constrain proportions box. The great thing about that box is that you only need to put one dimension in, and it will automatically sort out the dimensions to keep the image in the same shape it was.Guide Tree

Now, let’s take a look at the vertical and horizontal space functions. In some blog templates, these will have some default values set out in the CSS properties for that theme, others will not. First off is the vertical space. I’ll set the next image to have a vertical space of 30 pixels – just to exaggerate the effect.

Edit: Now that it’s live, I can see that my template doesn’t like the settings. I’ll work on a fix for that. I’m guessing it will involve CSS…

Guide Tree The image is on the “not set” for the alignment, and as you can see, thanks to the vertical spacing, there is now an appreciable white space around the image. For the next image, I’ll change the horizontal space to 30 pixels again.

Guide Tree Now here, you can see that the image is well clear within the same line to the text. There is one last example to use – setting both variables to 30.

Guide Tree With this setting, you have a pseudo-border; one that is transparent and will blend into the background of your blog’s template. However, if you want to use an actual border, use that line; an example of which (set to 15n be seen in the next image.

Guide Tree I just want to note that for this image, I made the color red by putting this line in the style line of the dialog box – border-color: #ff0000. With that, you can see that there is the separation between the image and the text again, but this time it is a colored area.

Edit: OK, I’ve changed everything to a CSS-based property, but it appears that my template likes everything now except for the border example, which it doesn’t like at all…here is what it looks like in the editor (with a manually-added 2 pixel border πŸ˜‰ ) –

This is how it *should* look…

The next line of the box, class, is used to select from the two style classes that are involved in the editor, the same ones in the class drop-down in the toolbar – generally, there won’t be much use to those options. The last line that is in there is the style entry – there you can enter any CSS you would like to use to change the appearance of the image. However, most of the functions covered by style (although they’re the preferred method now) are covered by the other sections of the box.

This will now bring us to the last tab of the dialog box – Advanced. Here, as the term suggests, you can adjust advanced settings. I’m not going to go into the explanation of the options, as, quite honestly, they’re stuff you’re likely never to use – at least I don’t use them. πŸ˜‰

Advanced Settings

It’s not terribly difficult to work with images in WordPress, and the settings are, as I mentioned, even more powerful than anything you’d ever seen in Blogger – also, you don’t get all the excess code that Blogger dump into their image code (you know, the cursor settings and other stuff that clutter up the code more than anything else).

As always, if you’d like something explained, drop me a line via the contact form. πŸ™‚

4 thoughts on “Positioning Images in WordPress

  1. Thank you for taking the time to prepare this post. I can tell it took some time, so thank you very much. I had done several searches for a tutorial like this, but only found some that had numerous comments saying the tutorial wasn’t working for them, so I got really frustrated.

    I definitely got very used to the Blogger style of using images, and now that I’m on WordPress (many thanks to Snoskred), I’m trying as hard as possible to find easy to understand tutorials for working with WordPress. This tutorial will help me a lot, and I’m bookmarking you right now! πŸ™‚ I recently learned how to add video to posts, so that’s very cool!

    I’m thrilled beyond words to be using WordPress now, and hopefully very soon I’ll be blogging like a champ with it. Now I’m going to read the post again… Thank you!!!

  2. This is very helpful. Thanks. I wanted to ask you a question about a related topic. Photo overlays like those found in one of Sadish’s themes. Here for example.

    I really love these things and would love to have them in another blog I am using now here.


    Do you have any idea how I would go about doing this? Also I wonder about it working with these large photos. Maybe there is a size limit.

    Any info is appreciated. (Oh. doesn’t like the word “inf* “) How about HELP then? πŸ™‚

Comments are closed.