Try our conversational search powered by Generative AI!

Stefan Torstensson
Dec 4, 2012
(5 votes)

Adding a new device to the view resolution drop-down

In the new and shiny EPiServer 7 user interface there's a feature for changing the size of the preview view port. This is intended to give the editor a quick way of visualizing a page as it would turn out when shown on a smaller screen. A few devices are set up in the Alloy Templates project, and it's very easy to add your own.

One popular device these days is the Google Nexus 7 tablet, so let’s add a preview option for it to the preview resolutions drop-down.

Channel and resolution drop-down

Looking at the hardware specs we can see that the native display resolution on the Nexus 7 is 1280 by 800 pixels, but we can't however use these values straight away. The reason is that most high resolution mobile devices apply scaling and actually report different screen dimensions than the physical ones. The iPhone4 for instance, reports the same screen dimensions as the iPhone3 even though its display sports 4 times as many pixels. Therefore we have to figure out which resolution the device actually reports to get as close as possible to reality. An easy way of figuring this out is to pay this screen size test page at a visit with the device in question and check the reported window width and height. For the Nexus 7 in portrait mode we get a reported canvas size of 600 by 790 pixels, and in landscape mode 960 by 440 pixels. The difference in width/height between the different modes is caused by soft buttons and browser chrome (location bar and tabs).

Now when we have this information we can add a couple of new options to the resolution section of the view drop-down by implementing the interface EPiServer.Web.IDisplayResolution. In the Alloy template project there's already a base implementation of this interface, EPiServer.Templates.Alloy.Business.Channels.DisplayResolutionBase, making it really easy to add new display resolution alternatives to the view drop-down. All you have to do is inherit the base class and supply the name and dimensions to the base constructor.

public class Nexus7PortraitResolution : 
public Nexus7PortraitResolution() :
("Google Nexus 7 (Portrait)", 600, 790) { }

Now build and reload and you should have a new display resolution option available.

Adding a backgroud device image

If you inspect the html structure around the preview iframe you'll notice an auto generated css class named epi-viewPort-600x790, where the numbers correspond to the dimensions specified in the definition above. So all we have to do is to define this css class to customize the look of the view port, and assuming we're in the Alloy sample project, we add a new CSS file, ClientResources/Style/displayresolutions.css, with the following contents:

background: url('../images/nexus7.png') no-repeat center center;

The nexus7.png referenced in the css class above is a background image picturing the Nexus 7, and is shown behind the scaled down view port. (A big thanks to my dear colleague Micke Alm who provided the image)

To get this css file loaded when the ui loads we're going to piggy-back on the cms module's resource bundle. Knowing that the CMS module depends on a resource bundle named epi.cms.widgets.base we can add our css file to this resource bundle from the module.config of our project.

<add name="epi.cms.widgets.base" path="Styles/displayresolutions.css"
="Style" isMinified="false" />

Now our displayresolutions.css file will be loaded whenever the cms module is started, i.e. when going to edit mode in CMS 7.

Keep in mind that there's no file watch on module.config so changes aren't picked up automatically by the application. Therefore you'll have to touch web.config or restart the application by other means to see the changes on the site.

We should now be able to select Nexus 7 in the resolution drop down and get the preview as shown below, with the browser preview to the left and the actual rendering to the right for comparison.

Browser and device rendering side-by-side

While this approach of course doesn’t give the exact same result as on the actual device, it can give the editor a fairly accurate idea of how a page will look on a different screen.

Dec 04, 2012


Petter Klang
Petter Klang Dec 4, 2012 01:53 PM

Nice walkthrough!

Joshua Folkerts
Joshua Folkerts Dec 5, 2012 05:05 AM

Very nice. Thanks for sharing.

Erik Henningson
Erik Henningson Aug 23, 2013 09:05 AM

For this to work in 7.1 you need to make the changes described here:

Milos Malic
Milos Malic Feb 11, 2014 06:17 PM

I am trying to do same work for the icons in a tree, but existance of several ClientResource folders and several module.config files confuses me a bit. Which ClientResource folder to you use, and which exactly module.config are you changing?

Jan 13, 2015 11:17 AM

Thanks for sharing!

Is it possible to control the sort order of the display resolutions? I tried changing the value of the Id property since the order seemed to be by this property, but this did nothing. Could it be that the resolution sort index is fixed to the id it had when first registered?

Jan 13, 2015 11:45 AM

Never mind, I figured it out. It seems the order is only determined by the order the IDisplayResolution implementations are scanned i.e. the order of the classes in the assembly, so it can only(?) be changed by ordering the includes of the code files differently in the csproj file. This is a pretty klunky way of doing it; maybe an extra property could be added to IDisplayResolution to control sorting?

Dennis Milandt
Dennis Milandt Jun 14, 2017 02:19 PM

Great tip Per! Thank you.

But I agree - a sort order property would be really useful here.

Please login to comment.
Latest blogs
Create your first demo site with Optimizely SaaS/Visual Builder

Hello everyone, We are very excited about the launch of our SaaS CMS and the new Visual Builder that comes with it. Since it is the first time you'...

Patrick Lam | Jul 11, 2024

Integrate a CMP workflow step with CMS

As you might know Optimizely has an integration where you can create and edit pages in the CMS directly from the CMP. One of the benefits of this i...

Marcus Hoffmann | Jul 10, 2024

GetNextSegment with empty Remaining causing fuzzes

Optimizely CMS offers you to create partial routers. This concept allows you display content differently depending on the routed content in the URL...

David Drouin-Prince | Jul 8, 2024 | Syndicated blog

Product Listing Page - using Graph

Optimizely Graph makes it possible to query your data in an advanced way, by using GraphQL. Querying data, using facets and search phrases, is very...

Jonas Bergqvist | Jul 5, 2024