Preview Devices

Last Updated: Jun 17, 2024
documentation for the dotCMS Content Management System

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.

Screenshot example of the Preview Device dropdown menu as it appears on the Demo Site.

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.

Content NamePreview Device
IconAny (devices_other or devices are good choices!)
Site or FolderSystem Host
WorkflowSystem Workflow

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.

Field NameData TypeRequiredUser SearchableSystem IndexedShow in List
Physical WidthWhole Number🔲🔲🔲🔲
Physical HeightWhole Number🔲🔲🔲🔲
CSS WidthWhole Number🔲
CSS HeightWhole Number🔲
Pixel RatioDecimal🔲🔲
Physical PPIWhole Number🔲🔲🔲🔲
CSS PPIWhole Number🔲🔲🔲🔲

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.

On this page


We Dig Feedback

Selected excerpt: