This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Thomas Law
Posted May 19 - Read on Facebook

Can I import an image in its original size, without defining its width and height?

27 Comments

Charlie Sneath

Is anyone able to get this module to work with Framer? I'm getting an error but it seems like it fits the use case we're looking for: https://github.com/image-size/image-size

Charlie Sneath

I also have an ongoing thread with the repo's owner, maybe Koen has an idea of why it isn't working? https://github.com/image-size/image-size/issues/81#issuecomment-302807249

Joseph Van Geffen

This question requires more nouns, verbs, and adjectives.

Benjamin Den Boer

They Thomas Law - if you drag and drop an image onto Framer Studio, it'll automatically set the correct width and height for you. If you import designs from Sketch or Photoshop, you need not set the width and height either. :-)

Joseph Van Geffen

You can also cut and paste from just about anything, which would retain its original size (unless you are screen capturing then it is the size of your screen). Hope that helps oh vague one!

Thomas Law

Benjamin Den Boer But if I do so, what if I want to replace the image with another different one (without changing the layer name)?

Benjamin Den Boer

Thomas Law you could always replace the image that is then placed in the /images/ folder with a different one. :-)

Thomas Law

Benjamin Den Boer But what it the size changes?

Benjamin Den Boer

Thomas Law then you have to update the width and height properties to the new size, otherwise it'll get cropped or stretched.

Thomas Law

Benjamin Den Boer That's the point. Can we just don't input the width and height and still keep the layer in correct size?

Jordan Robert Dobson

^ I wouldn't want that. Yikes.

Jordan Robert Dobson

Just drag it in again and replace the setup code with new stuff. Or you could write a module to do what you want.

Nick Kutateli

So was it confirmed that this isn't do-able in with Framer? Having it pull the images native dimensions unless it's defined makes the most sense. In my use case I'm building a feed that automatically pulls images out of a directory in a loop. Each image has varying height. Right now, the only solution is set heights manually.

Andrew Nalband

Nick Kutateli seems like there should be a way to do this. This weirdly works usually in framer, some of the time in safari (reload until it works) and pretty much never in chrome. http://share.framerjs.com/46ce5euuj038/

This is really butting up on the limits of my coffeescript/JS knowledge. Jordan - any idea why this solution is so finicky?

Jordan Robert Dobson

Andrew Nalband - I'll take a look today. :)

George Kedenburg III

this works for me, dont think theres any way easier way to do this tbh

Andreas Mitschke

George Kedenburg III I think that is the issue here in framerjs.

Framer is calling width() instead of naturalWidth() of a layer.
https://github.com/koenbok/Framer/blob/b22d277d13618b6507f38f40db2626416536955c/framer/Context.coffee#L113-L122
Maybe a condtiional for "if image" then use "naturalWidth". Don't know, just peeked into the source.

Jordan Robert Dobson

Thanks George for knocking something off my to do list. ;)

George Kedenburg III

nope, i think this is a catch-22 issue. naturalWidth/height is only accessible once the image has loaded (which won't happen until its in the DOM). in order for Framer to put the image in the DOM, it needs to make a layer (with a width and height). thats why you have to wait for .onload to fire to access the natural sizes

Koen Bok

Yes, when you think about it, it makes sense. You cannot know the size of the image until you read the image. Unless you get some info upfront (like metadata). This is for example also the main reason why a browser renders so much faster when you add width/height to an <img> tag.

Koen Bok

The fastest to add it with metadata is to drop it on your project window from wherever, we'll type the width/height for you.

Andrew Nalband

Well, this is a bit hacky, but seems to work 100% of the time! Just delay looking for the image dimensions: http://share.framerjs.com/vb21izi2ozxs/

Nick Kutateli

Andrew Nalband Boom! Thank you.

Andrew Nalband

Nick Kutateli pretty cool, right? I was just reading this comment from Jordan on an unrelated issue and suddenly the solution became obvious.

Andrew Nalband

Here's a more useful example with three images. The positioning of the second and third image is set relative to the preceding image. Try swapping out the images it points to and you'll see everything updates as you'd expect. http://share.framerjs.com/8l3rda5bbl9d/

Jordan Robert Dobson

Andrew was typically like 30ms after wards. I just ran a loop until it was ready.

Andrew Nalband

Jordan - did you use utils.interval or something else?

Read the entire post on Facebook