How To: Posting Images In WordPress

A couple of days ago, my new friend, Nancy, asked me how I posted pictures in my blog – the way the text was wrapped around the images instead of beginning at the bottom edge of the image. I’m glad she asked because it gives me an opportunity to show some of you one of the first things I learned about HTML and CSS.

The method is called a “float.” You would think it might be called a wrap, but no, I didn’t get to be on the naming committee. I’ll describe the method of doing this so that anyone coding an HTML page can do the same. You can use this method in any HTML document, it doesn’t have to be WordPress. There is a shortcut to this method for those using WordPress, so keep reading, I’ll get to it soon.

Although you can use floats for text boxes and other things, I’m only going to be talking about images and graphics. You can code the image using in-line styling, or you can put the CSS in with the rest of your CSS file. The in-line code for the image might look something like this:

<img style=”float:left; margin:0 6px 2px 0; padding:4px;” src=”http://1footinthegrave.com/images/genesee010-tn.jpg” alt=”barn” />Blah, bla, blah…

The text you enter after that will now float to the right side of the image, beginning at the top and wrapping under it. The “float:left” attribute tells the image to go to the left side of its container. The “margin” code tells the browser how much space to put around the image to give it a little elbow room. In this case, it is telling it to display text zero pixels from the top (you do not need to use the designator “px” when the value is zero – zero is zero no matter if you’re talking about pixels or miles), 6 pixels from the right side, 2 pixels from the bottom and zero from the left side. Margin values are given clockwise – top, right, bottom and left. Think of margins as the space around the outside of the object. Padding is the space around the inside edges. The image above has a padding statement of 4px. In margins and padding, you can state one value that applies to all sides. You can adjust the spacing by changing the values to what suits you.

Here is another image that floats to the right of the text. The code still falls at the beginning of a new line and your text is still typed right after it (no space, just type). You can see the differences in the code by studying it below.

<img style=”float:right; margin:0 0 2px 6px; padding:4px;” src=”http://1footinthegrave.com/images/4goofballs-tn.jpg” alt=”friends” />Yadda yadda, blah…

Note that I changed the values of the margin so that the space would now be on the left side of the image instead of the right. You can use this styling for other things, as I mentioned. But it’s a lot simpler if you add the CSS to your CSS file instead of styling it in-line. Many WordPress themes already have this code in their CSS and all you have to do is set a class attribute in the image. The code I have in my style sheet is as follows:

img.alignright { padding: 4px; margin: 0 0 2px 6px; }
img.alignleft { padding: 4px; margin: 0 6px 2px 0; }
.alignright { float: right; }
.alignleft { float: left }

You should check your theme’s CSS file to see what you have that is similar. The image of me and my friends can now be coded like this:

<img class=”alignright” src=”http://1footinthegrave.com/images/4goofballs-tn.jpg” alt=”friends” />Yackity, yak, yak…

As you can see, there’s a lot less code to write.

For you WordPress users, posting images is much easier. There is a price, however, because you can’t choose to make your thumbnail images a different size whenever you want. Them that likes the simplicity of it though, can use the “upload” feature inside your editor. Browse to the image on your computer you want, give it a title, add a description if you want and click upload. You then select from several options, one being to display a thumbnail image, and tell it to add it to your editor. You will have to move the graphic or image to the location in your post that you want it – just a little cut & paste work. Finally, you add the float declaration to align the image on the left or right side. Here you see a graphic I designed as the logo for my flooring message board for professionals and do-it-yourselfers.

You may have already noticed that you can see larger versions of my images appear before your very eyes when you click them. That is a fancy plug-in I found at WordPress – just do a search for “Lightbox” there and you’ll find it. For those of you who don’t know what I’m talking about, one of the nice things about that plug-in is, if it doesn’t work for the user’s browser settings, it will just link to a larger image. You can click the back button to return to the page.

I hope this tutorial has helped a few. I tried not to be so overwhelming with the technical jargon in hopes that most can understand it better. I remember what it was like when I first started to learn this kind of stuff. If you have questions or comments, just add them below.

Jim with 1 Foot in the Grave