Smart Layout with Text/Image-Combinations

[Mounthook]

Hello dear Sketch community,

I am new to the forum, so please go easy on me.

I would like to solve the following task:

I am creating the layout for the screen design of a website/shop.
For this I create the layout for the three devices mobile, tablet and desktop in separate layouts.

Our development will provide all images of the website for all devices in the following aspect ratios via the DAM system.

3:1
2:1
16:9
3:2
4:3
1:1
3:4

So that we do not have to constantly calculate the aspect ratios/sizes in the respective devices, we have stored all image sizes for the devices as devices (see screenshot 1-1).

Now we would like to use the images for different symbols, such as a text/image symbol or a teaser, in such a way that we can select the different images during layout and that
a) the elements underneath move
b) the whole symbol adjusts to the size (screenshots 2-1 and 2-2).

I don’t want to do this for the following reasons:

1. when I replace an image symbol with another image symbol with a different ratio, the height does not adjust. I also cannot update the size of the image, when I reload the instance, the original image is placed again, of course.
   The function “Swap at Original Size” does not work with nested symbols.

I have therefore superimposed all images of the same width and the same device as symbols and created a separate symbol from them (see screenshot 3-1). I can switch the different images (symbols) on and off, but all the elements below them are oriented to the largest symbol. When this is switched off, everything slides to the top of the screen and the other images are not accepted as placeholders.

Unfortunately, I can’t think of any other workaround to create a teaser with one symbol that takes into account all the image ratios.

Maybe you have an idea you would like to share.
Many thanks in advance.
Chris

[dfmedrano (Jorge)]

Hi there,

Welcome to the Sketch Forum, it’s great to have you here!

I want to share a solution that I think can help you build your layouts. There is a key tradeoff: to handle multiple image ratios we need to use Smart Layout in Groups and Artboards instead of symbols and there is some manual resizing involved.

The end result involves creating an artboard template which you’ll use to add new instances of your component. The artboard can handle any image ratio and you can save this template in a library so it can be available for reuse by your whole team.

I made a video that walks you through the solution and I’m also attaching a sample file for you to test with. I’d love yo hear your thoughts about it

Here’s the video link

And see the attached file for reference
Reusable artboard for image ratios.sketch (451.7 KB)

[Mounthook]

Hi Jorge,
thx a lot.
I’m afraid that’s not the problem I have.
I want to exchange placeholders with different aspect ratio in the same width. Due to the fixed width, this only changes the height, not the width. Therefore all other elements should automatically move up or down depending on the image height. This applies to texts, button but also to the fond/background of the block. Enclosed once again a screenshot with the grid.
I hope this clarifies the problem a bit.
Best regards
Christoph

[jonne]

Hey Christoph, this looks like a similar case we discussed in this post as well. I hope this comes a step closer to your desired outcome.

[Mounthook]

Thanks a lot.
That looks
GREAT!!!