Display Channels - How to set Individual image for each device

Vote:
 

I've a banner image (background image in css class) in home page which will be displayed in all devices (mobile, tablet and desktop). The editor will add individual image for each device (one image for mobile and one image for tablet and one image for desktop since they don't want to resize it for different view port). I need to render one image according to device (The page source should have only one image). Is there any way to achieve this with the help of display channel?

I will be using one page template for all device.

#141342
Nov 12, 2015 15:45
Vote:
 

I would recommend to take a look at HTML5 picture element (nice tutorial). Then you can use single image that editors can upload to CMS. And then add ImageResizer (+nuget package that will play along with Blob storage) and use additional query parameters to control width/height/or any other parameter for image on specific device.

#141424
Nov 14, 2015 5:27
Vote:
 

Hi Valdis, Thank you for suggestion. I've reviewed both the option and unable to suit for my requirement. The option 1 is great but it renders the image as image tag but my requirment is to set the image as background image via css. The second option ImageResizer is not free I guess so not poosible.

 

Is that possible to identify the device using EpiServer Api, like mobile or tablet or desktop view using disply channel?

 

#141618
Nov 16, 2015 15:49
Vote:
 

If you need to set image via background image - I would then just add multiple media queries in css to catch specific device screen size. Btw, ImageResizer has free license - http://imageresizing.net/plugins/editions/free

#141718
Nov 19, 2015 8:43
* 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.