Rotating Banner with Different Images for Desktop, Tablet and Mobile

Matt Fothergill asked on July 9, 2018 11:56

What would be the best way to implement a rotating banner (full page width) that displays the correct image variant (Desktop, Tablet or Mobile) based on viewport?

My initial thought was to define a new 'Page Type' with required fields e.g. Desktop Image (URL), Tablet Image (URL), Mobile Image (URL), Alternate Text and Link URL. Then create a new transformation and somehow specify the correct image to display using a media query (not sure what to put in the transformation, would all three images be listed/output and correct one chosen based on viewport/media query?).

Is it possible to dynamically select the correct image source this way? Is there a better way to do this?

I was thinking it would work in a similar way to the example shown in this video: KCV-DEV: Content Slider

Correct Answer

Laura Frese answered on July 9, 2018 18:58

Matt, I think your idea is the best way and that is how I would do it. Page type with the different images for the different sizes Set media queries in the transformation with the mobile image as the default and use a repeater to display the slides. Alternatively, you could create a custom webpart that would put the media queries in the header.

<style>
    @media (min-width: 768) { 
         .banner-image<%# DataItemIndex %>{
            background-image:url(<%# Eval("TabletImage") %>)!important;
        }
    }
     @media (min-width: 1024){
        .banner-image<%# DataItemIndex %>{
            background-image:url(<%# Eval("DesktopImage") %>)!important;
        }
     }
</style>

<div class="banner-image<%# DataItemIndex %>" style="background-image:url(<%# Eval("MobileImage") %>);" />

0 votesVote for this answer Unmark Correct answer

Recent Answers

Peter Mogilnitski answered on July 9, 2018 15:02 (last edited on December 10, 2019 02:31)

There is a banner rotator web part (see documentation). You can make visible different rotators based on let say {%CurrentDeviceProfile.ProfilePreviewWidth|(identity)GlobalAdministrator%} etc, altought might need premium 51degree for that. Essentially you will end up with a several rotators on your page (only one will be visible) that will show banners specifically designed for a given device type (i.e. mobile, desktop, tablet).

Vice versa you can have only one rotator on a page that has a macro in the banner category property that will select different categories (i.e. mobile, desktop, tablet). Which way to to go depends on your setup.

0 votesVote for this answer Mark as a Correct answer

Christopher Jones answered on July 10, 2018 14:15

The approach has some limitations, and it doesn’t work in all cases. But if your requirements aren’t complicated, and if you’re willing to make an extra effort to ensure your images are accessible, CSS background images may be all you need.

0 votesVote for this answer Mark as a Correct answer