Resize

What you’ll learn#

• Resize blocks using the UI
• Resize images programatically using Swift
• Resize multiple blocks as a group
• Lock a user’s ability to resize a block

When to use#

Use resizing to:

• Match specific dimensions for social media, print, or product design
• Maintain consistent layouts across templates
• Enable responsive behaviors for dynamic asset generation

Resize a block using the UI#

When a block is selected, handles appear on the four sides to allow the user to resize either the width or the height of the block. The visibility of the handles is controled by a setting in the editor. When the handles are invisible, a user cannot resize using touch or a mouse.

try engine.editor.setSettingBool("controlGizmo/showResizeHandles", value: false)

In the image above the block on the right has its resize handles hidden. It cannot be resized by the user. The scale handles on the corner and the rotate handle below are still visible and the user can use those to modify the image block.

Resize a block programatically#

Each block has a width and height property you can update to resize the block. These can be .absolute values or .percentage values for their mode. A .percentage value is the relationship between a block and its parent. Setting the width of a block to 1.0 in .percentage mode will make it size to 100% of its parent’s width.

try engine.block.setWidth(block, value: 400.0)
try engine.block.setHeight(block, value: 400.0)

Sets a block to be 400 × 400 px.

try engine.block.setWidthMode(block, mode: .percentage)
try engine.block.setHeightMode(block,mode: .percentage)
try engine.block.setWidth(block, value: 50.0)
try engine.block.setHeight(block, value: 50.0)

Sets a block to be half the width and half the height of its parent.

Maintain aspect ratio#

When working with a block with an imageFill, when you modify the width or height of the block, the fill will adapt its dimensions to maintain its aspect ratio. For other types of blocks, it is necessary to calculate the dimensions and apply them.

In the block above, the width has been changed from 400 to 600. Notice that the subject has been scaled when compared to the images earlier in this guide.

Resizing a group#

You can group multiple items and then change the width and height property of the entire group. When resizing, the group will always scale in both dimensions the same amount.

let group = try engine.block.group([carDogBlock, lawnDogBlock])
try engine.block.setWidth(group, value: 400)

In this code, the group of images is resized to have a width of 400. Groups are always resized uniformly, so the height was also changed. Notice that, when selected, the group does not have resize handles, only scale and rotate handles.

Lock or constrain resizing (optional)#

When building templates, you might want to lock resizing of particular blocks to protect the layout:

try engine.block.setScopeEnabled(block, key: "layer/resize", enabled: false)

You can also disable all transformations for a block by locking, this is regardless of working with a template.

try engine.block.setTransformLocked(block, locked: true)