Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
At this point, our content is displaying the way we want, but we're still missing one crucial component in our index pages, and that is the featured image. Looking back at our design, you'll see we have a small featured image that appears at the top of each of our index page posts. So now we need to add that featured image into the content template. Previously in the course, we added featured images to our single post templates. So now I can simply go to content-single, and grab the code that we used previously.
Copy it out. And paste it in where I want the featured image to appear. And I want it to appear within my index box so that it's confined within the same parameters. So I'm just going to paste it in directly under index-box. And then we have to make a couple small changes. First I don't need this image-shifter div so I'm going to remove it. And the end div. I also want to target the index thumb which is a smaller image so I'm going to change this to index-thumb. And then finally I want to be able to click on the index image to go directly to the post.
So here I need to wrap the index image in a link. So here, I'm going to grab some existing code I already have in my template. So I'll scroll down to the footer and find the line where I created a link that points to the post and has the continue reading text. And I'll just copy out the function within here. So echo, all the way to semi-colon. Copy it. And I'll scroll back up. And I'm going to wrap this around the image itself. So I'm going to put it inside the div.
So here I'll paste it in. And then of course, I need to make a couple of changes to it. So here it says continue reading. So I'm going to change this to click to read. And then it'll say the title of the post. And then I'm going to take away this end part, because we're going to wrap this anchor around the image. So I'll just take out the actual wording and also the end a. And then I'll place a new line directly below echo the_post_thumbnail. And here I'll say, echo. And I'll just close the a tag.
And end the line. And now I can save my contents and reload my page. And for every post that has a featured image it'll now see the featured image up here at the top. And then you see the post. And you can click on the featured image to go directly to the post. But now you see we have a bit of a layout problem. The featured image is being affected by the layout styles of the index box. So, it's being shifted down 1 em, and then it's also jamming up against the title. So, I need to add some classes to shift the image up so that it lays out nicely and so that it's full bleed with the top of the index box.
To do that, I'm going to go to my code snippets. Here at the top I have the in content full function. And, what I've done here is change the class of the divider that wraps around the index image to small-index-thumbnail. So I'm going to go and change it here to small-index-thumbnail. And now we can make a CSS rule that targets small index thumbnails. So I'm going to to to style.css. And here I'm going to find my featured images. And you'll remember that I placed my featured images at the very bottom, inside the media section.
So I'll go and find media first. And within media, there's a section for featured images at the bottom. And I'm going to scroll to the bottom of that section. And here, I'll go and copy in this single rule. And all this rule does, is it sets the margin-top to minus one em, to shift the image up, and then it gives you one em margin at the bottom. Save the stylesheet, reload the page. The image shifts up, gets a nice margin on the bottom. And now you see, as we scroll down, that each of the posts that have featured images have images that line up nicely, and the posts are now matching our designs perfectly.
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.