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
Gabriel Ward
20,222 PointsResponsive images in Wordpress
I want to have my thumbnails be responsive in size and also remain in proportion. However the images don't keep their proportion when the browser is changed in size.
Here's my relevant code, in particular the feat-img div.
home.php
<?php while ( have_posts() ) : the_post(); ?>
<?php if( get_the_post_thumbnail() ) : ?>
<div class = 'image'>
<div class="feat-img">
<?php the_post_thumbnail( array (300, 300) ); ?>
</div>
<div class ='text'><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2></div>
</div>
<?php endif; ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
<?php endwhile; ?>
</div>
style.css
.feat-img {
max-width: 70%;
margin: 0 auto;
}
I've been playing around with this for a while and not had any luck. I'm not sure if the feat-img CSS needs to be changed or whether something needs to be changed in home.php
Any help is greatly appreciated.
3 Answers
Rich Bagley
25,869 PointsHi Gabriel,
Can you try adding height: auto; to your featured image style please?
Does that make any difference? If not, I'll look in to an alternative.
UPDATE: Can you try the following please?
Change:
<?php the_post_thumbnail( array (300, 300) ); ?>
to:
<?php the_post_thumbnail(); ?>
Does it make any difference?
UPDATE 2:
Just noticed the class is on the div as apposed to the img tag.
Try adding the following style:
.feat-img img {
height: auto;
width: 100%;
}
You may need to change width to max-width but give that a try :)
-Rich
Gabriel Ward
20,222 PointsHi Rich,
Yes, the width diminishes while the height stays fixed.
Rich Bagley
25,869 PointsHi Gabriel,
I've just updated my answer, can you try that please? It may distort the original image initially but if it resizes correctly you should be able to sort this with CSS.
Also, one other thing to quickly check, is the height only set in the PHP or is there something in the CSS overriding it?
-Rich
Gabriel Ward
20,222 PointsI have tried that one and sadly the image is stretched vertically and does all kinds of strange stuff.
Gabriel Ward
20,222 PointsThanks for your time Rich, if anything I'm getting a good workout in Wordpress!
Rich Bagley
25,869 PointsNo problem, just noticed something else so updated the answer above.
-Rich
Gabriel Ward
20,222 PointsRich thank you so much!
Rich Bagley
25,869 PointsNo problem :)
Gabriel Ward
20,222 PointsGabriel Ward
20,222 PointsThe images still narrow their proportions. The width gets smaller much faster relative to the height. Also, at the smallest breakpoint, which is between 767px and 1px, the images break out of the 300 x 300 size and turn into a rectangle. It all works fine in my static template I've developed, but it's the integrating into Wordpress that's the headache!
Gabriel Ward
20,222 PointsGabriel Ward
20,222 PointsThis is the kind of thing I'm after:
letterbox-mag.com
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi Gabriel,
Sorry about the delay. If you use your browser developer tools (usually F12 in the browser or right click and 'Inspect Element') can you see both the width and height changing?
-Rich