🖼️Dynamic Design Previews
The Pixfizz platform exposes an API endpoint that makes it possible to preview pages from a design without creating a project. Only relevant when integrating Pixfizz with a 3rd-party CMS.
Formats
The previews are available in JPG, WebP, and SVG variants. SVG previews are recommended because they offer better performance and often look more crisp at small sizes.
SVG previews reference external images and therefore cannot be used in a src attribute of an <img> element. Use an <object> element instead. Example:
<object type="image/svg+xml" data="/v1/themes/1/preview/preview.svg?width=800"></object>URL Parameters
Design preview URLs have the following form:
/v1/themes/<theme-id>/preview/<page-name>.<extension>?<query-params>theme-id is the numeric ID of the design, page-name is the name of the page as given in the pixfizz admin, and extension is one of jpg, webp, or svg.
query-params allow you to request a different size of the image (default is 100px) and toggle element substitutions on the page through variant and template options.
The supported query parameters are:
widthheightvariants[<variant-code>]template_options[<option-code>]
Variants and template options of type text accept the input text and multiple choice variants/template options expect the code of the selected option.
Examples
This simple example returns a 800px wide preview image:
https://staging.pixfizz.com/v1/themes/132496/preview/card.jpg?width=800This example returns the same 800px wide page preview, but toggles some template options to trigger element substitutions:
https://staging.pixfizz.com/v1/themes/132496/preview/card.jpg?width=800&template_options[name]=Kramer&template_options[text-colour]=fog&template_options[base-colour]=espressoLast updated