Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have featured images in your site, you can add them pretty much anywhere you want on the site. Because the featured image is directly associated with each post and each page, without being in the content body, you can display these images in a different way from regular images in the body. The key is to know how to call them up, and how to get the correct size when you do. I have shown you this several times before. In the twentytwelve theme, the general way in which a featured image is displayed is at the top here: top of the post, large image before anything else. But earlier in the course we created new category templates and in these templates those gigantic featured images look pretty weird.
What I want to do now is add a smaller featured image here, next to the excerpt of the content in each post. To do that, we need to make some small changes to the content.php template and add in the featured image. First, I'll open content.php in my child theme and find out where I want to put in this content. What I want to do is put it next to the excerpt, and since I already have the conditional call to test for when the excerpt should be displayed, I'll just place it inside that conditional call.
I also want to place the featured image outside of the excerpt so that it'll float to the left of it. So I am going to add some new lines directly above the excerpt here, and then I can put in my featured image. But what I am going to do now is wrap the featured image call in a conditional call to make sure that we don't put in code when there is no featured image to show. So I'll start off with a php delimiter, and I'll end it, and then I'll make a conditional call. I'll say if, and here I'll use another conditional statement that comes with WordPress.
It's called has_post_thumbnail. Not surprisingly, all this function does is it checks whether or not the current post has a post thumbnail. If it has a post thumbnail, I'm going to echo out some information. So I'll print out figure and I'll give the figure a class, call it cat-thumb, because this is a thumbnail for the category. I'll then end my figure with another echo and then in between these two, I'll use the function that calls the post thumbnail.
If we scroll up here, you'll see we already have the function here in the file. It's called the_post_thumbnail. But this time I want to call a specific size of post thumbnail, so I am going to say the_post_thumbnail and then I'm going to put in a variable that defines what size I want. To refresh my memory, I'll go back to my functions.php file where I defined this new size and I'll scroll down here until I find the size. It's right here, add_image_size, and the name is category-thumb.
So I'll copy out category-thumb and paste that in here, and then finally, I have to end my conditional statement, so I'll say endif. I'll save this and now when I reload my category archive, I should see small category thumbs appear. But they don't look exactly right yet. I still have to float this to the left, and that's why I wrapped this figure class="cat-thumb" around it, so that I can now create a style for cat-thumb.
So I'll go to my style sheet, scroll down, add class cat-thumb, and then I'll say float: left; and I'll also give it a little bit of a margin, so margin, top margin 0, right margin 10 pixel, bottom margin 10 pixel and left margin 0. Then I'll close the style cat-thumb, save style.css, and reload my page again, and now you see the thumbnail hovers nicely to the left of the content. And just to make sure I didn't break anything, if we jump back to the front page, scroll down, you see we still have the gigantic featured image here, and if I go to the single posts, we still have the gigantic featured image here.
By adding featured images in strategic locations throughout your site, you both make your site look nicer and increase the chance of people reading more of your content.
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.