How do you deal with Kirby and delivering Images for various devices (HiDPI, Retina, Mobile)

Hi,

Kirbys thumb function is great and I would like to use it for delivering the right Images for various devices (smaller images for smartphones, higher images for HiDPI Devicess and so forth).

Right now I am generating a Background Image that stretches all over the Welcome Screen:

<div class="fill" style="background-image:url('<?php echo thumb($image, array('width' => 1600, 'height' => 1200, 'crop' => true), false) ?>')" />
</div>

I cannot use the img Tag because the image should still be scrollable - so no fixed background solution.

No I would like to modify this code in delivering the right image according to the devices viewport and/or pixel density. Is there an option for thumb called viewport - so the image would be generated depending on the devices viewport? - I couldn’t find anything online.

How do you handle Images in combination with Kirby?

Thanks for any help,

Matt

1 Like

Hello! Due to the caching nature of CMSes in general you should prepare the image URL for every possible output in the template and hand it over via frontend measures, e.g. the browser or scripts.

If you’re handling images in content, you can use the <picture> element and Javascript polyfill libraries.

If you’re using CSS rules, you can supply multiple images, including regular and retina assets and define them with media queries.

edit: More on the Kirby retina topic

Thanks for the help - I found a workaround to load the image via img. I am using picturefill now.

Here is a working version - for anyone who wants to give it a try:

<img src="<?php echo thumb($image, array('width' => 1200, 'height' => 900, 'quality' => 70, 'crop' => true), false) ?>" alt="alt Text" class="fill" sizes="100vw" srcset="<?php echo thumb($image, array('width' => 600, 'height' => 400, 'quality' => 70, 'crop' => true), false) ?> 600w,
    <?php echo thumb($image, array('width' => 800, 'height' => 600, 'quality' => 70, 'crop' => true), false) ?> 800w,
    <?php echo thumb($image, array('width' => 1200, 'height' => 900, 'quality' => 70, 'crop' => true), false) ?> 1200w,
    <?php echo thumb($image, array('width' => 1600, 'height' => 1200, 'quality' => 70, 'crop' => true), false) ?> 1600w,
    <?php echo thumb($image, array('width' => 2000, 'height' => 1500, 'quality' => 70, 'crop' => true), false) ?> 2000w">
1 Like

If you would like to stick with background images, just use css media queries. This should even work without a polyfill in most modern browsers.

http://caniuse.com/#feat=css-media-resolution

Thanks for the input. As I am using Kirby’s thumb Version to generate the various sizes, I don’t believe it’s possible to work with media queries - or is it?

If you’re looking for something to run site-wide: I recently set up a site for a photographer and used Squeezr. It didn’t take much config and is working well.

Looks interesting - thanks.

I never used the thumb function myself, but I don’t see why not, if you are adding the relevant css in a style tag at the head of each page. (and since this is page specific CSS it is best to put it there anyway)

Media Queries can’t be used as inline CSS and I want Kirby to do all the conversion of the images for the various sizes. So if a user uploads an image in the panel, Kirby creates all the various images. If think it can only be done in the php file.

You might want to try something like this:

<style>
    .background {
        background-image: url(<?= $image->thumb('width:1200|height:800|crop:true')->url() ?>);
    }

    @media screen and (max-width: 800px) {
        .background {
            background-image: url(<?= $image->thumb('width:800|height:533|crop:true')->url() ?>);
        }
    }
</style>
1 Like

Thanks - that will work. but I will stick to my img workaround for now - this solutions would make my html code pretty messy, because I am using more the 20 images on the site… :smile:

Okay, I thought you were looking for a solution for a single background image… :wink:

It doesn’t matter how many images you are using on the whole site since only the images that are used for each page will be included. The only difference is that instead of adding the relevant image code in an img tag, you are adding it to the style tag at the head of the document.

Using srcset needs a polyfill (for now) but more importantly you said that you wanted this for a background, which makes the css solution more appropriate.

I haven’t test it yet, but I guess if you used a bit if javascript in there, can lazy load the pictures, or make sure it only load the picture you want.
I’m heading to bed now, but when I wake up I’ll write it up and test it

Hi Matthack,

thank you for the solution. I’m trying to get a srcset to work, but after implementing your script, my browser gives me a 500 error. What might be the problem? I implemented picturefill in my js file and put your code in my markup.
Shall i probably load picturefill before the content?

@forum maybe you have a hint how to deal with thumbs and picturefill?

Hi Helge,

as far as I can remember you have to load picturefill async in the header.

You can check out my working site here:

Alternatively, you can use Adaptive images. This does away with having to generate different images and get funky with Kirby tags to get them on the page. Images getting generated at an appropriate size for the users device in the background on the server side. Pretty easy to setup.

http://adaptive-images.com

Thank you, the last example works perfect!