Multiple Post Thumbnail Plugin with fancybox

CMS & WordPress
1

I’m having some trouble trying to implement this plugin(Multiple post thumbnail) with fancybox jquery plugin. Basically the idea is when the user click the featured image post it will display the image on the secondary featured image. Here is the code that i’m working on

Right now the “href” is blank at the moment and have tried different approach but all ended up in failure.

<a class="fancybox" href=""><?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<img src="' . $large_image_url[0] .

This is what it looks like when i place this code inside the href


<?php MultiPostThumbnails::get_the_post_thumbnail(get_post_type(), 'secondary-image'); ?>

1024×837 64.6 KB

But the image that should be display is this

2

You can try getting the post id here and see.

Instead of this

$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');

Try adding the postid to it and see so the code would be

$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');

Hopefully it should work.

3

I have tried adding your code but it seems the result i’m trying to achieve is still not working. Here is the updated code

			    <?php query_posts('posts_per_page=-1&cat=10'); if(have_posts()) : while(have_posts()) :the_post(); ?>
		        <div class="collections_thumbnails">
				  
				  <a class="fancybox" href="<?php MultiPostThumbnails::get_the_post_thumbnail(get_post_type, 'secondary-image'); ?>"><?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large'); echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '">';  } ?></a>
				  <div class="hover_dress">
					<h3><a class="dress_title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
				  </div>
				  
		        </div>
			    <?php endwhile; endif; wp_reset_query();?>

Here is the for the website i’m building at the moment http://digitalspin.ph/pluma/?page_id=8

4

Ok so this is for one image. I think you need to do for all images that you have right? I dont think all image names would be secondary-image. Not really worked on multipostthumbnails but I think for each image they might be giving a different name. So first would be large then secondary-image then the other names you might have given.

5

I’m sorry but i can’t seem to follow your instructions since i’m a bit new to PHP and Wordpress.

6

How have you created other images using multipostthumbnails? Can you provide the functions.php code?

7 
//MULTIPLE POST THUMBNAILS PLUGIN
 if (class_exists('MultiPostThumbnails')) {
        new MultiPostThumbnails(
            array(
                'label' => 'Secondary Image',
                'id' => 'secondary-image',
                'post_type' => 'post'
            )
        );
    }
8

Ok so as per documentation to display the secondary image in your post you need to use this code

<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>

Inserting this code displays the secondary-image.

Now say if you have 4 different images say third-image and fourth-image then for each you will need to update the code accordingly.

Never used multipointthumbnails but based on the code I think the above solution should work.

9

I managed to get it working

Here is the updated code

<div class="collections_dresses_container">
		         
			    <?php query_posts('posts_per_page=-1&cat=10'); if(have_posts()) : while(have_posts()) :the_post(); ?>
		        <div class="collections_thumbnails">
				  
<?php 
        $imgID = get_post_thumbnail_id();
        $url = MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');
?>
			  
				  
				  <?php if ( has_post_thumbnail()) { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); echo '<a class="fancybox" href="' . $large_image_url[0] . '"><img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '"></a>';  } ?>

				  <div class="hover_dress">
					<a class="fancybox" href="<?php echo $url; ?>"><span><?php the_title(); ?></span></a>
				  </div>
				  <?php /*
				  <div class="hover_dress">
					<h3><a class="dress_title" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
				  </div>
				  */ ?>
				  
		        </div>
			    <?php endwhile; endif; wp_reset_query();?>
			  
		   </div>
10

Good to know that it works fine. One suggestion would be to have all four thumbnails show up instead of just 1 image. Right now it looks like the same image shows up 4 times which is not the case.

11

I’m just doing some testing at the moment. Basically i just uploaded all four post with the same image