Putting pictures on posts in WordPress

I’m going to share a few tips with you I’ve learned about putting pictures on the web, and about WordPress in particular. If you use Blogger or some other software, I don’t know how much of this will apply, but you might pick up a tip or two.

Sometimes I find inserting and formatting images into posts the most frustrating challenge of blogging. You may already know all of this, and more. Feel free to move on, or stay and enlighten us with a comment about a tip or two you may know. Don’t miss the Eiffel Tower photos at the end.

Let me start by saying I am far from being an expert. What I know I’ve learned largely from trial and error.

Here’s what the WordPress “Add New Post” screen looks like. I got this photo from taking a screen shot on my Mac by holding down the keys: command-shift-3. The computer saves a png file of the image on my screen to my desktop. I can open the saved file with my photo editing software, in this case photoshop, and crop it to whatever I want. PCs come with a “print screen” button that saves the image to your clipboard where you can paste it into a new file in your image editing software like photoshop or elements. I learned this about the PC this morning from this website where I also learned a few more tips about saving a screen shot on a mac. I’ll go back and look at it in more detail later.

Beside the circled Upload/Insert Image button, are the other buttons for uploading and inserting video, audio, media, poll, and custom form. I might have uploaded a video before, but otherwise I haven’t tried out any of these other buttons. When you click the insert image this is the next screen you get:

The tabs across the top: From computer, From URL, Gallery, and Media Library are the places you can upload or insert a photo from. I use the default, “from computer” 99% of the time.

