0
1
00:00:03,130 --> 00:00:06,940
So we left off here. Where the avatar isn't looking at its best.
1

2
00:00:06,940 --> 00:00:10,180
That's because we haven't styled the image in a way that it looks
2

3
00:00:10,180 --> 00:00:12,910
same no matter what type of photo we upload.
3

4
00:00:12,910 --> 00:00:16,060
Right now, it changes the shape, based on the image itself.
4

5
00:00:16,060 --> 00:00:20,440
The image that we had before from Figma was already oval and right size.
5

6
00:00:20,560 --> 00:00:22,550
That's why no styling was required.
6

7
00:00:22,660 --> 00:00:28,210
Without proper styling, then we would have to upload already cropped and oval images. And leaving that
7

8
00:00:28,210 --> 00:00:31,630
up to content creators and clients, is a bad idea.
8

9
00:00:31,630 --> 00:00:32,830
First it adds extra work.
9

10
00:00:32,830 --> 00:00:37,420
Second, we would have to teach them how to do an oval crop, and just leaves a lot of room for error.
10

11
00:00:37,420 --> 00:00:42,180
The best thing is to style our image place holder in a way that it looks great no matter the image that's
11

12
00:00:42,190 --> 00:00:43,590
inserted inside.
12

13
00:00:43,750 --> 00:00:45,310
First let's make it oval.
13

14
00:00:45,340 --> 00:00:47,770
We do this by rounding corners of the border.
14

15
00:00:52,570 --> 00:00:54,960
Then we need it to be the same width and height.
15

16
00:00:54,970 --> 00:00:59,410
We can either apply this value inside image settings or in the styles panel.
16

17
00:01:06,110 --> 00:01:06,540
Alright.
17

18
00:01:06,540 --> 00:01:12,150
The shape is good. But if you notice the image inside is stretched. And it's the case for all the images
18

19
00:01:12,150 --> 00:01:17,220
that don't have equal dimensions. Meaning if the width and height of the original image file is in the
19

20
00:01:17,220 --> 00:01:18,310
same size.
20

21
00:01:18,330 --> 00:01:19,760
So how do we fix this?
21

22
00:01:19,770 --> 00:01:25,470
Well, one way again is to upload square images. But that, as I mentioned before, isn't very good option.
22

23
00:01:25,470 --> 00:01:28,860
It's pushing work onto other people and opening room for mistakes.
23

24
00:01:28,860 --> 00:01:33,600
There is one place where we can have better control on images. Inside background styles.
24

25
00:01:33,600 --> 00:01:36,850
If this was the background image, then we'd have a much better control.
25

26
00:01:36,870 --> 00:01:43,290
The thing is, background image, isn't really a content. It's a style. Controled from the styles panel.
26

27
00:01:43,290 --> 00:01:48,390
Now, can we pull image from CMS and use it as a background image style?
27

28
00:01:48,390 --> 00:01:49,930
The answer is yes.
28

29
00:01:50,010 --> 00:01:52,890
Webflow has an option for dynamic styles.
29

30
00:01:52,890 --> 00:01:54,990
It's in the settings panel.
30

31
00:01:54,990 --> 00:01:58,170
One of them says "Get background image from blog posts".
31

32
00:01:58,170 --> 00:02:01,140
That means we can set background images dynamically.
32

33
00:02:01,140 --> 00:02:02,540
So, here's what we're going to do.
33

34
00:02:02,580 --> 00:02:08,490
We'll replace this image element with a regular div block. Give it a same class name.
34

35
00:02:15,190 --> 00:02:21,850
Set the width and height values. And then in the settings panel pull the background image from the CMS.
35

36
00:02:25,060 --> 00:02:26,980
Right now, the image isn't positioned properly.
36

37
00:02:26,980 --> 00:02:29,420
It's even worse than before. Nothing's visible.
37

38
00:02:29,530 --> 00:02:30,750
But that's not a problem.
38

39
00:02:30,880 --> 00:02:36,500
We can style this background image as usual as we do with background styles. To be able to style this,
39

40
00:02:36,520 --> 00:02:40,810
we need to add a new background image from the styles panel.
40

41
00:02:40,890 --> 00:02:43,200
Don't worry about the place holder image here,
41

42
00:02:43,350 --> 00:02:47,160
that's going to be ignored and be overwritten by the dynamic image.
42

43
00:02:47,160 --> 00:02:54,510
Now we can style this image the way we want. Which is to position it as cover and center. Now we have
43

44
00:02:54,510 --> 00:02:58,560
the best solution, which is going to work with all image forms and shapes.
44

45
00:02:58,560 --> 00:03:01,680
Content creators are free to upload anything they wish.
45

46
00:03:05,530 --> 00:03:08,710
And that's all done with a header of our block post. Stick around for the rest.