Can I import an image in its original size, without defining its width and height?
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
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
This question requires more nouns, verbs, and adjectives.
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. :-)
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!
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)?
Thomas Law you could always replace the image that is then placed in the /images/ folder with a different one. :-)
Benjamin Den Boer But what it the size changes?
Thomas Law then you have to update the width and height properties to the new size, otherwise it'll get cropped or stretched.
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?
^ I wouldn't want that. Yikes.
Just drag it in again and replace the setup code with new stuff. Or you could write a module to do what you want.
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.
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?
Andrew Nalband - I'll take a look today. :)
this works for me, dont think theres any way easier way to do this tbh
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-L122Maybe a condtiional for "if image" then use "naturalWidth". Don't know, just peeked into the source.
Thanks George for knocking something off my to do list. ;)
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
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.
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.
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/
Andrew Nalband Boom! Thank you.
Nick Kutateli pretty cool, right? I was just reading this comment from Jordan on an unrelated issue and suddenly the solution became obvious.
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/
Andrew was typically like 30ms after wards. I just ran a loop until it was ready.
Jordan - did you use utils.interval or something else?