Try our conversational search powered by Generative AI!
AI OnAI Off
Display Channels - How to set Individual image for each device
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.
Nov 14, 2015 5:27
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?
Nov 16, 2015 15:49
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
Nov 19, 2015 8:43
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.