Link to larger thumbnail in custom query (with custom post-types)

Question

I'm using a custom query with custom post-types to display a blog-archive for my brothers photography-website. I integrated this code to link to the larger version of the thumbnail. Sadly it doesn't work. Is it because its a custom query?

<?php /*
Template Name: Archiv
*/ ?>
<?php get_header(); ?>

    <section id="content">
        <div id="archive">
            <?php $args = array( 
                'post_type' => array('blog'), 
                'numberposts' => -1, 
                'post_status' => null, 
                'post_parent' => null,
                ); 
                $posts = get_posts($args);  ?>

            <?php if ($posts) { 
                foreach ($posts as $post) { 
                    setup_postdata($post); 
                    $month =  mysql2date('F Y', $post->post_date); 
                    if ($month != $check) {                 } 
                $check = $month; ?>




                    <div class="einzelbild einzelbild-<?php the_ID(); ?>">
                    <a href="<?php $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "medium" ); ?>"><?php the_post_thumbnail('medium'); ?></a>
                    <a href="<?php $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "medium" ); ?>" class="linkbox-<?php the_ID(); ?> linkbox" style="display:none;"><span class="datum"><?php the_date('M jS'); ?></span><br /><h1 class="post-title"><?php the_title(); ?></h1>
                    </a>
                    </div>

                    <script type="text/javascript">
                        $(document).ready(function() {
                            var hide = false;
                            $(".einzelbild-<?php the_ID(); ?>").hover(function(){
                                if (hide) clearTimeout(hide);
                                $(".linkbox-<?php the_ID(); ?>").fadeIn();
                            }, function() {
                                hide = setTimeout(function() {$(".linkbox-<?php the_ID(); ?>").fadeOut(500);}, 100);
                            });
                            $(".linkbox-<?php the_ID(); ?>").hover(function(){
                                if (hide) clearTimeout(hide);
                            }, function() {
                                hide = setTimeout(function() {$(".linkbox-<?php the_ID(); ?>").fadeOut(500);}, 100);
                            });
                        });
                    </script> 

            <?php } 
            } 
            ?>  
        </div>
</section> 
<script>
 $(function(){

    var $container = $('#archive');

    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.einzelbild',
        columnWidth: 10,
        isAnimated: true,
          animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
          }
      });
    });

  });</script>


<?php include 'sidebar-blog.php'; ?>
<?php get_footer(); ?>

Answer 1

In your code you are linking to an image using this code:

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "medium" );

So what you are doing is showing the medium sized image as well as linking to the medium image.

What you need to do is link to the full sized image:

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full" );

Also wp_get_attachment_image_src returns the following:

array
(
[0] => url
[1] => width
[2] => height
)

So this:

<a href="<?php $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "medium" ); ?>"><?php the_post_thumbnail('medium'); ?></a>

needs to become:

<?php
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full" );
?>
<a href="<?php echo $thumbnail_src[0]; ?>"><?php the_post_thumbnail('medium'); ?></a>