resize

• 1 minute to read

This command resizes the whole product or only specified items.

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. For more details, refer to the IFrame API topics.

Params

• targetType - an object to be resized: "product", "surfaces", "items", or "printArea".
• targets - an array of names 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: Fit (0, default), Fill (1), Arbitrary (2), Original (3).
• containerOptions - parameters to resize a single container by name.

For the complete list of parameters, you can refer to IDesignEditorDefinitionResizeItems.

Example of the config

  {
    "type": "design-editor", 
    "name": "editor",
    "params": {
      "initial": { ... }, 
      "resize": {
        "resizeParams": {
          "targetType": "product",
          "width": "1000",
          "height": "1000",
          "defaultOptions": {
            "resize": 0,
            "resetPlaceholderContent": false
          },
          "containerOptions": {
            "Background": {
              "resize": 2,
              "resetPlaceholderContent": true
            }
          }
        }
      }
    }
  }