So we left off here. Where the avatar isn't looking at its best. 1
That's because we haven't styled the image in a way that it looks 2
same no matter what type of photo we upload. 3
Right now, it changes the shape, based on the image itself. 4
The image that we had before from Figma was already oval and right size. 5
That's why no styling was required. 6
Without proper styling, then we would have to upload already cropped and oval images. And leaving that 7
up to content creators and clients, is a bad idea. 8
First it adds extra work. 9
Second, we would have to teach them how to do an oval crop, and just leaves a lot of room for error. 10
The best thing is to style our image place holder in a way that it looks great no matter the image that's 11
inserted inside. 12
First let's make it oval. 13
We do this by rounding corners of the border. 14
Then we need it to be the same width and height. 15
We can either apply this value inside image settings or in the styles panel. 16
Alright. 17
The shape is good. But if you notice the image inside is stretched. And it's the case for all the images 18
that don't have equal dimensions. Meaning if the width and height of the original image file is in the 19
same size. 20
So how do we fix this? 21
Well, one way again is to upload square images. But that, as I mentioned before, isn't very good option. 22
It's pushing work onto other people and opening room for mistakes. 23
There is one place where we can have better control on images. Inside background styles. 24
If this was the background image, then we'd have a much better control. 25
The thing is, background image, isn't really a content. It's a style. Controled from the styles panel. 26
Now, can we pull image from CMS and use it as a background image style? 27
The answer is yes. 28
Webflow has an option for dynamic styles. 29
It's in the settings panel. 30
One of them says "Get background image from blog posts". 31
That means we can set background images dynamically. 32
So, here's what we're going to do. 33
We'll replace this image element with a regular div block. Give it a same class name. 34
Set the width and height values. And then in the settings panel pull the background image from the CMS. 35
Right now, the image isn't positioned properly. 36
It's even worse than before. Nothing's visible. 37
But that's not a problem. 38
We can style this background image as usual as we do with background styles. To be able to style this, 39
we need to add a new background image from the styles panel. 40
Don't worry about the place holder image here, 41
that's going to be ignored and be overwritten by the dynamic image. 42
Now we can style this image the way we want. Which is to position it as cover and center. Now we have 43
the best solution, which is going to work with all image forms and shapes. 44
Content creators are free to upload anything they wish. 45
And that's all done with a header of our block post. Stick around for the rest.