Documentation Center

Configuring Device Preview

Configure the types of devices available for users to edit and preview content in in the Devices.xml configuration file.

Procedure

  1. If you did not install when you installed the Content Manager:
    1. Access the SDL Web installation media.
    2. Navigate to the Content Manager\ directory.
    3. Double-click the executable SDLWeb85CM.exe.
    4. In the Advanced View of the Features pane, you need to make sure User Interfaces > Experience Manager > Device Preview is selected.
    5. Follow the instructions on the screen.
  2. On the Content Manager, access the %TRIDION_HOME%\web\WebUI\Editors\DevicePreview\Configuration directory.
  3. Open Devices.xml in a text editor.
  4. The Devices.xml consists 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:
    AttributeDescription
    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 the type of one to landscape and the type of 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.
    AttributeValues
    type

    landscape

    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:
  5. Save and close Devices.xml.