Hi all~
I made a web section layout as a component with an image placeholder in it. When I used it as instance, I dropped in images to that image placeholder. But the images are not always the same size as the placeholder. It crops my image and I couldn’t rescale the placeholder. Is there any way I can make the real image drive the placeholder so my image won’t be cropped off?
You need to make an image component first if you want somewhat dynamic size for it. Grab an image layer, Shift+A that and make a component. Keep “hug contents” sizing, important. Place that component inside your hero section and use component properties to enable component swapping on that image.
To incorporate different image into the hero instance you’d need another image component, like the one you already created, any size, wrapped with auto layout with hug contents sizing.
I’d keep them organized under the same “folder”, like “Hero/Images/Image 1”, “Hero/Images/Image 2” etc. It will make it easier to replace images fast.
Thank you so much for your replying!
I’ve created the image as a component inside the hero component and made it “hug” like you said. But I don’t really understand “use component properties to enable component swapping on that image”. And it is still not working
Would you mind open up the demo file and check it out for me? Thank you
If I understand correctly, I will need to make every different size of image a instance swap? Like you showed in your demo, these swaps are all different dimensions.
So when I have a new dimension of image, I will need to add a new instance swap? What if I just want to use a bunch of random dimensions of screenshots as the hero image, is that impossible to drive the placeholder that flexibly?
Depends on what you want to do really. I am just demonstrating to you the way to enable dynamic image sizes, which was your original question as far as I got it. Now you have a template to play with. You can easily reduce all the choices down to a few options, up to you.
