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

Will Hawks
Will Hawks
3,222 Points
Posted by Will Hawks
Will Hawks
3,222 Points

Wouldn't using bootstrap's image classes save a lot of trouble here?

the_post_thumbnail takes a second parameter for attributes. If you add bootstrap's 'img-responsive' class, and use column classes correctly it solved all the problems for me. Here's what my code ended up looking like: 

<div class="col-xs-6 col-sm-4 col-lg-3 portfolio-piece">
    <p><?php the_post_thumbnail( 'medium', ['class' => 'img-responsive'] ); ?></p>
    <h3><?php the_title(); ?></h3>
</div>

1 Answer

Robert Gouveia
PLUS
Robert Gouveia
Courses Plus Student 1,714 Points
Robert Gouveia
Robert Gouveia
Courses Plus Student 1,714 Points

Hi I am assuming that you are talking about the image size when it comes to the image being responsive.

Yes a shortcut and bad practice is putting a large image or a small image and just making it stretch or shrink using css.

But what happens if your portfolio has 100 images and all the big images that you are using to shrink down are loaded.

Say if each image was a small 100k each image.

That would be 10mb a user has to download before they can view this page, and people on low broadband would not see it for at least 10-15 seconds.

Now lets take a medium to large image which has not been optimised for the web, if it is 200k-800k then you are talking of the web page taking 30 -90 seconds to load the page in the true state it is meant to be.

The thing with the the_post_thumbnail() function is wordpress cuts the image to the desired needs as long as you have set it up correctly in the functions.php.

It automatically optimises the images to the size you need and gives everyone a desired experience when view that portfolio page.

I am sorry if that is not what you was asking, but that is what I thought you was meaning with your phrase.

Thanks and hope this helps