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.
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.
To resize your product, use the resize command. This transform has the following parameters:
"product"
, "surfaces"
, "items"
, or "printArea"
."surfaces"
, "items"
, or "printArea"
.600
or "30%"
.600
or "30%"
.true
, resets the content of resized image placeholders.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);
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:
72
or "10%"
.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);
Now, let's look at the following examples of print products and the transform parameters that you can use when resizing them.
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 } };
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 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 } };
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 } };