Bloomreach

Bloomreach Documentation version

Configure Device Preview

Introduction

Goal

Configure the different viewport widths available in the Experience manager's device preview.

Background

The Experience manager allows CMS users to preview the pages of a channel for a number of viewport widths, in order to give them an idea of how their website will look on devices other than a monitor, such as tablets or smartphones. The Experience manager provides the following default set of viewport widths:

  • Any device (responsive, unbound, page reflows when resizing the window or opening side panels)
  • Desktop (defaults to 1280px)
  • Tablet (defaults to 720px)
  • Smartphone (defaults to 320px)

Using the Console, it is possible to configure the available and default viewport widths per channel.

Configure Viewport Widths per Channel

The default viewport widths "desktop", "tablet" and "phone" can be overridden on a per-channel basis. In version 14.3.0 and newer, it is also possible to configure different icons and add custom viewport widths. Viewport widths are configured in the multi-valued hst:devices property of a channel's hst:channel node.

Using JSON Blobs

This feature is available since 14.3.0.

In version 14.3.0 and newer, the hst:devices property accepts JSON blobs with the following keys:

Key Description Example
id String identifier of the viewport width.  "tablet"
width Viewport width in pixels. 1024
icon Icon reference from Material Design Icons webfont. Optional when overriding a default viewport width. "mdi-watch"

The example below makes the following changes to the available viewport widths in the "myproject" preview channel:

  • Override the default "tablet" viewport width and set it to 1024 pixels.
  • Add a custom viewport width "watch", 224 pixels wide and using the "mdi-watch" icon.
/hst:myproject/hst:configurations/myproject-preview/hst:workspace/hst:channel:
  hst:devices: ['{ "id": "tablet", "width": 1024 }', '{ "id": "watch", "width": 224,
      "icon": "mdi-watch" }']

Using ID-Width Pairs

In all 14.x versions, the hst:devices property accepts ID-width pairs, where the width is postfixed with "px" (see example below). ID-width pairs only allow overriding of the default viewport widths "desktop", "tablet" and "phone". It is not possible to override icons or add custom viewport widths using ID-width pairs. 

For example, to set the viewport width for the "tablet" option of channel "myproject" to 768px, add the following property value:

/hst:myproject/hst:configurations/myproject-preview/hst:workspace/hst:channel:
  hst:devices: [ ..., tablet:768px ]

Note that /hst:myproject/hst:configurations/myproject-preview is only created after you open the channel preview for the first time.

To make the change permanent, add it to your repository data module using a YAML definition.

Configure a Default Viewport Per channel

This feature is available since 14.3.0.

When opening a channel in the Experience manager, the responsive "Any device" viewport is selected by default. This can be customized per channel by adding a property hst:defaultdevice to the channel's hst:channel node and specifying one of the available devices. By default, these are:

  • desktop
  • tablet
  • phone

Example:

/hst:myproject/hst:configurations/myproject-preview/hst:workspace/hst:channel:
  hst:defaultdevice: tablet
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?