How to handle multiple feature images per post

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:

  1. Download the files for the Multiple Post Thumbnails Plugin to your computer
  2. 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
  3. 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>
    
  4. 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.

Tags:

No comments yet.

Leave a Reply