Images

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 have an image attached to that post. By “attached,” I mean that you need to have uploaded an image to that post from the Write Post screen. Otherwise, it’s not attached.

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. Update: As of WordPress 2.6, you can change the order of the images from the media uploader.

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

Talk to me in the support forums before attempting this.

One of the things you probably 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'); ?gt;

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

Talk to me in the support forums before attempting this.

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.

Styling

I’ve tried to leave the image styling pretty basic with class names in the stylesheet, except for the use of thumbnails. Let’s take a look at the script again:

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

Basically, this tells the script to give the CSS class of “thumbnail” to that image.

Why? Well, it automatically gives the class of the first custom field name (lowercase) and the default size to the image. However, since they’ll both be “thumbnail,” it’ll only have one class. The output would be something like this:

<img src="example.jpg" alt="Example text" class="thumbnail" />

The CSS for this would be either of these two lines:

.thumbnail { }
img.thumbnail { }

What if you had multiple custom fields and a different default size? Let’s look at a different version of the script:

<?php echo get_the_image_link(array('Super Mario','Donkey Kong'), 'medium'); ?>

Now, your XHTML output would be:

<img src="example.jpg" alt="Example text" class="super-mario medium" />

Notice, it only takes the class name of the first custom field. It strips the spaces and turns them into hyphens. It also automatically changes the uppercase letters to lowercase.

Your CSS for this would be these options:

.super-mario { }
img.super-mario { }
.medium { }
img.medium { }

Features Gallery Images

The Features Gallery works in much the same way, except there are a couple of things you shouldn’t change. Here’s what the image script look like in /includes/features-gallery.php:

<?php echo get_the_image(array('Feature Image','Full','Feature Full'), 'full'); ?>

By default, you can use the custom field Keys “Feature Image,” “Full,” or “Feature Full.”

I wanted to point out the Features Gallery images because they’re probably oddly shaped compared to other images. I suggest cropping this before uploading to a nice, neat 590px x 240px (most stylesheets will use this size but could vary).

The call get_the_image should never be changed to get_the_image_link like in some other files. Also, the “full” in the end should always stay the same.