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.