Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The first step in setting up featured images is to enable theme support for post thumbnails and define the featured image sizes. All this is done from functions.php. And you'll remember, all the way back in the beginning of the course, when we set up functions.php, one of the things we enabled was support for post thumbnails or featured images, and we did that by uncommenting this function. Add theme support, post thumbnails. So right now WordPress supports featured images, but we have yet to tell WordPress what size of images we want to be able to use.
Looking back at the design I have two different featured images in my designs. I have this very large featured image that appears in single posts. And also on the top of the index page for the first post, and then I have smaller cropped images that appear on all index pages. Now I need to tell WordPress exactly what sizes these images are, and give them names, so that I can call them in, in the correct places. All this is done by using a function called add_image_size. So if I go say add_image_size, you see here the variables are name, width, height, and crop.
So here, I'll start by giving each image size a name and here I like to give names that actually tell me which images these are. So, I'll call the first one large-thumb so it's a large thumbnail. I'll set the width of the large-thumb to 1060, and the height to 650. And then I have to choose whether or not I want to use a hard crop or a soft crop. If I set the crop value to true then WordPress will take an image that's much larger. Scale it down to match the width, and then crop it to match the height.
That also means if the image is really wide but is not the full height, then the image will just be scaled down. If I set this value to false however and I upload a very, very large image, then WordPress will just take the large image as it is and just display it as 1060 by 650. So in most cases it's a good idea to set this value to true, but if you don't want WordPress to crop the image you may want to set it to false. So, try to experiment with this and see what happens. Then I need to add the second image size, add_image_size again.
I'll give it the name index-thumb because this is the one that will display on index pages. And here the width is going to be 780 pixels and the height is going to be 250 pixels and again the crop is set to true. So now, I'm generating two images. One that's very big. And one that just fits within my content area and is really short. Now, before we continue, let me just give you a quick tip. In some rare cases, you may want the ability to upload feature images. That have variable height and will allow any height of image.
In that case, what you want to do is change the height value here to 9999. That way, WordPress will never crop the height of an image. Well, it'll crop it if it's bigger than 9,999 pixels but that's a very, very large image and you would never use it in a WordPress site. So by setting this value this big. You ensure that no matter what size of image people upload, so that way the height of the object will never be cropped. But, for my purposes, I'm going to set it to 250, save.
And, not WordPress knows what size of image we want.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.