Overview

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.

API

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

Image Object

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).

An Example JSON Object

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"
		}
	]
}

An Example JSONP Response

1
callback({ "images": [ ... ] });

Personalise-iT App Setup

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:

https://g3d-app.com/s/app/acp3_2/en_GB/default.html#p=1007644&r=2d-canvas&g=https://example.com/gallery