Custom block preview - crop images?

Kirby 3
#1

I am using images in custom block plugin previews (index.js) like this

  <img v-if="img1"  class="w-full " :src="img1">

But the images are cropped in the front end to certain ratios, it is possible to do this in the panel as well?

#2

You can use the <k-aspect-ratio> component to at least display the image with the correct ratio (even though it won’t actually crop the image).

#3

thanks for this, but wrapping with k-aspect-ratio makes the image disappear for some reason - the block does resize correctly.

For now I have used css to ‘crop’ the images, seems to work ok.

 <div class="block-3-2">
          <img  v-if="img"  :src="img">
         </div>

panel css:

.block-3-2 {position: relative;width:100%;padding-top: 66%}
.block-3-2 img {position:absolute;top:0;object-fit:cover;width:100%;height:100%}