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:
- 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
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
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':
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.