Images
This tutorial is for adding images to your posts for the Visionary WordPress theme.
I prefer to use the custom field options for inputting images, but since version 1.2 of Visionary, this is not required.
Included with the theme is a highly intuitive script that checks for custom field values and images attached to posts, which makes images much easier to use.
The list below will guide you in the various sections on how images are used:
- How the image script works
- Using custom fields for images
- Letting the image script choose an image for you
- Setting a default image (advanced)
- Using other custom field Keys than the defaults (advanced)
How this script works
Look at almost any template file. You’ll see one of these two lines or something similar:
<?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 like this:
array('Thumbnail')Tells the script to check for a custom field Key named Thumbnail (Please note that keys are case sensitive meaning that Thumbnail and thumbnail are different).
The next part you see is:
'thumbnail'This tells the script what the default image size should be. There are three possible sizes: thumbnail, medium, and full.
The script checks to see if you have any custom fields Values set for the particular Key (Thumbnail) you’re using. If none are found, 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.
Please note that “attached” means an image that you uploaded to that particular post in the Write Post screen with the WordPress media uploader. It does not mean an image that you’ve added to your post.
Using custom fields for images
I’m not going to give an entire tutorial on using custom fields here. You can read out my personal introduction to custom fields or the WordPress Codex’s article on using custom fields. They’re easy to use once you get the hang of it.
I’ll assume at this point that you know how to use custom fields.
There are two custom field Keys used with this theme, Thumbnail and Feature Image.
Let’s suppose 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.
You have to type Thumbnail in the Key input area (make sure to capitalize the “T” as keys are case sensitive). 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.jpg.
Click “Add Custom Field.” That’s it. You’d do the exact same thing for a feature image using the Feature Image Key.
Letting the script choose an image for you
You might not want to go through the hassle of using custom fields for both thumbnails and feature images on each post. That’s okay because the script can handle this for you if you just upload an image. This must be an image uploaded with the WordPress media uploader for that particular post or it won’t work.
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
Ask me about this in the support forums before making any modifications.
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. It’s hidden away a bit as most users won’t need or use this option.
Let’s take another look at the image function.
<?php echo get_the_image_link(array('Thumbnail'), 'thumbnail'); ?>Now, we need to add a third field with a URL to an image uploaded somewhere on the site.
<?php echo get_the_image_link(array('Thumbnail'), 'thumbnail','http://your-site.com/wp-content/image.jpg'); ?>This tells the theme 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 need a more robust solution, 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, 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.
