How to change the display size of an Image, Video or Document in a workspace using APIs

[Vladster]

If you want to change the display size of an Image, Video, or Document in a workspace using v3 APIs, you will need to change the scale of the element. You cannot set their width or height directly after they are crated. Only at creation time you can set directly the width and height of these elements.

The property to change is:

• REST APIs: PATCH /v3/workspaces/{workspace}/elements/{id}, changing the transform > scale property
• GraphQL APIs: updateImage, updateVideo or updateDocument mutations, changing the transform > scale property

The steps to follow:

1. Determine the width and height values of the element you want to change.
   For example, use these image values:

{
   "data": {
       "id": "61d8d88e792794312fab4b15",
       "zIndex": 25,
       "transform": {
           "x": 200,
           "y": 200,
           "scaleX": 0.2197265625,
           "scaleY": 0.22005208333333334
       },
       "pinned": false,
       "comments": [],
       "boundingBox": {
           "x": 200,
           "y": 200,
           "width": 450,
           "height": 338
       },
       "attachments": [],
       "width": 2048,
       "height": 1536,
       "title": "16.jpg",

2. To resize to a specific dimension, for example, width: 1200, calculate the scale factor needed to specify for scale:

• 
• For this example, it would be

Note: Either width or height can be used for calculating the new scale ratio.

3. Once the new scale ratio is calculated, it can be set for the image:

• REST API call:
  • PATCH /v3/workspaces/{workspace}/elements/{id}
  • Request body:

{
   "type": "Image",
   "transform" : {"scale": 0.5859375}
}

• GraphQL API mutation:
  • Mutation:

mutation myUpdateImage($ws: String! $scale:Float! $imageID: String!) {
  updateImage( workspaceId:$ws id:$imageID input:{
      transform:{
          scale:$scale
      }
  })
  {id}
}

• Variables:

{
   "ws": "<workspaceID>",
   "scale": 0.5859375,
   "imageID" : "<elementId>"
}

4. Now the image has the specific dimensions specified in the workspace.
5. This can be confirmed by inspecting the values of the element;, specifically the values of the boundingBox field, e.g.:

 "boundingBox": {
           "x": 200,
           "y": 200,
           "width": 1200,
           "height": 900
       },