Side by Side Migration

Migrate from the v1 API's /pie/psdService/sideBySide endpoint to the v2 API.

Overview

The Side by Side convenience API creates a simple, clean before/after comparison with a branded logo overlay. This guide shows how to migrate from V1's /pie/psdService/sideBySide to V2's /v2/execute-actions.

Key Features:

Required Images

This action requires THREE images total:

  1. Base Image (provided in image.source): The original/before image
  2. Additional Image 0 (__ADDITIONAL_IMAGES_0__): The edited/after image
  3. Additional Image 1 (__ADDITIONAL_IMAGES_1__): Your product logo

V1 API (Deprecated)

Endpoint: /pie/psdService/sideBySide

curl -X POST \
  https://image.adobe.io/pie/psdService/sideBySide \
  -H "Authorization: Bearer $token" \
  -H "x-api-key: $apiKey" \
  -H "Content-Type: application/json" \
  -d '{
  "inputs": [
    {
      "href": "<ORIGINAL_IMAGE_URL>",
      "storage": "external"
    }
  ],
  "outputs": [
    {
      "href": "<OUTPUT_URL>",
      "storage": "external",
      "type": "image/jpeg"
    }
  ]
}'

V2 API (Current)

Endpoint: /v2/execute-actions

curl -X POST \
  https://photoshop-api.adobe.io/v2/execute-actions \
  -H "Authorization: Bearer $token" \
  -H "x-api-key: $apiKey" \
  -H "Content-Type: application/json" \
  -d '{
  "image": {
    "source": {
      "url": "<ORIGINAL_IMAGE_URL>"
    }
  },
  "options": {
    "additionalImages": [
      {
        "source": {
          "url": "<EDITED_IMAGE_URL>"
        }
      },
      {
        "source": {
          "url": "<PRODUCT_LOGO_URL>"
        }
      }
    ],
    "actions": [
      {
        "source": {
          "content": "[{\"_obj\":\"set\",\"_target\":[{\"_property\":\"background\",\"_ref\":\"layer\"}],\"layerID\":2,\"to\":{\"_obj\":\"layer\",\"mode\":{\"_enum\":\"blendMode\",\"_value\":\"normal\"},\"opacity\":{\"_unit\":\"percentUnit\",\"_value\":100.0}}},{\"_obj\":\"canvasSize\",\"horizontal\":{\"_enum\":\"horizontalLocation\",\"_value\":\"center\"},\"width\":{\"_unit\":\"percentUnit\",\"_value\":200.0}},{\"_obj\":\"set\",\"_target\":[{\"_property\":\"selection\",\"_ref\":\"channel\"}],\"to\":{\"_enum\":\"ordinal\",\"_value\":\"allEnum\"}},{\"_obj\":\"align\",\"_target\":[{\"_enum\":\"ordinal\",\"_ref\":\"layer\"}],\"alignToCanvas\":false,\"using\":{\"_enum\":\"alignDistributeSelector\",\"_value\":\"ADSLefts\"}},{\"ID\":3,\"_obj\":\"placeEvent\",\"freeTransformCenterState\":{\"_enum\":\"quadCenterState\",\"_value\":\"QCSAverage\"},\"null\":{\"_kind\":\"local\",\"_path\":\"__ADDITIONAL_IMAGES_0__\"},\"offset\":{\"_obj\":\"offset\",\"horizontal\":{\"_unit\":\"pixelsUnit\",\"_value\":0.0},\"vertical\":{\"_unit\":\"pixelsUnit\",\"_value\":0.0}}},{\"_obj\":\"set\",\"_target\":[{\"_property\":\"selection\",\"_ref\":\"channel\"}],\"to\":{\"_enum\":\"ordinal\",\"_value\":\"allEnum\"}},{\"_obj\":\"align\",\"_target\":[{\"_enum\":\"ordinal\",\"_ref\":\"layer\"}],\"alignToCanvas\":false,\"using\":{\"_enum\":\"alignDistributeSelector\",\"_value\":\"ADSRights\"}},{\"_obj\":\"set\",\"_target\":[{\"_property\":\"selection\",\"_ref\":\"channel\"}],\"to\":{\"_enum\":\"ordinal\",\"_value\":\"none\"}},{\"_obj\":\"imageSize\",\"constrainProportions\":true,\"interfaceIconFrameDimmed\":{\"_enum\":\"interpolationType\",\"_value\":\"automaticInterpolation\"},\"scaleStyles\":true,\"width\":{\"_unit\":\"pixelsUnit\",\"_value\":1195.0}},{\"_obj\":\"canvasSize\",\"horizontal\":{\"_enum\":\"horizontalLocation\",\"_value\":\"left\"},\"relative\":true,\"width\":{\"_unit\":\"pixelsUnit\",\"_value\":5}},{\"_obj\":\"set\",\"_target\":[{\"_property\":\"selection\",\"_ref\":\"channel\"}],\"to\":{\"_enum\":\"ordinal\",\"_value\":\"allEnum\"}},{\"_obj\":\"align\",\"_target\":[{\"_enum\":\"ordinal\",\"_ref\":\"layer\"}],\"alignToCanvas\":false,\"using\":{\"_enum\":\"alignDistributeSelector\",\"_value\":\"ADSRights\"}},{\"ID\":5,\"_obj\":\"placeEvent\",\"freeTransformCenterState\":{\"_enum\":\"quadCenterState\",\"_value\":\"QCSAverage\"},\"null\":{\"_kind\":\"local\",\"_path\":\"__ADDITIONAL_IMAGES_1__\"},\"offset\":{\"_obj\":\"offset\",\"horizontal\":{\"_unit\":\"pixelsUnit\",\"_value\":0.0},\"vertical\":{\"_unit\":\"pixelsUnit\",\"_value\":0.0}}},{\"_obj\":\"set\",\"_target\":[{\"_property\":\"selection\",\"_ref\":\"channel\"}],\"to\":{\"_enum\":\"ordinal\",\"_value\":\"allEnum\"}},{\"_obj\":\"align\",\"_target\":[{\"_enum\":\"ordinal\",\"_ref\":\"layer\"}],\"alignToCanvas\":false,\"using\":{\"_enum\":\"alignDistributeSelector\",\"_value\":\"ADSRights\"}},{\"_obj\":\"align\",\"_target\":[{\"_enum\":\"ordinal\",\"_ref\":\"layer\"}],\"alignToCanvas\":false,\"using\":{\"_enum\":\"alignDistributeSelector\",\"_value\":\"ADSTops\"}},{\"_obj\":\"set\",\"_target\":[{\"_property\":\"selection\",\"_ref\":\"channel\"}],\"to\":{\"_enum\":\"ordinal\",\"_value\":\"none\"}},{\"_obj\":\"transform\",\"freeTransformCenterState\":{\"_enum\":\"quadCenterState\",\"_value\":\"QCSAverage\"},\"offset\":{\"_obj\":\"offset\",\"horizontal\":{\"_unit\":\"pixelsUnit\",\"_value\":-20.0},\"vertical\":{\"_unit\":\"pixelsUnit\",\"_value\":20.0}}},{\"_obj\":\"flattenImage\"}]",
          "contentType": "application/json"
        }
      }
    ]
  },
  "outputs": [
    {
      "destination": {
        "url": "<OUTPUT_URL>"
      },
      "mediaType": "image/jpeg"
    }
  ]
}'

