Test Enterprise-Class Web CMS Scrivito Free for 30 Days
Test Scrivito Free for 30 Days
New in 1.25.0

configurePreviewSizes(previewSizes)

Defines custom preview sizes for use in Scrivito’s editing interface.

Scrivito’s sidebar offers several preview sizes for selection. They enable editors to see how the website would look on devices with smaller screens. If custom preview sizes are provided, they replace the built-in ones.

Scrivito.configurePreviewSizes([{title: "Small smartphone", width: 240}])

Params

  • previewSizes (Array) – the preview sizes to provide. Each array element is expected to be an object containing the following:
    • title (String) – the title of the preview size. 
    • width (Number) – the width of the preview size in pixels (optional). If not provided, the full width is used.
    • description (String) – the description of the preview size (optional).
    • icon (String) – the URL of an icon image (optional).

Throws

An error is thrown if
  • the previewSizes array is empty,
  • the provided preview sizes do not have a unique width specified as a positive integer.

Example

const customPreviewSizes = [ { title: 'iPhone 11', width: 414, description: 'iPhone 11 Pro Max', }, { title: 'iPad 12.9 (portrait)', width: 1024, }, { title: 'Smartwatch', width: 184, icon: 'https://img.icons8.com/material-outlined/24/ffffff/apple-watch.png', }, ] Scrivito.configurePreviewSizes(customPreviewSizes)