Different images for different devices

Hi there,

For a portfolio project, I’m looking for a solution that would allow me to specify, from my panel, desktop images on one side and mobile images on another side.
Ideally, I’d like specific (landscape) images to display on desktop, and other (portrait) images to display on mobile.

Ever heard about a plug-in which offers that solution ?
Or any yml / php configuration that works ?

Thanks a lot :slight_smile:

Firstly I can’t answer without pointing out that it is bad practice to serve different content to different devices. Device detection is not an exact science.

Rather, it is possible to use the same source media to do this with picture and srcset tags, in combination with CSS.

Kirby has built in support for srcset https://getkirby.com/docs/reference/objects/file/srcset

This will allow you to serve different sized images based on screen size.

Hi James,

Thanks for your answer.
Ok, if it’s bad practice, I’ll look for an alternative solution.
Thanks for the info about srcset

It’s possible using a picture tag element and media queires. Quick example is bellow. You will need to read up on srcsets to find what queries work for you, but it is possible.

        media="(min-width: 1024px)"
       srcset="https://via.placeholder.com/1024x576?text=Horizontal+Image 1x,
        https://via.placeholder.com/2048x1152?text=Horizontal+Image 2x"
        media="(max-width: 1023px)"
       srcset="https://via.placeholder.com/640x960?text=Vertical+Image 1x,
        https://via.placeholder.com/1280x1920?text=Vertical+Image 2x"

Then within the panel you can define two fields and output those into the relevant source. So your panel you can define 2 columns, left can be desktop as needed, right can be mobile as needed, the front end you output both fields into their sources.

Does that make sense?

That makes totally sense. I’ll check that out.
Thanks !

I wouldnt personally use two fields for this, with two seperate images. You can do it from one image in combination with the resize and crop file methods, or, optionally, the focuscrop plugin. This will work aslong as the source image is large enough to be turned into all the desired sizes.