When I want to use a photo, first I edit it and crop it in Photoshop (but other image editing software will work just as well). Then I resize it to 1000 pixels wide for landscape and 700 pixels high for portrait orientations. The smaller the picture size, the less memory space it consumes. (You can see how much memory space you have left at the bottom of the screen pictured above. I have (89.1%) left. As the monitor screen size limits the actual viewing size of the photo it is pointless to upload huge photo files. My particular WordPress theme has a 590 pixel post width. So technically I could resize down to that. I leave my images larger, at 1000 pixels, in case someone else has a larger viewing area. (I also think if someone clicks on the photo they may see a larger image this way, but I haven’t checked that out.) I resize the vertical dimension of portrait oriented photos because I don’t like to have to scroll down to see the entire image. I think 700 fits fairly well on my screen.

This is important. I save the photo with a unique name on my desktop. I learned this the hard way. At one point I thought it would be easier to just number my photos for any given post to save time in thinking of and typing names for each of them. Here’s what I learned.

Photos are uploaded into your media library and stored there. If I upload a second image with the same name as a previous image, even if it is from months ago, the new image will replace the old one in the media library and in the post it was originally uploaded to. So it’s important to give your photos a unique name. I have 870 images in my media library at this point in this post. I can’t possibly remember what I’ve named all these photos, so I’ve started using today’s date, including the year which makes it unique, as part of the name for each photo I upload today. For example, I named the image directly above “01-02-add-an-image-08-24-2011”. (The 01-02 at the beginning are just my way of keeping the images in chronological order in my image folder.)

Once my images are ready to go, named, and saved on my desktop where I can easily find them, it is a simple matter to click “Select File” on the screen above and browse to the photo I want to insert, at which point I will get the following screen:

The items I’ve circled are descriptors I can use with each photo. Mostly I leave these empty because they take time. But if I wanted to be thorough and use every tool at my disposal to advertise my blog, I would take the time to fill these in. Using a good descriptor of the picture for its title will add important key words to your post for the search engines. If this was the Eiffel Tower, for example, and I titled the picture “Eiffel Tower,” that is one more time those words are on my post adding emphasis to them and helping their rank in the search engines. The more times something appears on the page, the more emphasis it gets in the search engines. The same holds true for the “alternate text” above. This is text that will show up on a reader’s computer screen if they have turned image-loading off for the sake of speed. If I type “Eiffel Tower” here, it is one more place to get those words into this post.

The caption shows up at the bottom of the photo on your post. Again, descriptive words are good to have here if you are trying to maximize your exposure.

To be truthful, I’m not sure what happens if you use a description. I’m going to have to play with this one and find out. Do you know?

Finally the link URL is just the address your little picture has on the great world wide web. If you select and copy that, you could paste it in an e-mail for example. When the recipient clicked on it, they would see your picture. I use it if I want to reuse a particular photo in a post, like my little manuscript image that I use in my Successful Self-Publishing posts.

Gosh, it took me along time to get to the part I really wanted to show you, about positioning your photo on the post.

You can actually do a little photo editing in this window if you click on the “edit image” button at the top. You can crop, and flip photos for example. I never use this because I edit my photos earlier.

You can do the initial formatting of the picture at the bottom of the “Add an Image” window. You can choose the alignment here and the size of the picture. I typically use “none” and then center the image on my screen (which ends up being the same as if I just selected the “center” button). Since my photo is wide enough to take up most or all of the space, this keeps all text above and below the image. If I chose “left,” the text would wrap around the image on the right side. You can see in the small graphic beside each choice what the text-image relationship will look like.

I also usually use the full size for the image, unless I want to wrap the text around it, then I use the “medium”. (I’m not even sure if the “large” button works.) If I use a smaller size, like medium or thumbnail, the reader can always click on the small image and will be able to view the original larger image I uploaded if they’d like. The “Link URL” will take them there.

You can do more formatting on pictures, but first you have to save all changes, and go to the picture on your blog post window. When you click on the image, two little buttons show up. (I couldn’t capture them with my screen shot.) One button looks like a small photograph of a mountain (edit image) and the other is the circle with a slanted line for “no”, as in “no smoking,” (delete).  If you click on the edit image button, you get the following screen:

The important thing about this window, is the “advanced” tab at the top. That’s where you have a few more options.

At the top, along the left, you have the option of changing the size of the photo as it appears in your post by a percentage. I’ve used this when I’ve aligned an image to the left and wrapped text around it. I may think that it is a bit too large, so I may reduce the size to 70% or less. Only the size of the image in the post changes, not the size of the original file.

In the “Advanced Image Settings” you can  see the source of the photo (which is just its URL), and the size of the photo. CSS stands for Cascading Style Sheets, which are directions a programmer or user can give to tell the computer how to display the information. CSS rules for fonts, for example, might include the name like Times New  Roman, the font size like 12. This comes in handy if you have a website and you want to keep all your headings the same size, and style. You could create a CSS rule for “main heading” and define the details. Then use that “main heading” rule whenever you wanted to put in a heading. For most people’s purposes it’s not necessary to understand, but if you have pages and pages on a website, it helps to keep things uniform.

In this case the CSS class just tells me what I’ve already defined. The size is “full” (as opposed to “medium” or “thumbnail”). I’m not sure about the WP-image-3113, but think that is a WordPress standard. Do you know? And finally, the “aligncenter” I chose from my alignment options.

You’ll notice that under “styles” in the image way up there, I have a solid black border that is 3 pixels thick. I put the border around my photo by using this advanced editing window. In “Image Properties” border box, I simply typed a “3” which told the computer to put a 3 pixel wide border around my photo. I didn’t have any choice about the color. (For the image to your left, I used a 1px border).

The “Image property” I like the best is the “horizontal space.” This allows me to insert a small space between the image and the text if I have left- or right-aligned the image.  I just type a number,  and that’s the amount of pixels that will separate the image from the text.

The first image of the Eiffel Tower does not have any horizontal space (although it appears WordPress has automatically added some for me, which is nice, I suppose). I added 30px horizontal space to the second one, then went back and edited the CSS to delete the “margin left” leaving the 30px margin on the right. I also added vertical space. I had to fool around with this for a while to get something I liked when I previewed it on the web. What I see on my “add new post” window does not look exactly like what I see when I actually post it. I usually preview my posts so I know what I’m getting, at least on my computer.

All of this might look completely goofed up on your computer. If it does, could you take a screen shot and send it to me?

I hope you’ll share with me the tips you know about how to use photos on the blogs.

Eiffel Tower at night in Paris, France — 2004

23 thoughts on “Putting pictures on posts in WordPress”

    1. Thanks, SuziCate.
      We had just returned from a sunset boat ride on the Seine. We left from the foot of the Eiffel Tower in the daylight and got back with the tower lit in the dark. I took this shot standing near the base of the tower. I have to admit, it was stunning to be there.

  1. Wow, thank you so much, Christine. I’ve been so frustrated with the photo part of my blog. I couldn’t figure out how to add a border. Now I know!! And the info about spacing the text away from the sides of the photo…well, that is just so nice of you to share. 🙂
    I’m going to share this post with a friend who has a WordPress blog. Many thanks!

    1. That’s good to know about the large. I think to control thumbnails, if you can’t control them vertically by wrapping text around them, you may have to make a table in HTML and try that. I don’t know if that is possible with WordPress, but I’ve done that before with Word docs and online websites.

      I’m going to share some tips about HTML soon. Maybe I’ll see if I can get a table to work.

  2. I love the Eiffel Tower photos! Most of this is for WordPress so I’ll file it away if/when I make the jump. Your instructions make it look super do-able! (Wish I could figure out how to add a border in Blogger, wish I could drop by for coffee and we could figure it out!)

    1. I wish you could too. I briefly considered getting a blog on Blogger just so I could figure some things out to help others, since I was blogging about it anyway. But I decided, nah.

      I’ve got enough to do right now. Would love to help you.

  3. Thanks for the info, Christine. I used to struggle with getting photos where I wanted them, but found a system that works for me. I put all the text in first, then add the pictures. I didn’t think to add the photos to my Desktop, but made an image folder/blog that I sort them into as I download them from my card reader.

  4. I do what patti does ~ text first, then photos. Then I preview the post and adjust the size of the image to make the text fit better around it.

    Thanks, Christine.

  5. Great post! I’ve learned most of this by trial and error. It would have been nice to have this as a guide when I started blogging.

    Did you want me to describe how to do a slide show or were you planning on doing that in a future post?


    1. Go ahead, and be my guest. I’ve never done a slide show here on WordPress, although I have on websites using Dreamweaver. You’ll save me the trouble of figuring it out. Thanks. 🙂

  6. Found your blog in a search for help. I am frustrated that I can’t freely place my photos where I want them in wordpress. I am so used to being able to choose the positions – in Powerpoint or a word doc – that the limits of left, center, right are driving me crazy. Sometimes it places them in an awkward way that is not visually pleasing.

    1. Yes, it’s not nearly as flexible as the other programs you mention, although truthfully, I often struggle with putting pictures in word docs.

      One tip that may or may not help: If I am placing a picture on the page by itself and don’t want it to be surrounded by text, I don’t use the align options of left, center, and right. I use “none.” And then if I want the picture to be centered, I select the photo on the page, and use the center text button to move it to the middle.

      The other thing I sometimes do is use tables. This gives you some flexibility with the placement of pictures and text, but is a little more complicated as you have to use HTML. It’s certainly doable. I’ve been thinking about posting how to do that.

      Good luck.


Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s