Try our conversational search powered by Generative AI!

Ipad View


I have three types of contents.  one should be displayed in desktop view, another should be displayed in tablet device and the last one in mobile device.

This should be done based on detecting the device itself. Is there any way to implement this? can any one help me on this..


Feb 04, 2016 15:47

Check out displaychannels first. 

Feb 04, 2016 15:52

Normally you solve it by using responsive design and a gui framework like bootstrap though

Check out the alloy example templates for code examples

Feb 04, 2016 15:54

Hi Daniel,

Thanks for your reply.

My secnerio is  i have three Image fields (Desktop,tablet,mobile) and i have uploaded three different images.

so when i render a page in browser , i am able to detect the mobile device(Request.Browser.IsMobileDevice)  but for the tablet it also returns true .

I pasted my code here also.

if (Request.Browser.IsMobileDevice)
else if(.........................)

else if(.........................)



Feb 04, 2016 16:34

If it's just images it's probably easiest to go with a javascript component for choosing the correct image like

combined with an automatic rescaling service so editors don't need to create multiple images everywhere like

or using a DAM like imagevault if you have tons of images

Feb 04, 2016 16:43

Hi Daniel,

But i need to display three different images for the respective devices. i should not use any java script also for this..


Feb 04, 2016 17:03

The EPiServer way is then to set up display channels for the different resolutions (desktop, tablet, mobile) and then you can choose different views for each device (render different properties). Editor will need to upload images for every device then if they are completetly different and not just scaled versions of the big image. 

Still possible to solve easier by js though

Feb 04, 2016 17:09

Hi Manikandan,

If you're working with HTML5, all modern browsers have support for responsive images. No javascript required.
You have to specify different images in the srcset attribute, and do some tweaking in the sizes attribute.

We've been using that technique to serve different sizes of the same image.
It may not work very well with different images.

For example, let's say you have the following img element:

<img src="/image_200.jpg"
        srcset="/image_200.png 200w,
                     /image_400.png 400w,
                     /image_1200.png 1200w"
        alt="" />

Default / fallback image is image_200.jpg
If image size is between 200 and 400px (mobile phone?), image_200.png will be served.
If image size is between 400 and 1200px (tablet?), image_400.png will be served.
If image size is 1200+ px (desktop?), image_1200.png will be served.

But once image_1200.png is served and you resize the browser to smaller size, image_1200.png won't be replaced with the smaller one.

Detecting client's device (is mobile, is tablet, is desktop) and/or screen orientation is very error prone. Responsive images simply work on every device.

Feb 04, 2016 17:52

Hi Dejan,

Thanks for your reply,

Here i am using three different images and the images will be changed periodically.


Feb 04, 2016 17:59

Well, either implement display channels for them. Gives you full freedom of presentation but requires more work.

Or use some gui skills with a little creative js. Faster but less flexible if you need completely separate presentation. 

Feb 04, 2016 23:22

A simple example on how to implement this using display channels and ImageVault is available here,

There is also some examples in the Vaultopia demo site, Sources code is available on GitHub.

Feb 11, 2016 9:53
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.