Viewers: in countries Watching now:
Now that we have featured images in our single post templates, we're going to start applying styles to them to make them look exactly how they want. But before we do so, let's just see how the images behave right now in responsive environments. Because, if you take the post that you have with the very large featured image, and you resize it to a smaller browser width. You'll see that the featured image automatically inherits the responsive styling of images from the Underscores theme. So here you see, as I scale down to a much smaller window, the image proportionally resizes to fit that smaller window.
So, the only thing we need to worry about is images that are smaller than they're supposed to be. And also what happens to images that are displayed on very large screens. Because, if you'll remember, the two featured image posts that came with the theme unit test data, have smaller featured images. And you can see that they align all the way to the left. Now that might look acceptable on the screen I have right now, but if you go to a very large screen, it'll look weird because the image will be all the way over the on the left, and the content will be in the middle. So here I've made some design fall backs.
The first thing I want to do is place the image in the middle directly above the posts. And then I also want to add a rasterized background behind the Featured Image section, so that the Featured Image section is a separate element from the rest of the post. So we'll start by adding that rasterized background, and then using the class we applied in the previous movie to center align the featured image. First, I need the rasterized background itself, and if you go to the exercise files for this course, you'll find a folder called Images.
And, within that folder, you have a single file called pattern.svg. So I'm going to take the Images folder and copy it into my theme. So, here on the right, I have WordPress installed on my computer. I'm going to go to, wp-content > themes > my-simone, and I'm simply going to grab images and just copy it into my themes folder. And that way I can target pattern.svg using CSS. So, if we quickly look back at the code we added in the previous movie, we wrapped our featured image in a div with a class, single_post_thumbnail, that clears, meaning it spans the full width of the screen.
So now I can go to style.css and find where I want to insert the featured image code. And if you look at the table of contents, you'll see here we have 12.0 Media. So I'm going to find 12.0. Here's the media and I'm going to scroll to the bottom of the Media section. And then I'm going to add the featured images at the bottom here because they're optional. So I'll just put in Featured Images, and here I want to add in the styling that both adds that background, and also aligns the image in the middle.
In my code snippets I have those two rules, they're right here, so I'll copy them out, and paste them in. And here you see the first rule targets the container. So single-post-thumbnail sets the background to the same grey we set previously in the course. And then sets a background url, so that's the image, to that pattern.svg, and repeats it. The second one just displays the image itself as a block element, and then aligns it to the middle by setting left and right margins to auto. So I'll save that, and go and reload one of the posts that have the smaller images.
And now you see the image aligns in the center of the current container, and we have this rasterized background effect behind the image. Same goes for the other image here. And if you're on a much larger screen you'll see, as you scale the screen up, the image will always align to the center of the main container, and you'll have that nice rasterized background behind everything. And this works great, but, if you want to take this one step further, and you want to really follow my design closely you can add some additional code. So I've added some additional code to make the featured image even more responsive in the code snippets.
So here you have optional code for content single. I'll copy that out, and go to content single and I'll just replace the top element here. And what this code does is, it adds an additional div within the single post thumbnail div called, image-shifter. And this image-shifter will be used to shift the image so that it aligns to the right-hand side on smaller screens. And then aligns to the center on larger screens, and that's done using a bit of custom CSS with mediaqueries.
So here you see you have some mediaqueries, that we can copy out, and paste in below our featured image call. And these media queries target different screen sizes. So here you see with target screens that are from 1440 pixels wide to 1820 pixels wide. And what you'll see here is on much larger screens, the image will now shift to align with the alignment of the content. because, you'll remember, previously I explained that on larger screens, the content will first align to the right-hand side and then start aligning to the center, and now the featured images will do the same.
They'll start by aligning to the right-hand side, and then align to the center. So if you have a larger screen, apply that extra set of code, and experiment with resizing your window to see exactly how this extra responsive code kicks in.
There are currently no FAQs about WordPress: Building Themes from Scratch Using Underscores.
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.