Responsive images, height & width

Kirby 3 Solved ✅
1

Hi all

I’m trying to create responsive images based on the Responsive images cookbook recipe.

I can get the images to display in different sizes based on the viewport however I can’t get the image height & width displayed from those thumb images. I am still trying to get my head around this so I may be doing it wrong, but I want to prefill width and height based on the image size.

Below is my code,

config

        'srcsets' => [
            'default' => [
                '300w'  => ['width' => 300, 'height' => 169, 'crop' => 'center', 'format' => 'webp'],
                '600w'  => ['width' => 600, 'height' => 338, 'crop' => 'center', 'format' => 'webp'],
                '900w'  => ['width' => 900, 'height' => 506, 'crop' => 'center', 'format' => 'webp'],
                '1200w' => ['width' => 1200, 'height' => 675, 'crop' => 'center', 'format' => 'webp'],
                '1800w' => ['width' => 1800, 'height' => 1013, 'crop' => 'center', 'format' => 'webp']
            ],
            '4x3webp' => [
                '300w'  => ['width' => 300, 'height' => 225, 'crop' => 'center', 'format' => 'webp'],
                '600w'  => ['width' => 600, 'height' => 450, 'crop' => 'center', 'format' => 'webp'],
                '900w'  => ['width' => 900, 'height' => 675, 'crop' => 'center', 'format' => 'webp'],
                '1200w' => ['width' => 1200, 'height' => 900, 'crop' => 'center', 'format' => 'webp'],
                '1800w' => ['width' => 1800, 'height' => 1350, 'crop' => 'center', 'format' => 'webp']
            ],
            // more srcsets as needed
        ]
    ]

template

<?php
$sizes = "(min-width: 1200px) 30vw,
        (min-width: 900px) 50vw,
        (min-width: 600px) 50vw,
        100vw";


if ($image = $product->cover()->toFile()):?>
    <picture>
        <source
            srcset="<?= $image->srcset('16x9webp') ?>"
            sizes="<?= $sizes ?>"
            type="image/webp"
        >
        <img
            alt="Window <?= $product->title() ?> Canberra"
            src="<?= $image->resize(300)->url() ?> ?>"
            srcset="<?= $image->srcset() ?>"
            sizes="<?= $sizes ?>"

            loading="lazy"
        >
    </picture>
<?php endif ?>

As you can see there is a gap between sizes and loading within the template code, it’s missing the image width and height. If I add the width and height elements as per the recipe, then my image is always displayed in 1800 width.

        height="<?= $image->resize(1800)->height() ?>"

What am I doing wrong, or what am I not understanding?

2

You have to take care how the images are displayed in your CSS, i.e. limit the size to the width of the container etc.

3

I’ve set that to 100%, I don’t seem to have a problem with that. It’s more to do with the height, the images would fit the div at 100%, but then the height would be the original height of the image, if I specify the image height in html.

4

Is the height set in CSS is well?

Screenshot 2023-07-04 at 13.44.26
Screenshot 2023-07-04 at 13.44.261920×901 257 KB

5

That worked for actually sorting out the display of the image.

For the html side of image width and height, what is the best practice. The cookbook recipe refers to the highest size. Is it meant to be the preferred display size?

width="<?= $image->resize(1800)->width() ?>"
height="<?= $image->resize(1800)->height() ?>"
6

I think it doesn’t really matter that much. The purpose of adding width and height is to prevent CLS by providing the correct aspect ratio: Optimize Cumulative Layout Shift  |  Articles  |  web.dev

1 Like
7

Okay thank you