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 ed quijano
ed quijano
11,907 Points

I am stuck in this stage. Please help.

After following the instruction in the video, I replace this code:

 <p><?php the_post_thumbnail( 'medium' ); ?></p>

with this:

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

What produces this change is a large size photos instead of prepared them for a responsive request. Trying to resize in media settings doesn't produce a change. Any suggestion how to resolve this issue. Thanks for you help.

4 Answers

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Ed, I am guessing by your code that you are using this WP function. If that is the case, then the problem is that the wp_get_attachment_image_src() function's 2nd parameter, image size, defaults to thumbnail and not medium. That is why you are getting drastic changes in the size of your image. If you want to use a medium size image then use this bit of code:

$thumb_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumb_id, "medium", false);
Gleb Vorobjev
Gleb Vorobjev
13,704 Points
Gleb Vorobjev
Gleb Vorobjev
13,704 Points

Try adding the bootstrap class "img-responsive" to the img tag.

Victoria Roberts
Victoria Roberts
5,604 Points
Victoria Roberts
Victoria Roberts
5,604 Points

That worked absolutely perfectly. Thank you. He doesn't do it in the video, and it's not in the project downloads, but it fixed the problem.

ed quijano
ed quijano
11,907 Points
ed quijano
ed quijano
11,907 Points

Andrew, thanks a lot. It works and I get a big lesson today. I will keep it in my files

Ed Quijano

ed quijano
ed quijano
11,907 Points
ed quijano
ed quijano
11,907 Points

Andrew, I have another question if that code

$thumb_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumb_id, "medium", false);

works on the sizes, how we arranged with a space as Zac described in the video. I think that the reason to use Zac code

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

is for resizing on any browser. My question is with your suggested code how I accomplish the responsive size? You can watch that part of the video how Zac use the code with that purpose.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

I don't believe the php has anything to do with the resizing. That should all be taken care of via CSS and the HTMl.