Crop & resize on `placeholderUri()`

[carstengrimm]

I am using other means of resizing images automatically, e.g. crop but when using the placeholderuri function on the image, it will obviously output another ratio and when the lazyload happens the container obviously is shrinking/changing size.

I wonder if there's a method to also use the placeholder in the same ratio.

[johannschopplich]

Sorry, but I can't follow or make out the cause of your issue. Please provide an example so I may dig in.

On a side note: You can always crop your image first and generate the placeholder image afterwards: $image->crop(50, 40)->placeholderUri().

[carstengrimm]

 <img src="<?= $file->crop(600,400)->placeholderUri() ?>" data-src="<?= $file->focusCrop(600,400)->url() ?>" alt="<?= $file->alt() ?>" width="600" height="400" class="lazyload"> 

with the Crop the placeholderUri is supposed to also be using 600x400px, because when having the lazyload effect, the ratio is not the same with my data-src, which results in the palceholderUri being the original width/height ratio and therefor the image (as well as the surrounding container - quite default column div) will change in size.

Here we can see the placeholderUri, where as the original format of the right picture is portrait. but using the (focus)Crop the final image basically is changed to 600x400 which will then result in the container adjusting the height after lazyloading the image:

After the Image has been lazyloaded, you can see the outside container with the navigation, obviously get closer to the pictures because the placeholderUri height has been more than the originals, even though i have changed my code to $image->crop(600,400)->placeholderUri()

Where then I would assume this placeholder should also be 600x400

(the Original Picture is Landscape- so even though i am using the crop function, it still uses the original ratio)

(Maybe there's a slight Caching going on, however see the next comment)

[carstengrimm]

Thus i notice when i use the $image->crop(600,400)->placeholderUri() method the src image seems not to load (broken image symbol before lazyload), the output says src(unknown) before lazyload happens.

When checking the Sourcecode using

$image->crop(600,400)->placeholderUri() Results in empty src

<div class="p-4 w-1/3">
 <img src="" data-src="..." class="lazyload">
 </div>

where as

$image->placeholderUri()

outputs the correct data:image/svg....

<div class="p-4 w-1/3">
 <img src="data:image/svg+xml;charset=utf-8...." data-src="..." class="lazyload">
 </div>

I think $image->crop(600,400)->placeholderUri() would be my solution to having the same ratio for the blurry src but it seems there's something not working (for me)

I just did a composer update as well and it seems like i am up-to-date.

[johannschopplich]

You are right, using crop() or resize() will not return a \Kirby\Cms\File, rather \Kirby\Cms\FileVersion. Will dig into the latter class and how to parse them for the placeholder URI.

[carstengrimm]

At the very beginning i thought maybe placeholderUri(600,400) may be available, then I also played around with resize, focuscrop, crop, but since that kinda broke the whole thing i was directly using the palceholderUri whereas we can see the different ratio from here

https://github.com/johannschopplich/kirby-blurry-placeholder/issues/11#issuecomment-922692228

so finally make an issue, came back finally finding crop/resize not functioning with placeholderUri, which is a step forward already.

Quite the roundabout. Sometimes it's a challenge finding the issue :-)

[johannschopplich]

Added an option to pass the image ratio to the placeholder methods. See https://github.com/johannschopplich/kirby-blurry-placeholder#cropped-images.

Please update to v1.4.0. Thanks!