Insert Images

Insert Images Using the UI#

CE.SDK’s UI provides an image tool for uploading images from device sources onto the canvas. There are three upload options:

1. The Upload Menu#

Select Upload > Add File to insert images from your machine.

2. The Images Menu#

Select Images > Add Files to insert images from your computer.

3. Drag and Drop#

Drag and drop images from your device onto the canvas.

Supported Image Sources#

You can upload images from:

• Your device via file picker.
• Remote sources (via asset library integration ).

Once inserted, you can visually edit the image using different methods:

• Move
• Resize
• Crop
• Rotate
• Stack

You can also customize the user interface.

Automate Image Insertion#

You can insert images into a scene directly using JavaScript. This is useful for apps with:

• Automation
• Batch workflows
• Logic-driven design experiences

To do so, you need to:

• Add the CreativeEngine to your stack.
• Configure CreativeEngine with your license key.

Next, you start creating and configuring blocks using the engine methods.

JavaScript Examples#

These code examples show you how to use CreativeEngine methods to insert image blocks into scenes.

1. Create a Graphic Block:#

let imageBlock = try engine.block.create(.graphic)

By creating a graphic block, you’re allocating a container that can hold fills, shapes, text, and transformation properties.

2. Set the Image’s Properties#

Set the image’s shape by creating a rectangular shape block in the engine. For example, the following line creates a rectangular shape using the BlockAPI:

let shape = try engine.block.createShape(.rect)
try engine.block.setShape(imageBlock, shape: shape)

Allocate a new image fill object and specify the image source. For example, the following code sets the source to an IMG.LY CDN URI, instructing the engine to download and render the image:

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)

3. Optional: Add a Filtering Tag#

Optionally, you can set the kind of block. This lets you query or filter blocks later.

try engine.block.setKind(imageBlock, kind: "image")

4. Add the Image to the Scene#

Insert the graphic block into the page to render the image:

let page = try engine.block.find(byType: .page).first!
try engine.block.appendChild(page, child: imageBlock)

Next Steps#

After inserting an image, you can:

• Edit and transform the image.
• Apply filters and effects .
• Export your design .