Apply This New Webflow Feature to All Images

Get the cloneable for this project (affiliate link)
webflow.grsm.i...
Join my Webflow Wizards Community
/ timothyricks

[@fuster7474]

Daaamn, this feature was long needed, glad that they finally added it

[@timothyricks]

Totally agree!

[@huntprod]

Thanks so much Tim I've been looking everywhere for a video like this!!!

[@Freigeist_1984]

What did you use for the thumbnail? How can I search for something like this blue light box like from apple?

[@MarkFaamaoni]

As a photographer...this update pleases me :)

[@seyademcileli]

Hey Tim! I appreciate you continuously sharing these gems. I have a question, is this the better method now going forward compared to the one in your Patreon? (Sizes & Ratios (Percent) video) Thanks as always Tim.

[@timothyricks]

So glad this helps! Yes, this method is better because it requires less divs to setup. The aspect ratio can be applied directly to the image or element.

[@seyademcileli]

That makes sense, thanks Tim! @@timothyricks

[@mohamedaminemaanan730]

Hello, Tim. Thank you for your continuous efforts. I recently discovered your channel and am attempting to understand your Lumos framework as well as the new variables system. I was trying to follow one of your Figma to Webflow lives when I realized I needed a hosting plan to alter the embedded code; is there a way to get around this?

[@timothyricks]

Thanks so much for checking out Lumos! I’m in the process of majorly updating it to include the new features Webflow will be releasing so there will be some big changes. Webflow requires a paid hosting or account plan to edit custom code, but you could always clone the finished version of the project with the code already in it if you’d like, delete the structure, and rebuild from that.

[@sitcomz]

Awesome... can't wait

[@mohamedaminemaanan730]

@@timothyricks Oh brilliant! Thank you so much again

[@beta_byte]

Hey Tim, could you please explain or maybe make a quick video on how to set up a lottie file as a background and make it resize the way an image set to a fit of cover does? I've tried everything but lottie files behave in a very odd way and I couldn't figure out how to pull that off

[@timothyricks]

Hi there, good question! You should be able to set the height and width using the vmin unit to ensure the lottie always covers the height and width of the screen.

[@oldbonesmcgee]

Hey, I think what you might be missing is a data attribute that you apply directly to the Lottie element. The Name is (don't copy the quotes) "data-preserve-aspect-ratio" and the value is (don't copy the quotes) "xMidYMid slice" This makes the lottie function like fit cover, then just set your lottie element to 100% width and 100vh

[@samuelkuehne]

I noticed that it messes up many picutes on the safari browser do you know why?

[@lpaveld]

Very useful. Thanks.

[@CharlieOsborne]

legend

[@RRDoker]

Great!

[@weezyf775]

i was literally just going through a collection and resizing images to a specific ratio - and i thought, there's gotta be a better way! can this be applied to collections with variations in image sizes?

[@timothyricks]

Yes, that's totally possible with either of these options. 1. Style a data attribute so you can manually select the style of each item. kzbin.info/www/bejne/jHuTpKqBbdKVnZY 2. Use nth child css to create a repeatable pattern kzbin.info/www/bejne/fai2l2yBfLGha9k

[@gertrudabanker9879]

*Promo sm* 👉