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..
Check out displaychannels first.
Normally you solve it by using responsive design and a gui framework like bootstrap though
Check out the alloy example templates for code examples
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) CurrentBlock.BackgroundImage.Mobile else if(.........................) CurrentBlock.BackgroundImage.Desktop
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
But i need to display three different images for the respective devices. i should not use any java script also for this..
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
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:
Default / fallback image is image_200.jpgIf 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.
Thanks for your reply,
Here i am using three different images and the images will be changed periodically.
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.
A simple example on how to implement this using display channels and ImageVault is available here, http://blog.imagevault.se/post/83601413164/using-episerver-and-imagevault-to-build-a.
There is also some examples in the Vaultopia demo site, http://world.episerver.com/download/Demo-Sites/Vaultopia/. Sources code is available on GitHub.