Skip to main content

Preview Templates

Preview templates allow you to configure the image parameters used in attributes. By applying a template to an attribute of type "Image" or "Image Group," you will get images standardized according to the specifications set in the preview template. This is convenient if your project's design is sensitive to image sizes. By configuring the preview template, you can modify the image parameters that the end user will see.

To get started with preview templates, open the "Settings" section and then navigate to the "Preview Templates" subsection. In this section, you will find a list of already created templates, as well as a form for creating new ones.

Creation​

In the creation form, specify:

  • Name - A non-unique string.
  • Marker - A unique string.

After filling in the details, click the "Create" button.

Configuration​

Select the preview template you want to configure from the general list and click on the gear icon Optimize images to enter edit mode. To create preview parameters, click the "Add" button. You can configure the format for vertical, horizontal, and square images.

In the corresponding forms, fill in:

  • Width and Height (Square Side) - Dimensions in pixels that the image will fit into.
  • Centering Type - The line that will become the central axis when compressing the image.

Default Template​

After creating several sets within one template, you can switch the default template. It is used to display previews in the CMS.

Deletion​

Select the preview template you want to delete from the general list and click on the delete icon Edit to enter edit mode. Confirm the action in the dialog box.

LQTP​

Each preview template consists of an array of two elements:

  • Thumbnail (base64 WebP)

Format: WebP (optimized for fast loading). Size: no more than a few hundred bytes. It is embedded directly into the object as a base64-URI, which speeds up rendering while the full image is still loading.

  • Generated Preview The main preview image that replaces the thumbnail after it has fully loaded.

Advantages:

  • Instant thumbnail display (no additional HTTP requests).
  • Smooth transition to the full preview after loading.
  • Traffic savings due to the use of compressed WebP.

Example structure:

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Thumbnail (base64 WebP)  
    "https://example.com/full-preview.jpg" // Full preview  
  ]
}

This approach enhances the user experience, especially on slow internet connections.

You can learn more about LQTP here. You can also watch the video.