Blog Photos in theme: Impact

[Laure5]

Good day,

Is there a quick way to resize or my blog photos to the same size? I have tried everything I can think of and they are all different sizes still.

[Liquid_xPert_SJ]

@Laure5

can you please share the store url?

Thanks

[Devinlabs]

Hi ,

.blog-photo {
    width: 300px; /* Set your desired width */
    height: 200px; /* Set your desired height */
    object-fit: cover; /* This property ensures the image covers the defined dimensions */
}

apply the blog-photo class to all your blog photos:
try this and let me know if you still need any help.

[Laure5]

https://botanicumsa.co.za/blogs/botanicums-blog-posts

[Laure5]

Hi @Devinlabs , you will have to tell me where I need to apply that.

[Liquid_xPert_SJ]

@Laure5

please place below code into your theme files,

Online Store > Edit Code > Assets > theme.css file and place at the very bottom OR

.blog-post-card__figure img {
	object-fit: cover;
	width: auto;
	height: 300px;
}

Online Store > Edit Code > Layout > theme.liquid file before tag

Results:

[Laure5]

My main post was affected now too and its picture is too small now. How do I fix this?

[Devinlabs]

You can put that into assets/theme.css

[Liquid_xPert_SJ]

you just removed it? please show it again i will provide the code for that too.

[Liquid_xPert_SJ]

update your code with this

.blog-post-card__figure img {
	object-fit: cover;
	width: 100%;
	height: 300px;
}

[Laure5]

@Liquid_xPert_SJ , I have removed the main post. All good. Thanks for the help.