0
1
00:00:02,970 --> 00:00:07,410
In this video, we're going to add the main image and then again bind it with the CMS field.
1

2
00:00:15,620 --> 00:00:17,800
Although this image is wider in our designs.
2

3
00:00:17,810 --> 00:00:22,490
It's wider than the container for the content. It's 900 pixels instead of 700.
3

4
00:00:22,490 --> 00:00:26,400
This means, we can't put this image inside the same container as a headline.
4

5
00:00:26,420 --> 00:00:28,200
We need a different container for it.
5

6
00:00:28,250 --> 00:00:30,010
So we're going to add a new container.
6

7
00:00:33,050 --> 00:00:37,230
Give it a new combo class.
7

8
00:00:45,310 --> 00:00:50,650
And move the image inside there.
8

9
00:00:50,690 --> 00:00:51,760
Now that's about right.
9

10
00:00:54,700 --> 00:00:55,570
In our designs,
10

11
00:00:55,570 --> 00:00:59,500
there is a certain height to the image, which makes it look more pleasing.
11

12
00:00:59,560 --> 00:01:05,050
And right now, it's just growing and shrinking based on the original image. That's going to create a layout
12

13
00:01:05,050 --> 00:01:08,430
that is not uniform. And in some cases, very odd looking.
13

14
00:01:08,440 --> 00:01:13,660
For example, if we upload a big vertical image, that's going to fill too much of the page pushing the
14

15
00:01:13,660 --> 00:01:14,620
text down.
15

16
00:01:14,620 --> 00:01:18,140
This is again the same problem we faced with the author avatar.
16

17
00:01:18,330 --> 00:01:22,010
Similarly, adding fixed height doesn't work here either.
17

18
00:01:22,060 --> 00:01:27,520
We have to use the same solution and use the background image style instead of a regular image.
18

19
00:01:30,340 --> 00:01:31,870
So let's add a new div block.
19

20
00:01:36,430 --> 00:01:38,410
Give it a class and set a fixed height.
20

21
00:01:46,370 --> 00:01:55,020
And in the dynamic style, settings get the background image from the CMS.
21

22
00:01:55,150 --> 00:02:11,560
Don't forget to style the background image properly.
22

23
00:02:11,690 --> 00:02:16,960
Lastly, just add a top margin to the image to match the design. Perfect.
23

24
00:02:16,960 --> 00:02:22,470
This is now uniform for any type of whatever the form, or shape of the image, or the size.
24

25
00:02:22,620 --> 00:02:26,830
And it's going to be the same position and dimensions. And it's just gonna look great.
25

26
00:02:26,830 --> 00:02:29,530
Alright. Check the fluidity. And that's it.
26

27
00:02:29,530 --> 00:02:31,120
Up next. We'll work on the body.
27

28
00:02:31,120 --> 00:02:31,630
Stick around.