Insert Images

You can insert images into a scene using CE.SDK for iOS — either through the prebuilt UI or programmatically via Swift. This gives you flexibility to build interactive design workflows, enable user-generated content, or automate image placement based on logic or data.

Inserting Images Using the UI#

CE.SDK’s UI includes a built-in image tool that lets users add images from device sources directly onto the canvas. Once inserted, users can move, resize, crop, rotate, or stack images visually.

Image controls on the IMGLY UI

Supported image sources:

Photo Roll (Photos app)
Camera (device camera)
Image (project asset library)

In the Asset Library a user can add images from the Photos app, the camera or the Files app.

You can customize how the image tool is presented in the user interface.

Inserting Images Programmatically#

For apps with automation, batch workflows, or logic-driven design experiences, you can insert images into a scene using the blocks API and the graphics engine.

Here’s how to do it:

// 1. Create a graphic block
let imageBlock = try engine.block.create(.graphic)

// 2. Create a shape for the image
let shape = try engine.block.createShape(.rect)
try engine.block.setShape(imageBlock, shape: shape)

// 3. Create an image fill
let imageFill = try engine.block.createFill(.image)
try engine.block.setString(
    imageFill,
    property: "fill/image/imageFileURI",
    value: "https://cdn.img.ly/assets/example.jpg"
)
try engine.block.setFill(imageBlock, fill: imageFill)

// 4. (Optional) Set semantic kind to "image" for clarity
try engine.block.setKind(imageBlock, kind: "image")

// 5. Add image to the scene
let page = try engine.block.find(byType: .page).first!
try engine.block.appendChild(page, child: imageBlock)

The shape can be any of the supported shapes .rect, .star, etc and will mask the inserted image. The asset URI in step 3 can either be a remote URL or a local asset URI represented as a String.

When working with the asset catalog, you can apply an image that is an AssetResult either to the scene directly or to a block. In the code below assetList is an AssetQueryResult which is the result of a call to findAssets to get assets from an asset catalog.

guard let newAsset = assetList.assets.first else { return }

// Creates a new block that contains the image
let imageBlock = try await engine.asset.defaultApplyAsset(assetResult: newAsset)

// Applies the image to a block that already exists
try await engine.asset.defaultApplyAssetToBlock(assetResult: newAsset, block: someBlock)

Image Properties#

After inserting the image, you can modify the block’s layout properties using standard methods in the engine.block API.

Positioning#

Refer to the guide in the Transform Section for Move for more details and other options.

// Set X/Y position on the canvas (in absolute units)
try engine.block.setPositionX(imageBlock, value: 100)
try engine.block.setPositionY(imageBlock, value: 200)

Scaling#

Refer to the guide in the Transform Section for Scale for more details and other options.

// Uniform scale
try engine.block.setFloat(imageBlock, property: "transform/scale/x", value: 1.5)
try engine.block.setFloat(imageBlock, property: "transform/scale/y", value: 1.5)

// Non-uniform (stretching)
try engine.block.setFloat(imageBlock, property: "transform/scale/x", value: 2.0)
try engine.block.setFloat(imageBlock, property: "transform/scale/y", value: 1.0)

Rotation#

Refer to the guide in the Transform Section for Rotate for more details and other options.

// Rotate 45 degrees (in radians)
let degrees = 45.0
let radians = degrees * (.pi / 180)
try engine.block.setFloat(imageBlock, property: "transform/rotation", value: Float(radians))