This User Guide explains how to use the Genesis Taxonomy Images plugin. There are usage instructions and examples of the code you’ll need to display a term image for your users.
After installing the plugin, you will have the new ability to assign a featured image to each term in all taxonomies (tags, categories, custom taxonomies). The assigned image is shown in the term list and can be modified on the term edit screen.
To display the image for your users, you’ll have to add some code. You’ll find examples of this later in this guide.
Assigning Images to a Term
Adding a new image to a term
Step 1. In the Dashboard, navigate to the Categories edit screen (Posts ➜ Categories).
I’m using Categories for the instructions, but these steps apply to all taxonomies in your site.
Step 2. In the term list, you’ll see a new column called “Image” in the table of terms.
Step 3. Edit a category (by rolling over the category name and selecting Edit). This will open the Edit Category page, where you’ll see a new section called “Term Image,” together with some control buttons.
Step 4. Click the Set Term Image button to launch the familiar Media Upload panel, and either select an existing image in your Media Library or upload a new one in the usual way. Once you have selected an image, click thebutton in the Media panel to return to the Edit Category screen. You’ll now see your chosen image displayed in the Edit Category screen:
Step 5. Very important: the term image has been added to the term screen, but not yet saved. Click thebutton at the bottom of the Edit Category screen in order to save the image for later use. This will take you back to the term listing page.
Step 6. Once you have clicked the Edit screenbutton, you will be taken back to the main Categories edit screen where you will see a thumbnail of your image in the “Image” column:
Remove or Change an Existing Term Image
To remove an image, navigate to the Edit screen for the term in question and use thebutton to…you guessed it, remove the existing image. Then click Save at the bottom of the term’s edit screen.
To change an image, navigate to the Edit screen for the term in question and use thebutton to launch the Media Uploader panel to select or upload a new image. From here, the steps are the same as adding anew image; see steps 3, 4 and 5 above.
Displaying a Term Image for your Users
Now that the images are assigned, making them visible to your users will require a bit of code.
What is stored
Every image in WordPress’s Media Library has an ID used to identify it. When you click Save after assigning an image to a term, this ID is stored as term meta, a standard part of WordPress.
Getting the Image: Standard WordPress tools
As mentioned, the assigned image ID is stored as term meta. This means you can access the image ID using the standard WordPress term meta tools, like get_term_meta().
Remember that the image ID is stored, which is great: having the image ID means you can then do anything you can normally do with an image in WordPress. However it also means that you have to write the code to do something with it: get the image URL, add the img tag, whatever.
There is an easier way.
Getting the Image: plugin tools
This plugin provides an easy way to not only get the image ID, but optionally the image URL and the a fully rendered img tag complete with scrset attributes for responsive images.
It’s does all this using a helper function called
gtaxi_get_taxonomy_image(), the details of which you can find here. There are also filters provided to allow you to modify what is returned at various points along the way. These filters are listed here.