To do this, we'll need to create a new file called single.php, and edit the index.php file as well.
- Make a copy of your theme's
index.phpfile and call itsingle.php. Save it to your theme directory. - Open
index.phpand find the code you added for displaying featured images:<?php if ( has_post_thumbnail() ) { the_post_thumbnail('large'), } ?> - Edit that code so it reads:
<?php if ( has_post_thumbnail() ) { the_post_thumbnail('medium'), } ?> - Save the
index.phpfile.
We created a new file called single.php. The reason we copied index.php for this and not page.php is that we want single posts to include post metadata. You may remember that in Chapter 3, Coding it Up, we deleted the code to display that metadata, which was why we set up the page.php file in the first place.
We then edited the index.php file so that any pages on your site using that file to display content will display a smaller image.
Let's see how our home page looks now:
It needs a bit of styling, maybe floating the text to the left of the image for example, but it's already much better—the images aren't so dominant and we can see more content.
Note
Featured image sizes
When we upload an image to the media gallery, either directly into the gallery or into a post or page, WordPress saves the uploaded image plus up to three versions of it:
The thumbnail, a version of the photo which is cropped to a square, whose default size is 150 px x 150 px.
The medium size, with a default maximum size of 300 px x 300 px. This size doesn't involve cropping so if the image isn't square, then one side will be less than 300 px.
The large size, with a default maximum of 640 px x 640 px, again not cropped.
WordPress will only save each of these images if the original image is large enough. so if, for example, we load an image 500 px x 400 px, it will save the original image plus the thumbnail and medium sizes but not the large size. It's a good idea to upload images which are the same size as the large size in your theme, to save on server space, but sometimes it may be necessary to upload a wider image and use it in full size, for example for a full width banner.
If the featured image sizes don't fit in your design, you can always change them via the Settings | Media screen.