Template Composer Device Skins - BloomReach Experience - Open Source CMS

Template Composer Device Skins

Display channel in another device layout

The toolbar allows a webmaster to preview a channel as it would look like on another device (e.g. an iPad, iPhone, etc.). Our emulators allow users to refine the rendering for each device. By default the following device configurations are available:

  • desktop
  • iphone portrait
  • iphone landscape
  • ipad portrait
  • ipad landscape

Add a custom device

There are two ways to add custom devices:

  • resources on the classpath
  • a custom DeviceService implementation

The former one is quick and probably sufficient for most cases. The latter offers full control of the available definitions (and could, for instance, be used to store device definitions in the repository instead of on the classpath)

Resources on the classpath

The default device service implementation loads the list of available devices from the classpath location

org/onehippo/cms7/channelmanager/templatecomposer/deviceskins/devices/device-skins.txt

These plain text files contain a list of device IDs, one per line. Include such a file in the 'cms' module of your project to define additional, custom device IDs.

Example: add a device 'quasar_2'

First add the 'device-skins.txt' file to the 'cms' module of your project:

$ cd cms/src/main/resources/org/onehippo/cms7/channelmanager/templatecomposer/deviceskins/devices/

$ cat device-skins.txt

quasar_2

Second, add a resource bundle with that name should to the same directory as the 'device-skins.txt' file. The resource bundle defines the name and dimensions for the new device:

$ cat quasar_2.properties

name=Quasar landscape
background.width=913
scale.factor=0.75
viewport.height=373
viewport.width=777
viewport.x=32
viewport.y=153
top=5

Resource bundles for other languages only need to override the 'name' property.

Third, add a skin image for the new device. The skin image should be located in the sibling directory 'images':

org/onehippo/cms7/channelmanager/templatecomposer/deviceskins/images/quasar_2.png

It is also possible to use other locations/names with the 'image.location' property, but note that for limitless flexibility the device skin service approach is preferred.

The various dimension properties are explained in this image of the iphone_portrait device:

The 'top' property indicates the padding from the top. The 'scale.factor' determines the scale at which the channel should be rendered. This is e.g. necessary when the device is rendered at it's actual physical size and has a different pixel density than the user's monitor.

Custom DeviceService implementation

Create your own DeviceService implementation for full control over the persistence of available skins. Make sure that the service id property 'deviceskins.service.id' of the device manager (/hippo:configuration/hippo:frontend/cms/hippo-channel-manager/templatecomposer-device-combo) corresponds to the id that the service is registered under.

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?