Image aspect ratio and cropping into Block field working only in preview

Kirby 3 Questions 🤔
1

Hi there!
I am using Kirby layout/block in order to insert and position custom blocks.

I set a blueprint file in order to select an aspect ratio and a crop option for the image.

  ratio:
    label: field.blocks.image.ratio
    type: select
    placeholder: Auto
    width: 1/2
    options:
      1/1: "1:1"
      16/9: "16:9"
      10/8: "10:8"
      21/9: "21:9"
      7/5: "7:5"
      4/3: "4:3"
      5/3: "5:3"
      3/2: "3:2"
      3/1: "3:1"
  crop:
    label: field.blocks.image.crop
    type: toggle
    width: 1/2

And then in PHP I just use the callback “blocks()” to print it.
In the inspector, I see that values are printed into the “data-ratio” field.

I wondering how to set the same aspect ratio and crop that I saw in the control panel.
Any idea?

Schermata 2022-01-19 alle 11.05.42
Schermata 2022-01-19 alle 11.05.42828Ă—106 13.5 KB

2

What sort of blueprint is that?

The ratio and crop fields are default fields of the image block, so I don’t know why you are setting them somewhere else?

3

What I posted above is just the image setting store in /site/blueprints/blocks/image.yml
I had to create a new one because by the default value and remove all the extra settings (location/caption etc…)

That’s the whole blueprint:

name: field.blocks.image.name
icon: image
preview: image
fields:
  image:
    label: field.blocks.image.name
    type: files
    multiple: false
    image:
      back: black
    uploads:
      template: blocks/image

  alt:
    label: field.blocks.image.alt
    type: text
    icon: title

  ratio:
    label: field.blocks.image.ratio
    type: select
    placeholder: Auto
    width: 1/2
    options:
      1/1: "1:1"
      16/9: "16:9"
      10/8: "10:8"
      21/9: "21:9"
      7/5: "7:5"
      4/3: "4:3"
      5/3: "5:3"
      3/2: "3:2"
      3/1: "3:1"
  crop:
    label: field.blocks.image.crop
    type: toggle
    width: 1/2
4

Ok, I tested this and the data-crop attribute is only added when the toggle is set to true, so the behavior is fine.

However, what you probably want is the snippet to really create thumbs and responsive images? The default snippet doesn’t do anything like that and you would have to overwrite it.

5

Thanks, @texnixe,
So the best practice would be to define a CSS rule for those aspect ratios?

Basically, having a class for each option?
I just tested and it works.

6

Yes and no. Your CSS rule would display the image at the right ratio without changes the image itself, though. So it would still be the same size, which is not really the right solution for responsive images.

https://getkirby.com/docs/guide/templates/resize-images-on-the-fly

Kirby doesn’t do that by default in the snippet.