Thumb auto height

Kirby 2 Questions šŸ¤”
1

Hi !

Iā€™m using thumbs to create a layout with Isotope and LazyLoad plugin. Itā€™s nessesary to put the image width and height to work, so I would like to make a thumb with ā€œheight=autoā€ā€¦

With this inside the img tag, width="<?php echo thumb($image, array('width' => 300))->width() ?>"
I can resize my width image but I want to get the image height after the resize, proportionally, and automatically, something like height="<?php echo thumb($image, array(...if image thumb is 300, proportionnaly based on the original file, the height is (..?..))->width() ?>"

Itā€™s quite difficult for me to explain, but for example in Photoshop, if you resize the image, by just putting the width size, you can get the height size of the image, proportionnaly. Itā€™s like Kirby CMS donā€™t allow to make this, am I right ? In my thumbs case, how can I fix it ?
Maybe something this ->ratio() and calculating it ?

Iā€™m exhausted to solve this
Thanks a lot

2

Something like this should work:

<?php
$image = $image->resize(300);
?>
<img src="<?= $image->url() ?>" width="<?= $image->width()" height="<?= $image->height() ?>">
3

Thank you, your solution looks like to do the job, something more like this:

width="<? echo $image->resize(200)->width()?>" height="<? echo $image->resize(200)->height() ?>"

But in my CSS file, I had to do img{width:100%;height:auto} to have fluid images. So if i remove height:auto, the image will be outside the item container with an absolute height, and if I remove the width: 100%; and height:auto, the images will be undersized.

So I donā€™t know what to do, this is my actual image :

<img width="<? echo $image->resize(200)->width()?>" height="<? echo $image->resize(200)->height() ?>" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAE0lEQVR42mP8/5/hPwMSYCQoAAAciwj7H9cpmAAAAABJRU5ErkJggg==" data-original="<?php echo $image->resize(200)->url() ?>" alt="<?php echo $project->title()->html() ?> &middot; <?php echo $project->year()->html() ?> &middot; <?php echo $project->materiaux()->html() ?> &middot; <?php echo $project->dimensions()->html() ?>">
4

It looks like my problem comes from the ā€œdata:imageā€ value inside ā€œsrcā€. The $image->resize(200) take his source from the ā€œsrcā€ instead of the data-original (from Lazylaod). My question now is how to make it.

Is it possible to change this
$image->resize(200)
to this
$image->from-data-original()->resize(200)

Thx in advance

5

I donā€™t really understand what you are trying to say here. What do you mean by ā€œdata-originalā€? $image->resize() takes the original image on the server as a basis to calculate the thumbnail and saves it in the thumbs folder.

6

Yes you right, Iā€™m really confusedā€¦Forget my previous comment that is not exactly where my problem comes from. I think this comes from the jquery. Iā€™m starting from this code bellow:

http://jsfiddle.net/ZnEhn/277/

And I just want to make it fluid with image width:100%, but on windows load, images are over each one, and when you resize, the layout become nice. Very strange.