Streaming live at 10am (PST)

How to have all blogpost thumbnail image in same size

#1

Can anyone help me regarding blog post thumbnail image, that every post has the same width and height, so my client does not need to think about pixels and to cut the images? It is about these images in these posts you see on this collection https://loftiferdir.webflow.io/israelsferdir - (this is a trial site) but what you see in the link is, that I have cut all the pictures so that everyone has the same pixel size.

So how to do that? I have tried with a div and made width to “auto” and height to 250 px - but all images does not becomes in the same height int that anyway? they jump a little, someone is higher someone is narrower. So how do I do this best so all pictures looks nice and have same height and same width in all posts? So my client don’t have to be worry about this?

#2

You may want to check this out.

#3

Hi dram! I don’t understand that you showed me. - It shall not be 100vh on this posts (I showed you my link) - in the link you sendt they also talked about some code…

#5

I meant that you may use custom object-fit property which would allow your images to behave like backgrounds (where you may set it as cover and the image will stay neatly centered in the image div no matter image size). Instead of filling the whole page you will set your images to the necessary size for you and then just use custom code to make use of the object-fit property.

#6

thank you dram! I am a new Webflower. Where to put this you say: “then just use custom code” - how to do that and where?
Thank you so much for helping me!

#7

No problem.

There are three ways of inserting your custom code into the webflow. Here is how you add it in the page and site settings. And here is how you use embed element to add the code. For your case I advise you to use embed since this way you will instantly see all the changes right inside your designer without the need to publish your site and check it in browser.

Please let me know if you have any questions. Also it may be better if you were to post your read-only link.

#8

thanks a lot. So I have to use this code: <style> .image {object-fit: cover;} </style>

#9

Yes, and name your images that you want your code applied to as image.

#10

More ideas her:

By the way i hope webflow will add this upload crop feature (very useful for blogs).

#11

OK? Now I am confused. I was told to use this code: <style> .image {object-fit: cover;} </style>
But you say this:

  • so which method is the best one?
#12

Thanks a lot for your help! This was great!!

1 Like
#13

Dear Dram! Sorry to write again. I works in Desktop and Ipad , but not in Phone vertical and portrait? - there is no image. I have tried everything , get it smaller and so on… but there is no image? So what to do??

#14

Can you please share your read-only link? I tis hard to tell what went wrong.

#15

Hi again ! Here is the link: https://preview.webflow.com/preview/loftiferdir?utm_source=loftiferdir&preview=371165597bd0d048d84835975a76e143. It it is this page I am talking about: https://loftiferdir.webflow.io/tidindi

#16

God I love Icelandic language even though I can’t understand a word!

OK, it looks like you actually just solved the problem yourself, you know? Looks like we did’t fully understand your question, haha. There is no need for the custom code, the background image solution is quite adequate, good job at figuring that out!

As for why it doesn’t look right on mobile breakpoint:

First, on the mobile - landscape breakpoint set width for the Div News mynd to 100%

12%20AM

Next, clear the styling from the image & gradient part (alt+click on the blue title so that it becomes yellow):

40%20AM

Done!

edit: clarified that both actions should be done on mobile - landscape breakpoint.

#17

Yes, Yes, Yes, Yes!!! Thanks a lot :heart_eyes::heart_eyes:

1 Like
#18

Haha, you are welcome. Good luck with Webflow, I hope it will become more familiar with time and use!

1 Like