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

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Adding Image Size to Wordpress theme

I have added this to my theme's functions.php 

add_image_size( 'custom-size', 220, 180 );

and then this to my single.php

<?php if( get_the_post_thumbnail() ) : ?>
    <div class = 'postImgCon'>
        <div class="post-img">
            <?php the_post_thumbnail('custom-size'); ?>
  //originally this was <?php the_post_thumbnail('large'); ?>
        </div>
    </div>
<?php endif; ?>

the thumbnail displays, but there's no change in it's size, when I change 

<?php the_post_thumbnail('large'); ?>

to

<?php the_post_thumbnail('custom-size'); ?>

Also, the new size is not showing up when I go to Settings -> Media in my Admin bar. If anyone has any suggestions/advice I'd be grateful.

2 Answers

Damir Pristav
Damir Pristav
23,048 Points
Damir Pristav
Damir Pristav
23,048 Points

Hi Gabriel,

If you have uploaded your images before you've added new image size in functions.php file, then you probably need to install regenerate thumbnails plugin, https://wordpress.org/plugins/regenerate-thumbnails/

Once you've installed the plugin go to Tools - Regen. Thumbnails and click on Regenerate all thumbnails button.

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Damar,

I did this and on the page the image is not changing size. But when I inspect the img dimensions in the browser, they are. I have realised that what might be having an influence on things is that the width for the .post-img container is sest to 100%. Do you think this might be having an effect?

Damir Pristav
Damir Pristav
23,048 Points
Damir Pristav
Damir Pristav
23,048 Points

Hi Gabriel,

Try to set max-width: 100%; to your images. If image has class attachment-custom-size then it's working, probaly is something wrong with css.