Hallo together,
please HELP : D
i tryt hard this Tutorial:
In Theory i understand the concept but in practical use work id doesnt Work.
My DEV Environment:
Question:
If thumbs don’t work, check if gd library is enabled. Should be default with MAMP though. Otherwise please explain what exactly doesn’t work
OK, thanks.
First at all iam an complete newbie in this topic and studied this tutorial Responsive images | Kirby CMS.
I try to implment this:
<!DOCTYPE html>
<html>
<head>
<title>Das srcset- und sizes-Attribut</title>
<meta charseth="UTF-8" />
<meta lang="de" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Responsive Bilder mit srcset und sizes - 2</h1>
<div>
<p>Die Pixeldichte bezieht sich auf die Anzahl der Bildpunkte (auch Pixel genannt), die auf einem Bildschirm oder Display vorhanden sind. Eine höhere Pixeldichte bedeutet, dass mehr Pixel auf einem bestimmten Bereich des Bildschirms untergebracht
werden können, was zu einem schärferen und klareren Bild führt. Dies kann besonders bei der Betrachtung von Fotos, Videos und anderen Medieninhalten von Vorteil sein.</p>
<img srcset="./bilder/bild-standard.webp 640w,
./bilder/bild-HD.webp 1280w,
./bilder/bild-UHD.webp 1920w"
src="./bilder/bild-480.webp"
sizes="(max-width: 800px) 75vw,
(max-width: 1080px) 65vw,
50vw" alt="Pena de Bernal">
</div>
</body>
</html>
For this case i have a set of pictures in the content Page of my folder:
My Problem is it to bring in an Form like this for example:
<?php if ($image = $page->image('flower-power.jpg')): ?>
<img
alt="<?= $image->alt() ?>"
src="<?= $image->resize(300)->url() ?>"
srcset="<?= $image->srcset([300, 600, 900, 1200, 1800]) ?>"
sizes="(min-width: 1200px) 25vw,
(min-width: 900px) 33vw,
(min-width: 600px) 50vw,
100vw"
width="<?= $image->resize(1800)->width() ?>"
height="<?= $image->resize(1800)->height() ?>"
>
<?php endif ?>
My example work in Plain HTML without Kirby very well in the Browser.
But the implementation in Kirby CMS iam not able.
Can anybody give an hint? Thanks.
This example from the recipe implies that the current page has the given image. In the example, I try to load it by name flower-power.jpg.
Maybe you should start with understanding how to use images in Kirby and how thumbs work, before you start with something more complex like this recipe? Please check out this guide with its subchapters: Managing files | Kirby CMS
hmmm… ok iam not such a newbie because i already construct most ot my Webseite locel with many tutorials of this site.
I understand that flower-power.jpg. is just you example. Therfore i wanted to use my images and files like in my example.
hmmm… the link doesnt help me.
Like i writted in plain HTML my exmample work on localhost.
But the implementation in Kirby i have no idea where to start.
Thanks anyway.
The Kirby code you posted above does not make sense if you want to load different pre-sized images from your page folder. The example assumes you have one base file that you resize using Kirby’s thumbs engine. And then you just copy it as is, changing the file name or loading the first image in the folder or whatever.
OK this helpede me already very much to understand it better.
I made a test like this:
This is my base image with 153Kb.
Then i putted this small Code from the Reciepe there:
<?php if ($image = $page->image('bild-standard.jpg')): ?>
<img
alt="<?= $image->alt() ?>"
src="<?= $image->resize(900)->url() ?>"
srcset="<?= $image->srcset(
[
'300w' => ['width' => 300],
'600w' => ['width' => 600],
'900w' => ['width' => 900],
'1200w' => ['width' => 1200],
'1800w' => ['width' => 1800],
]
)?>"
width="<?= $image->resize(1800)->width() ?>"
height="<?= $image->resize(1800)->height() ?>"
>
Now it tested it local on my MAMP Pro localhost with two Screen-Sizes:
1200-600 DPR1
400-300 DPR2
Can you maybee confirm that my small test is correct?
I mean i think i understand the concept now - is about Performance.
Thanks so much
Looks good. If the test image is already pretty optimized, the saving might not be that huge. Note that instead of using resize(), you have more options with the thumb() method, where you can also set the quality to get smaller image, and of course also the image format (like webp or avif).
Thank you so much.
I was struggeling since yesterday but you Hint give me the understanding.
I was assuming a concept like you described but i was in the HTML Plain Version thinking.
Now i think i understand what is about.
I will made few tutorials on my blog when is ready about using Kirby.
From newbie to newbie : ).
THX and nice sunday
