Resizing designs

4 minutes to read

When creating product templates, you may want to support several product sizes. Instead of making many similar templates that only differ in their size, you can use the IFrame API to resize your products right in the editor.

This topic describes how you can use the command manager to resize your products and translate design elements. You can also find examples of these commands for common scenarios and download a code sample.

The Command Manager

To change the product size or position of design elements, you can execute the transform through the Editor.CommandManager as follows:

editor.commandManager.execute(commandName, arguments);

Here, you need to pass either "resize" or "translateItems" as the commandName and arguments with transform parameters.

Let's look at how you can execute the resize and translate commands.

Resizing Products

To resize your product, use the resize command. This transform has the following parameters:

targetType - an object to be resized: "product", "surfaces", "items", or "printArea".
targetIds - an array of identifiers when you resize "surfaces", "items", or "printArea".
height - the target height, in either points or percent relative to the print area. For example, 600 or "30%".
width - the target width, in either points or percent relative to the print area. For example, 600 or "30%".
defaultOptions.resetPlaceholderContent - if true, resets the content of resized image placeholders.
defaultOptions.resize - the type defining how the original bounding rectangle should fit the target rectangle:
- Arbitrary - disproportionately resizes items to fit the target rectangle. Note that point text and curved text cannot be arbitrary resized.
- Fit - proportionally resizes items to fit the target rectangle.
- Fill - proportionally resizes items to fill the target rectangle.
- Original - resizes only the canvas. Items remain unchanged in their positions at the center of the resized canvas.

Products, surfaces, and print areas are resized relative to the upper-left corner of the surface, whereas items are resized relative to the center of their bounding rectangle.

In the following example, we apply the Original mode to all containers and resize the canvas to the A4 paper size.

let editor = await CustomersCanvas.IframeApi.loadEditor(
    iframe, productDefinition, editorConfig
);

let args = {
    targetType: "product",
    targetIds: [],
    width: 595,
    height: 842,
    defaultOptions: { 
        resize: ResizeRectangleType.Original,
        resetPlaceholderContent: false
    }
};

editor.commandManager.execute("resize", args);

Moving Design Elements

You can only apply the translate transform to design elements. In the arguments, pass an array of their identifiers and the distance to move them:

itemIds - an array of item identifiers.
translateX - the distance to translate the items along the X-axis, in either points or percent relative to the print area. For example, 72 or "10%".
translateY - the distance to translate the items along the Y-axis, in either points or percent relative to the print area. For example, 72 or "10%".

In the following example, we move the selected items 1.5 inches horizontally.

let editor = await CustomersCanvas.IframeApi.loadEditor(
    iframe, productDefinition, editorConfig
);

let ids = (await editor.getSelectedItems()).map(item => item.id);
    
let args = {
    translateX: 108,
    translateY: 0,
    itemIds: ids
};

editor.commandManager.execute("translateItems", args);

Examples

Now, let's look at the following examples of print products and the transform parameters that you can use when resizing them.

Photos

For photo products, the composition is based on a photo placeholder and can be resized with changing proportions. This placeholder may even be a single element (for example, a photo card) and can be arbitrary resized. The content of this placeholder must maintain its proportions. When this product contains bounded text elements, their bounds may arbitrarily change, while the font size does not change. Other elements should be proportionally resized without overlapping.

let product = await editor.getProduct();
let args = {
    targetType: "surfaces",
    targetIds: [product.currentSurface.id],
    width: "130%",
    height: "120%",
    defaultOptions: {
        resize: ResizeRectangleType.Fill,
        resetPlaceholderContent: true
    }
};

Flyers

The design elements of a flyer - a simple paper product - must fit the target size of the product, while the background must fill the entire product. Unlike photo products, it is important to maintain the transforms of the placeholder content. If we turn A4 into A5 and the placeholder is halved, then its content should also be halved.

let args = {
    targetType: "product",
    targetIds: [],
    width: "50%",
    height: "50%",
    defaultOptions: {
        resize: ResizeRectangleType.Fit,
        resetPlaceholderContent: false
    },
    containerOptions: {
        "Background": {
            resize: ResizeRectangleType.Arbitrary
        }
    }
};

Stickers

Stickers often consist of images, shapes, and simple text. Mockups can represent the sticker form. All elements of the form can be disproportionately resized, and the design must fit the form.

let args = {
    targetType: "product",
    targetIds: [],
    width: 720,
    height: 108,
    defaultOptions: {
        resize: ResizeRectangleType.Fit
    }
};

Canvas Size

You may want to increase the page size in the editor and leave the design elements unchanged. In this case, you can resize the product or a single surface in the Original mode.

let args = {
    targetType: "product",
    targetIds: [],
    width: "200%",
    height: "200%",
    defaultOptions: {
        resize: ResizeRectangleType.Original
    }
};