Show different chunk on mobile viewport

HI all,
I have a site which has a full screen slider on the front page.
I have a bunch of portrait images to use on mobile, and a bunch of landcape images to use on desktop.
I’ve been looking for an extra to show a chunk based on the viewport width, but I can’t seem to find anything.

How do you guys handle this situation normally?


there was modMobile template switcher.
modMobile/modmobile.plugin.php at master · jgulledge19/modMobile (

maybe, you could get some code from there

There was other solution as well, maybe this will help you: GitHub - bezumkin/MobileDetect: Simple mobile version of your MODX site

You can also use the srcset attribute on your img tag. This lets you use just one list of images instead of creating two different chunks. Something like:

<img src=".../small-portrait-1.jpg" srcset=".../medium-portrait-1.jpg 500w, .../large-landscape-1.jpg 1000w" alt="...">
<img src=".../small-portrait-2.jpg" srcset=".../medium-portrait-2.jpg 500w, .../large-landscape-2.jpg 1000w" alt="...">

Adjust the sizes to work with your particular images and current device screen sizes

1 Like

Thanks - will take a look!

OK thanks - will have a look!

Thats a very good point Lucy - wasn’t thinking actually - doesn’t need a MODX solution at all! ha ha. Thanks for givin me clarity!! :slight_smile:

1 Like

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.