In this video, we're going to add the main image and then again bind it with the CMS field. 1
Although this image is wider in our designs. 2
It's wider than the container for the content. It's 900 pixels instead of 700. 3
This means, we can't put this image inside the same container as a headline. 4
We need a different container for it. 5
So we're going to add a new container. 6
Give it a new combo class. 7
And move the image inside there. 8
Now that's about right. 9
In our designs, 10
there is a certain height to the image, which makes it look more pleasing. 11
And right now, it's just growing and shrinking based on the original image. That's going to create a layout 12
that is not uniform. And in some cases, very odd looking. 13
For example, if we upload a big vertical image, that's going to fill too much of the page pushing the 14
text down. 15
This is again the same problem we faced with the author avatar. 16
Similarly, adding fixed height doesn't work here either. 17
We have to use the same solution and use the background image style instead of a regular image. 18
So let's add a new div block. 19
Give it a class and set a fixed height. 20
And in the dynamic style, settings get the background image from the CMS. 21
Don't forget to style the background image properly. 22
Lastly, just add a top margin to the image to match the design. Perfect. 23
This is now uniform for any type of whatever the form, or shape of the image, or the size. 24
And it's going to be the same position and dimensions. And it's just gonna look great. 25
Alright. Check the fluidity. And that's it. 26
Up next. We'll work on the body. 27
Stick around.