This page is aimed at developers who wish to use the external gallery feature of our Personalise-iT Personalisation apps to allow the user to use images that are hosted on a 3rd party website.
JSONP is necessary to enable cross-domain communication between the Personalise-iT app iframe and the external website.
Note that any images that you expose must be available publicly. Artwork generation will fail if your image URLs suddenly become invalid.
To enable a Personalise-iT app to pull images from an external source, a JSONP API must first be created.
The API must return the following JSON structure:
| Field | Type | Description |
|---|---|---|
| images | array | An array of image objects |
| Field | Type | Description |
|---|---|---|
| name | string | A short description of the image |
| thumbnail_url | string | An absolute URL to a thumbnail of the image. |
| image_url | string | An absolute URL to the full sized version of the image (used for artwork generation). |
| preview_url | string | An absolute URL to a smaller or lower quality version of the image (used only for the onscreen product preview). |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"images": [
{
"name": "Apple",
"thumbnail_url": "https://example.com/thumbnails/apple.png",
"image_url": "https://example.com/apple.png",
"preview_url": "https://example.com/apple-preview.png"
},
{
"name": "Pear",
"thumbnail_url": "https://example.com/thumbnails/pear.png",
"image_url": "https://example.com/pear.png",
"preview_url": "https://example.com/pear-preview.png"
}
]
}
1
callback({ "images": [ ... ] });
It is necessary to tell the Personalise-iT personalisation app to use your API as an external source for images. This can be done by passing the URL for your API to the app iframe via the g URL parameter. For example: