Using images with the Structure theme

These are the instructions for including thumbnail and feature images with your posts.

My suggestion is to use the custom field options for inputting images, but as of version 1.2, you don’t have to do this (at least not for every post).

I created a highly intuitive script that checks for custom field values and images attached to posts, which makes images much easier to use.

Follow this list of items to see the various sections on adding images.

1. How the image script works
2. Using custom fields for images
3. Letting the image script choose an image for you
4. Setting a default image
5. Using other custom field Keys than the defaults

How this script works

Take a look into almost any template file, and you’ll see one of these two lines:

<?php echo get_the_image(array('Thumbnail'), 'thumbnail'); ?>

<?php echo get_the_image_link(array('Thumbnail'), 'thumbnail'); ?>

The first line displays an image, and the second displays an image that is hyperlinked to the article it represents.

The part you see like this:

array('Thumbnail')

Tells the script to check for a custom field Key named “Thumbnail” (Keys are case sensitive).

The next part you see is:

'thumbnail'

This tells the script what the default size should be. There are three possible sizes: thumbnail, medium, and full.

So, the script checks to see if you have any custom fields Values set for the particular Key (Thumbnail) you’re using. If not, it looks for the first image attached to your post. If an image exists, the thumbnail size is used, which is created by WordPress when you upload any image.

Using custom fields for images

I won’t bother going into the details of using custom fields at this point. You can check out my personal introduction to custom fields or the WordPress Codex’s article on using custom fields. They’re pretty easy to use once you get the hang of it.

So, I’ll assume at this point that you know how to use custom fields.

There are two default custom field Keys used with this theme, “Thumbnail” and “Feature Image.” Let’s say you want to add a thumbnail image to your post.

In your Write Post screen in the WordPress dashboard, scroll down until you see the box for Custom Fields. There’ll be a drop-down select area and a blank input area for the Key. Beside that, there’ll be a text area for the  Value.

What you need to do is type in the word “Thumbnail” (make sure to capitalize the “T” as keys are case sensitive) in the Key input area. After you’ve done this once, “Thumbnail” should be available in the drop-down list for future posts.

Now, type in the URL of the image you want to use. For example, you could type in  http://your-site.com/wp-content/example.gif.

Click “Add Custom Field.” That’s it. You’d do the same thing for a feature image.

Letting the script choose an image for you

So, maybe you don’t want to go through the hassle of using custom fields for every post. That’s okay because the script can handle this for you if you just upload an image.

The only problem you might have here is if you upload multiple images. The script will automatically choose the first image. So, if you want to let the script choose the image for you, the first image you upload needs to be what you want for your thumbnail or feature image.

So, just upload an image, let WordPress create your thumbnail, medium, and full sizes (done automatically), and let the theme take care of the rest.

Setting a default image

One of the things you problably didn’t notice is a place to add a default image if there are no custom fields or images attached to your post. Well, it’s a bit hidden away as most users won’t use this option.

Let’s take another look at the image script.

<?php echo get_the_image_link(array('Thumbnail'), 'thumbnail'); ?>

Now, we need to add a third field with a URL to a preexisting image.

<?php echo get_the_image_link(array('Thumbnail'), 'thumbnail','http://your-site.com/wp-content/image.gif'); ?>

Basically, this tells the script that if it can’t find any images, then just use the default image you’ve set. You can do this for each template file available. There are even more complex ways of doing it, like setting a default image for each category.

If you want to get more complicated with it, then just ask me in the forums. I’ll be happy to help out with it.

Using other custom field Keys

One of the great things about the image script included with this theme is that you’re not limited to just using the default custom fields defined.

For example, you may want to use the “thumbnail” Key instead of “Thumbnail.” Maybe you’ve used another theme with a different custom field naming system for a while, and you don’t want to go back through and rename those Keys. Or, quite possibly, you might forget to capitalize the first letter in “Thumbnail.”

Well, there’s a solution for those problems too. Let’s take a look at that one line of code again.

<?php echo get_the_image_link(array('Thumbnail'), 'thumbnail'); ?>

There’s a PHP array used there, so you could use as many custom field Keys as you want.

Let’s say your last theme just had a custom field name of “image.” Well, add that to the array like this:

<?php echo get_the_image_link(array('Thumbnail','image'), 'thumbnail'); ?>

Now, it’ll check for both instances.

What if you think you might forget to capitalize Thumbnail. Just change it to this:

<?php echo get_the_image_link(array('Thumbnail','thumbnail'), 'thumbnail'); ?>

You can add as many custom field Keys as you want to check for.