Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress From Bootstrap to WordPress Create Bootstrap Styled Theme Templates Creating a Portfolio Landing Page

Portfolio thumbnails are not resizing properly and are showing at full (1280 x 1280) size

This is the code I used:

      <div class="row">

        <?php 

          $args = array(
            'post_type' => 'portfolio'
            );
          $the_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

        <div class="col-sm-3 portfolio-piece">

          <?php

            $thumbnail_id = get_post_thumbnail_id();
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail-size', true );
           ?>

          <p><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title(); ?> graphic"></p>
          <h3><?php the_title(); ?></h3>

        </div>

        <?php endwhile; endif; ?>

      </div>

Tried out different size parameters for the thumbnails, only 'medium' works for me:

<?php
            $thumbnail_id = get_post_thumbnail_id();
            $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'medium', true );
           ?>

I tried 'thumbnail-size', 'thumb', 'small, and 'large', they didn't seem to change and remained at full image size.

Even after I updated my Image Sizes in Media Settings for the Medium image size to 260 x 260 pixels, the portfolio thumbnails remained at 300 x 300 pixels but 'medium' was the only parameter that could resize the thumbnail. :(

Edit: I managed to resize the thumbnails with the parameters 'thumbnail', 'medium' and also 'large' actually works, just that the image was too big to notice, but the dimensions did change in Inspect Element.

So I have a "temporary" fix but I am still not sure why I could not follow Zac's code exactly to make it work.

Hi I was having the same problem. I changed the size to medium then added an extra class="thumbnail" for the image. that seemed to help me. Hope it works for you.

<div class="col-xs-3" portfolio-piece>

      <?php 
        $thumbnail_id = get_post_thumbnail_id(); 
        $thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'medium', true);
      ?>

      <p><a href="<?php the_permalink(); ?>" class="thumbnail"><img src="<?php echo $thumbnail_url[0]; ?>" alt="<?php the_title();?> graphic"></a></p>
          <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>

         </div>

I had the same problem but apparently I just forgot to save my style.css file with the following in it:

.portfolio-piece img { max-width: 100%; }

I had the same problem but apparently I just forgot to save my style.css file with the following in it:

.portfolio-piece img { max-width: 100%; }

Ryan Hunt
Ryan Hunt
16,091 Points

The thing that should do the trick is changing 'thumbnail-size' to just 'thumbnail' in the $thumbnail_url variable:

 <?php
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail', true );
?>

The size parameter for wp_get_attachment_image_src only accepts thumbnail, medium, large, or full or an array of the pixel dimensions.