Contents
There is a great plugin for this:
http://wordpress.org/extend/plugins/multiple-post-thumbnails/
These are the bits of code needed to use the plugin.
I add this code to the functions file. It sets up new feature images and assigns custom sizes for them if necessary:
//Add Custom Feature Images if the Multiple Feature Image plugin or code has be activated or embedded/ if (class_exists('MultiPostThumbnails')) { // Add custom images for the members post type new MultiPostThumbnails( array( 'label' => 'Museum Logo', 'id' => 'museum-logo', 'post_type' => 'members', ) ); new MultiPostThumbnails( array( 'label' => 'Museum Photo', 'id' => 'museum-photo', 'post_type' => 'members', ) ); // Add custom image for the staff post type new MultiPostThumbnails( array( 'label' => 'Staff Member Photo', 'id' => 'staff-photo', 'post_type' => 'staff', ) ); add_image_size('members-museum-logo-sm', 210, 135, true); // Used for the homepage bx slider add_image_size('members-museum-photo-feature', 600, 200, true); add_image_size('staff-staff-photo-medium', 200, 200, true); }
Then I use this code in my template files to display the new selection of feature images for each post:
if (class_exists('MultiPostThumbnails') && MultiPostThumbnails::has_post_thumbnail('members', 'museum-logo')) : echo '<div id="post-featured-image">'; //MultiPostThumbnails::the_post_thumbnail('members', 'secondary-image'); MultiPostThumbnails::the_post_thumbnail('members', 'museum-logo', NULL, 'museum-museum-logo-three-col-content'); echo '<div class="post-image-shadow"></div>'; echo '</div><!-- /single-image -->'; else : endif;
If the post image is required outside of the loop I have used two different methods.
Option one if a simple standard loop will work:
if (class_exists('MultiPostThumbnails') && MultiPostThumbnails::has_post_thumbnail('members', 'museum-logo')) : echo '<div id="post-featured-image">'; //MultiPostThumbnails::the_post_thumbnail('members', 'secondary-image'); MultiPostThumbnails::the_post_thumbnail('members', 'museum-logo', NULL, 'museum-museum-logo-three-col-content'); echo '<div class="post-image-shadow"></div>'; echo '</div><!-- /single-image -->'; else : endif;
Option two if you need to get the post id inorder to make a query and get the image:
global $wp_query; $postid = $wp_query->post->ID; $membersSlideshowQueryArgs = array( 'post_type' => 'members', 'p' => $postid, //'meta_key' => '_thumbnail_id', //'order_by' => title, //'order' => ASC, ); $membersSlideshowQuery = new WP_Query(); //$membersSlideshowQuery->query( $membersSlideshowQueryArgs ); $membersSlideshowQuery = new WP_Query( $membersSlideshowQueryArgs ); if ($membersSlideshowQuery->have_posts()) : $count = 0; $membersSlideshowImageSize = 'members-museum-photo-feature'; $imgwidth = 600; // thumbnail's width $imgheight = 200; // thumbnail's height while ($membersSlideshowQuery->have_posts()) : $membersSlideshowQuery->the_post(); $count++; $currentSlideTitle = get_the_title(); if (class_exists('MultiPostThumbnails') && MultiPostThumbnails::has_post_thumbnail('members', 'museum-photo')) : MultiPostThumbnails::the_post_thumbnail('members', 'museum-photo', NULL, 'members-museum-photo-feature', array('class'=>'','title'=>$currentSlideTitle,'alt'=>'')); else : // this is the else statement for the MULTIPOSTTHUMBNAILS class existing or not endif; // END MULTIPOSTTHUMBNAILS class existing or not $currentSlideTitle = NULL; endwhile; //echo "This query returned: $count posts."; endif; wp_reset_query();
Wait there’s more!
This post tells you how to integrate the plugin in to your theme so you don’t have to depend on a plugin being avtivated:
http://www.lifeonlars.com/wordpress/how-to-add-multiple-featured-images-in-wordpress
These are the important steps:
- Download the files for the Multiple Post Thumbnails Plugin to your computer
- Unzip the files and copy them to a sub-directory in your theme file. There are only two files you will needmulti-post-thumbnails.php and multi-post-thumbnails-admin.js. In my case i’ve placed the PHP file in alibrary sub-directory in my theme and the JavaScript file in a sub-directory called js inside library.
> theme-name > library - multi-post-thumbnails.php > js - multi-post-thumbnails-admin.js
- Once that’s done you need to make a small tweak to the multi-post-thumbnails.php file.
From this (line 143)</pre> <div><code>public</code> <code>function</code> <code>enqueue_admin_scripts() {</code></div> <div><code> </code><code>wp_enqueue_script(</code><code>"featured-image-custom"</code><code>, plugins_url(</code><code>basename</code><code>(dirname(</code><code>__FILE__</code><code>)) . </code><code>'/js/multi-post-thumbnails-admin.js'</code><code>), </code><code>array</code><code>(</code><code>'jquery'</code><code>));</code></div> <div><code>}</code></div> <pre>
to this:)
</pre> <div><code>public</code> <code>function</code> <code>enqueue_admin_scripts() {</code></div> <div><code> </code><code>$template_url</code> <code>= get_bloginfo(</code><code>'template_url'</code><code>) . </code><code>'/js/multi-post-thumbnails-admin.js'</code><code>;</code></div> <div><code> </code><code>wp_enqueue_script(</code><code>"featured-image-custom"</code><code>, </code><code>$template_url</code><code>, </code><code>array</code><code>(</code><code>'jquery'</code><code>));</code></div> <div><code>}</code></div> <pre>
- Then go back to your functions.php file and add the following.It’s usually a good idea to keep these inclusions at the beginning of your functions.php file so they are included before you try to use any of the functions they add.
<pre>// Load external file to add support for MultiPostThumbnails. Allows you to set more than one "feature image" per post. //require_once('library/multi-post-thumbnails.php'); include('js/multi-post-thumbnails.php');</pre>
Check the link for how Lars was using the plugin in his loops.
Thank you – That’s all!
Revisions
There are no revisions for this post.
No comments yet.