Preview Devices

A Preview Device is a special Content Type dotCMS uses to simplify responsive design within the three Page viewing modes. Once the Content Type is defined, each contentlet of that type will represent a different device, listed in the dropdown menu over Edit Mode, Preview Mode, or Live Mode.

Defining the Content Type

The Preview Device Content Type is included by default in dotCMS 23.08 and later, but can be created easily in prior versions. Begin by creating a new Content Type; select Content to begin with the most generic — i.e., blank — starting schema. In the initial Edit Content dialog, set the parameters as they appear in the table below. All fields not listed below may be left blank.

Note: The Content Name field may be changed later, after the Content Type is created. However, it must be set to Preview Device exactly at the time of creation, which will give the Content Type the required immutable variable of previewDevice. Once it possesses that characteristic, it may be renamed freely.

Click the Create button to continue.

In the resultant blank Content Type, define eight Text Fields as detailed in the table below. Any fields unlisted, such as Default Value or Hint, may be left blank in all cases.

Note: As with the Content Name field, the above field names may be edited once the relevant immutable variables (e.g., cssWidth, cssPpi, etc.) are established through the input values given.

Adding New Devices

To add a new device, simply create and publish a new piece of Preview Device content. Each new contentlet will be automatically recognized and added to the list when using the Page viewing modes.

Devices will appear in the dropdown menu over the Page viewing modes, sorted alphabetically.