What This Action Does

The action performs 19 streamlined steps:

  1. Set Background Layer - Sets background layer properties and opacity
  2. Expand Canvas - Doubles canvas width (200%) to fit both images
  3. Select All - Selects entire canvas
  4. Align Original Left - Positions original image on the left side
  5. Place Edited Image - Places the edited image (__ADDITIONAL_IMAGES_0__)
  6. Select All - Selects entire canvas again
  7. Align Edited Right - Positions edited image on the right side
  8. Deselect - Clears selection
  9. Resize to 1195px - Standardizes output width to exactly 1195.0 pixels
  10. Add Small Padding - Adds 5-pixel padding on the left for visual balance
  11. Select All - Selects entire canvas
  12. Align Right - Ensures proper alignment
  13. Place Logo - Places the product logo (__ADDITIONAL_IMAGES_1__)
  14. Select All - Selects entire canvas
  15. Align Logo Right - Aligns logo to the right edge
  16. Align Logo Top - Aligns logo to the top edge
  17. Deselect - Clears selection
  18. Offset Logo - Moves logo 20px left and 20px down from corner
  19. Flatten Image - Merges all layers into final output

Key Difference from Split View

Side by Side is the simpler alternative to Split View:

Feature
Side by Side
Split View
Complexity
19 steps
34 steps
Masking
No
Yes (complex transparency masks)
Divider Line
No
Yes (5px white line)
Output Width
1195.0px
1200px
Processing Time
Faster
Slower
Use Case
Clean, simple comparisons
Professional demos with clear separation

Choose Side by Side when:

Choose Split View when:

Additional Images Placeholder Mapping

In V2, you explicitly provide additional images and they're referenced in the ActionJSON via placeholders:

Important: The order in additionalImages array must match placeholder indices!

{
  "options": {
    "additionalImages": [
      {
        "source": {"url": "<EDITED_IMAGE>"}  // Index 0
      },
      {
        "source": {"url": "<LOGO_IMAGE>"}    // Index 1
      }
    ]
  }
}

Migration Checklist

Migration Examples

Basic Migration

V1:

{
  "inputs": [{"href": "s3://before.jpg", "storage": "external"}],
  "outputs": [{"href": "s3://comparison.jpg", "type": "image/jpeg"}]
}

V2:

{
  "image": {"source": {"url": "s3://before.jpg"}},
  "options": {
    "additionalImages": [
      {"source": {"url": "s3://after.jpg"}},
      {"source": {"url": "s3://logo.png"}}
    ],
    "actions": [{
      "source": {
        "content": "[{...exact ActionJSON...}]",
        "contentType": "application/json"
      }
    }]
  },
  "outputs": [{"destination": {"url": "s3://comparison.jpg"}, "mediaType": "image/jpeg"}]
}

With PNG Output

{
  "image": {"source": {"url": "https://before.png"}},
  "options": {
    "additionalImages": [
      {"source": {"url": "https://after.png"}},
      {"source": {"url": "https://logo.png"}}
    ],
    "actions": [{"source": {"content": "[...]", "contentType": "application/json"}}]
  },
  "outputs": [{
    "destination": {"url": "https://output.png"},
    "mediaType": "image/png",
    "compression": "medium"
  }]
}

Use Cases

Social Media Content

E-Commerce

Portfolio & Marketing

Tips and Best Practices

Image Preparation

Logo Design

Output Considerations

Performance

Additional Resources

Support

For questions or issues: