@aurigma/ui-framework/docs/widgets/static-image.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

StaticImage
===========

_**Important!** This widget was removed. You can use the [image-carousel](image-carousel.md) 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](canvas.md) or [Ajax](ajax.md) 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

``` json
{
    "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](ajax.md), 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.

``` json
{
    "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](https://customerscanvas.com/docs/cc/web-api-for-rendering.htm) 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: 

``` json
[{
    "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. 

``` json
{
    "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]}}"
            }
        }
    ]
}
```