• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Future Expats

Create an Untethered Life Overseas

  • Home
  • Start Here
  • About
    • Big Fat Disclaimer
    • Privacy Policy
  • Portable Careers
    • Blogging
      • Blogging for Expats WordPress Tutorials
    • Life Coaching
    • Photography
    • Teaching
    • Websites
    • Writing
  • Prepping the Move
    • Countdown
    • Narrowing Your Country/City Search
      • Africa
      • Asia
      • Australia/New Zealand
      • Central America
      • Europe
      • North America
      • Region
      • South America
    • Visas and Residency
    • Quality of Life
    • Learning the Language
    • Health Care
    • Technology
  • Panama
  • Blog
  • Resources
    • Hire Me!
    • Expat Resources: Prepping the Move
    • Expat Resources: Portable Careers
    • Expat Resources: Technology
    • Book and Movie Reviews
You are here: Home / Portable Careers / Blogging / Dress Up Your Blog with Pictures

Dress Up Your Blog with Pictures

October 21, 2011 by FutureExpat

Dress Up Your Blog with Pictures

WordPress logoIn our last installment of Blogging for Expats, we learned how to add content to a WordPress blog. Today we’ll go ahead and add some eye candy.

Keep in mind that some WordPress themes require you to handle images a little differently, but this will work with the majority.

It’s very common to see two sizes of the same image in a blog post. When you view the post on a page by itself, you’ll see a large version, and when you see a page with a list of posts and brief excerpts, you’ll see a small image, or thumbnail.

Here’s an example of a page with thumbnail images.

thumbnails

WordPress calls the larger image and its thumbnail the Featured Image. WordPress handles the resizing for you, so you can use the same image for both.

You can add other images as well, but you’ll only have one Featured Image per post. In this post, it’s the big “W” WordPress logo.

Adding the Featured Image

Let’s walk through the steps to put a Featured Image in your post.

Choose an Image, and edit if necessary

Most of the pictures you see on websites are either jpg or png images. Generally they’ll give you the best quality while using the fewest resources. So if your image is a different format, convert it to either png or jpg.

While WordPress can resize the Featured Image to make two different sizes, before you upload that image you should make sure it’s only as large as the largest version you want to display.

The reason is that images use up a lot of bandwidth. If you want an image that’s 4″ wide and you upload a 10″image, your server actually processes the 10″ size even though it’s being displayed smaller. So if your pictures are too big, your pages will load very slowly and will discourage your readers and site visitors from hanging around.

I’m not going to get into image editing here — it’s way outside the scope of what we’re covering. If you go to this link, you’ll see a list of resources for that.

Upload the Featured Image

So, you’ve got your image, you’ve sized it properly, now let’s add it to the beginning of your blog post.

Open your WordPress dashboard, and go to the post you want to add the image to.

Position your cursor at the beginning of the post, and click the “Add an Image” button just above your editing window. It looks like this.

upload insert button

You’ll see a new window with four tabs at the top. You can add an image from your computer, from a URL, from the Gallery or from the Media Library.

add image screen

We’ll add a file from your computer, so select that tab then click the “Select Files” button. Navigate to the image file you want and select it.

After a few seconds, you’ll see a screen that looks like this. add an image interface Notice the title has already been filled in for you. Under the title are fields labeled Alternate Text, Caption, Description, Link URL, Alignment and Size.

Alternate Text

This is the word or brief phrase you see when you hover your mouse over the image. It’s important — Google uses it for search.

Caption

Self explanatory — if you want a caption for your picture, enter it here.

Description

This is also important for search. In the example shown here, I used the same phrase as I used in the Alternate Text, but normally you’d have more information in the description.

Link URL

If you want to link the image to another website, or a different page on your site, enter that URL here. Otherwise, your reader will just see a version of the image on its own page when they click on it. Or you can leave it blank and select “None” below, to have no link at all.

Alignment

Here’s where you choose whether you want your image on the left, center or right. Since we’re uploading a Featured Image, choose Left

Size

You have your choice of four sizes here, but since we’re inserting a Featured Image, we’ll stick with Full Size.

Use as Featured Image

Once you’ve finished all your selections, click the link that says Use as Featured Image. This tells WordPress you want to use this image in the post, and also as the thumbnail image that’s displayed along with the post excerpt.

Here’s where the difference in themes comes into play. With some (like Woo Themes), that’s all you have to do. With most others, like this Genesis Prose theme I’m using, you also must click the Insert into Post button. It’s important to select Use as Featured Image before you choose to Insert into Post.

Add a Little White Space

You’re almost done. Now you just need to give your image a little breathing room so it doesn’t butt right up against your text.

In your editing window, click on your image. It’ll turn blue and you’ll see two little icons on it — one’s a big “X” for delete, and the other will let you edit the image. Click to edit.

You’ll see two tabs at the top of the popup window, Edit Image and Advanced Settings. Select the Advanced Settings.

Scroll down until you get to Image Properties. You can add a border (I usually don’t), and add some space around the image. In the little boxes, fill in the number of pixels you want — I usually use 10. You can experiment to see what looks good to you, on your blog. Just type in the number for the vertical space and the horizontal space. They can be the same or different.

Click Update to save your changes, and you’re done.

This is Part 10 of Blogging for Expats, the tutorial series to help you with the basics of starting a WordPress blog to help support your overseas. You can find the previous tutorials here.

Do you have questions about adding images to your posts in WordPress? Feel free to leave a comment. . .

Filed Under: Blogging, Blogging for Expats WordPress Tutorials, Portable Careers Tagged With: blog, blogging, Blogging for Expats, expat, portable career, training, wordpress

Primary Sidebar

Visit Panama

Panama Relocation Tours

VPN Services

Best VPN for TravelersBest VPN for Travelers

Sale on .COM Domains!

KINGCOM domain salepixel

More Posts

Earn a Living In Your New Country as an Artisan

Post-It When?

rainbow over Panama City, Panama

10 Things I (Already) Miss About Las Tablas and Panama

Please Take a Minute to Answer Three Questions [survey]

WordPress logo

How to Know What Premium WordPress Theme is Right for your Site

One of our three Papillons

Transporting the Dogs: Bringing our Pets to Panama

Top Expat Blogs – How Cool is That?

Here's a new award. . . We've just been named to the Top Expat Blogs list at Ranked Blogs! If you like us, click the link and vote us up! we're one of the top expat blogs at Ranked Blogs! Future Expats was recently awarded a spot in the Top 100 Expat Blogs.

Follow Me

  • Twitter

Copyright © 2023 Future Expats Forum
Proudly running on a Genesis Theme by StudioPress