TrophyCustomer's Canvas is honored with a 2020 InterTech Technology Award! Learn more 

StaticImage

Important! This widget was removed. You can use the image-carousel widget instead of static-image.

Using this widget, you can display a single image by specifying a URL in its params.

General info

  • type - static-image

Params

  • url - a URL to the image to display. It can be a static URL, the output from Customer's Canvas or Ajax widget.
  • timestamp - a boolean value that specifies whether to automatically add a timestamp to an image every time you set the URL. It may help if it loads an image from the browser cache every time.

Examples

Displaying a static image

{
    "name": "image",
    "type": "static-image",
    "params": {
        "url": "http://www.example.com/my-image.jpg"
    }
}

Displaying the result of PsdWebService

In combination with the Ajax widget, it can be used to update the image dynamically, based on the option values.

For example, assume that you want to use PsdWebService and pass a text color to the layer called Text.

{
    "widgets": [
        {
            "name": "color-option",
            "type": "option",
            "params": {
                // ... color option params
            }
        }
        {
            "name": "img-request",
            "type": "ajax",
            "params": {
                "url": "http://example.com/psd/api/preview",
                "lock": "preview",
                "method": "POST",
                "request": {
                    "template": "designs/my-design1.psd",
                    "format": "png",
                    "data": {
                        "Text": {
                            "type": "text",
                            "color": "{{$['color-option']._.color}}"
                        }
                    }
                }
            }
        },
        {
            "name": "preview",
            "type": "static-image",
            "params": {
                "url": "{{$['img-request'].response}}"
            }
        }
    ]
}

Using StaticImage with Customer's Canvas Web API

Customer's Canvas includes not just an editor, but also a Web API to personalize designs on a server. It can be used along with this widget as well.

Unlike PsdWebService, Customer's Canvas Web API returns more complicated JSON structure as a result. The output may look like this:

[{
    "ProofImageUrls":[["https://example.com/api/rendering/GetProofImage/default/408693E1872EC277EA28E90E481B2F72/0_0.png"],
                      ["https://example.com/api/rendering/GetProofImage/default/408693E1872EC277EA28E90E481B2F72/1_0.png"]],
    "StateId":"408693E1872EC277EA28E90E481B2F72",
    "HiResUrls": ["https://example.com/api/rendering/GetHiResOutput/default/408693E1872EC277EA28E90E481B2F72/-1_-1.pdf"]
},
{
    "ProofImageUrls":[["https://example.com/api/rendering/GetProofImage/default/4C042925C4A39E45F886D67B0DE5B4E5/0_0.png"],
                     ["https://example.com/api/rendering/GetProofImage/default/4C042925C4A39E45F886D67B0DE5B4E5/1_0.png"],
                     ["https://example.com/api/rendering/GetProofImage/default/4C042925C4A39E45F886D67B0DE5B4E5/2_0.png"]],
    "StateId":"4C042925C4A39E45F886D67B0DE5B4E5",
    "HiResUrls":["https://example.com/api/rendering/GetHiResOutput/default/4C042925C4A39E45F886D67B0DE5B4E5/-1_-1.pdf"]
}]

However, even this kind of output is not a problem - you can handle all these nested multidimensional arrays without problems.

{
    "widgets": [
        {
            "name": "color-option",
            "type": "option",
            "params": {
                // ... color option params
            }
        }
        {
            "name": "img-request",
            "type": "ajax",
            "params": {
                "url": "http://example.com/cc/api/Preview/GeneratePreview",
                "lock": "preview",
                "method": "POST",
                "headers": {
                    "X-CustomersCanvasAPIKey": "your-api-key"
                },
                "request": {
                    "productDefinitions": [{
                        "surface": ["design_1"]
                    }],
                    "userId": "1234",
                    "itemsData": {
                        "Text": {
                            "color": "{{$['color-option']._.color}}"
                        }
                    }
                }
            }
        },
        {
            "name": "preview",
            "type": "static-image",
            "params": {
                "url": "{{$['img-request'].response[0].ProofImageUrls[0][0]}}"
            }
        }
    ]
}