Configuring Device Preview
Configure the types of devices available for users to edit and preview content in in the Devices.xml configuration file.
Procedure
- If you did not install when you installed the Content Manager:
- Access the SDL Web installation media.
- Navigate to the Content Manager\ directory.
- Double-click the executable SDLWeb85CM.exe.
- In the Advanced View of the Features pane, you need to make sure User Interfaces > Experience Manager > Device Preview is selected.
- Follow the instructions on the screen.
- On the Content Manager, access the
%TRIDION_HOME%\web\WebUI\Editors\DevicePreview\Configurationdirectory. - Open
Devices.xmlin a text editor. - The
Devices.xmlconsists of<device>sections defining the types of devices for which you want to be able to preview content:<device name="Apple iPhone 5" icon="device.appleiphone5"> <userAgent>Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25</userAgent> <orientation type="portrait"> <image> <fileName>AppleiPhone5_portrait.png</fileName> <width>221</width> <height>531</height> </image> <viewport> <width>187</width> <height>296</height> <top>80</top> <left>18</left> </viewport> </orientation> <orientation type="landscape"> <image> <fileName>AppleiPhone5_landscape.png</fileName> <width>465</width> <height>242</height> </image> <viewport> <width>332</width> <height>157</height> <top>27</top> <left>69</left> </viewport> </orientation> </device><device>- The device for which you want to emulate content:
-
Attribute Description nameThe name used to identify the device in the user interface. iconThe icon used to identify the device in the user interface. By default, icons are stored in
%TRIDION_HOME%\web\WebUI\Editors\DeviceEmulator\DeviceIcons <userAgent>-
The client application accessing the resource specified using the format:
Mozilla/[version] ([system and browser information]) [platform] ([platform details]) [extensions]. <orientation>-
Many devices allow users to rotate the device to view the content in landscape or portrait. If a device allows users to change the orientation, define two
<orientation>elements and set thetypeof one to landscape and thetypeof the other to portrait (and set the other elements and attributes accordingly). The first<orientation>defined in the configuration file is the default orientation for device. By default, tablet devices display landscape orientation and SmartPhones portrait. -
Attribute Values typelandscape
portrait
<image>- The image file depicting the simulated device and properties:
-
<fileName>—the name of the image file depicting the simulated device. If the image is located in a different directory, specify a relative path. By default, images are stored in%TRIDION_HOME%\web\WebUI\Editors\DeviceEmulator\DeviceImages.<width>—the width of the image in pixels.<height>—the height of the image in pixels.
<viewport>-
The size of the device display its position within the
<image>: -
<width>—the width of the device display in pixels<height>—the height of the device display in pixels<left>—the distance, in pixels, from the left-hand side of the image to the device display<top>—the distance, in pixels, from the top of the image to the device display
-
The following image shows an example of an IPhone in landscape and the dimensions you need to provide:
- Save and close
Devices.xml.