Move

What you’ll learn#

• Move images programmatically using Swift
• Use the IMG.LY UI to drag images
• Adjust image position on the canvas
• Move multiple blocks together
• Constrain image movement in templates

When to use#

Use movement to:

• Position content precisely in designs
• Align images with text, backgrounds, or grid layouts
• Enable drag-and-drop or animated movement workflows

Move an image block programmatically#

Image position is controlled using the position/x and position/y properties. They can either use absolute or percentage (relative) values. In addition to setting the properties, there are helper functions.

try engine.block.setFloat(imageBlock, property: "position/x", value: 150)
try engine.block.setFloat(imageBlock, property: "position/y", value: 100)

or

try engine.block.setPositionX(imageBlock, value: 150)
try engine.block.setPositionY(imageBlock, value: 150)

This moves the image to coordinates (150, 100) on the canvas.

try engine.block.setPositionXMode(imageBlock, mode: .percent)
try engine.block.setPositionYMode(imageBlock, mode: .percent)
try engine.block.setPositionX(imageBlock, value: 0.5)
try engine.block.setPositionY(imageBlock, value: 0.5)

This move the image to the center of the canvas, regardless of the dimensions of the canvas. As with setting position, you can update or check the mode using position/x/mode and position/y/mode properties.

let xPosition = try engine.block.getPositionX(imageBlock)
let yPosition = try engine.block.getPositionY(imageBlock)

Move images with the UI#

Users can drag and drop elements directly in the editor canvas.

Move multiple elements together#

Group elements before moving to keep them aligned:

let groupId = try engine.block.group([imageBlockId, textBlockId])
try engine.block.setPositionX(groupId, value: 200)

This moves the entire group to 200 from the left edge.

Move relative to current position#

To nudge an image instead of setting an absolute position:

let xPosition = try engine.block.getPositionX(imageBlock)
try engine.block.setPositionX(imageBlock, value: xPosition + 20)

This moves the image 20 points to the right.

Lock movement (optional)#

When building templates, you might want to lock movement to protect the layout:

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

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

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

Troubleshooting#