User Manual Quickstart General Concepts Frame Features Resources Style Reference Change Log Glossary Acknowledgements Api Reference Authorization Iframe Api Js Api Getting Started Load options Load in Headless mode Form Fields Access Save and Load Work Creating a Thumbnail Image Backend Api

Creating a Thumbnail Image

After the buyer has put the design to the shopping basket you might want to retrieve a small image of the current layout. Do get a URL of such a “Thumbnail” you can call:

const fileName = 'thumb_' + new Date().getTime() + '.png';
const documentName = '';
const width = 400; // max is 400
const height = 400; // max is 400

  .renderFirstPageImage(fileName, documentName, width, height)
  .then((thumbnailUrl) => {;

fileName: has to be set, so you can put the basket ID here to override an existing image.

documentName: can be set if you for example want a thumbnail of a specific preview document. Otherwise the primary document will be taken. If you want to get a thumbnail of any existing preview document just pass “!PREVIEW!”. If no “preview”-document is found it falls back to the “primary” document and then to the first document of the template. You can see this in action on the “T-Shirt” example.

width: the maximum width of the thumbnail based on aspect ratio of the document the resulting thumbnail-width can smaller.

height: the maximum height of the thumbnail based on aspect ratio of the document the resulting thumbnail-height can smaller.

TIP: Press the Create Thumbnail Button to show a thumbnail of the current Template.

:warning: The thumbnail generation might take a couple of seconds. If you request the thumbnail when the buyer clicks continue - you need to show an overlay screen and wait for the call to finish before you unload the Printess editor!