Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by chooiyenlim
chooiyenlim
10,219 Points

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>
chooiyenlim
chooiyenlim
10,219 Points

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.

Ryan Abegglen
Ryan Abegglen
926 Points

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>
Roger Rainer S. Braun
Roger Rainer S. Braun
23,616 Points

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%; }

Roger Rainer S. Braun
Roger Rainer S. Braun
23,616 Points

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
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.