Flip Images

What you’ll learn#

• Flip an image horizontally or vertically
• Use flipping in template design or creative workflows
• Reset or toggle flip programmatically

When to use#

Flipping is helpful when:

• Mirroring product images for layout consistency
• Creating stylistic reflections or duplicates
• Aligning elements in symmetrical designs

Flip horizontally or vertically#

Use the flip/horizontal and flip/vertical properties to control mirroring. They are boolean properties and have helper functions defined. All flips are around the center point of a block.

try engine.block.setFlipVertical(imageBlock, flip: true)
try engine.block.setFlipHorizontal(imageBlock, flip: true)

To determine if a block has been flipped you can query the properties or use helper functions.

let isFlippedHorizontally = try engine.block.getFlipHorizontal(imageBlock)
let isFlippedVertically = try engine.block.getFlipVertical(imageBlock)

Flip multiple elements together#

Group blocks and apply flip to the group:

let groupId = try engine.block.group([imageId, textId])
try engine.block.setFlipHorizontal(groupId, flip: true)

To remove any flip applied:#

If you want to remove the flip, set the property to false.

try engine.block.setFlipVertical(block, flip: false)

Applying the flip multiple times does not flip the image back to its original orientation. This code will result in a flipped block.

try engine.block.setFlipVertical(block, flip: true)
try engine.block.setFlipVertical(block, flip: true)

Lock or constrain flipping (optional)#

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

try engine.block.setScopeEnabled(block, key: "layer/flip", 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#