Files ratio rendering, blocks blueprint

The CMS Questions
1

Hi,

I have this code for my template blueprint:

title: BTS

tabs:
  hero:
    label: Hero section
    icon: image
    columns:
      main:
        width: 2/3
        sections:
          hero:
            type: fields
            fields:
              blocks:
                type: blocks
                fieldsets:
                  - type: sectionbtstype1
                    name: Section with 3 images
                    fields:
                      image1:
                        type: files
                      image2:
                        type: files
                      image3:
                        type: files
                  - type: sectionbtstype2
                    name: Section with 5 images
                    fields:
                      image1:
                        type: files
                      image2:
                        type: files
                      image3:
                        type: files
                      image4:
                        type: files
                      image5:
                        type: files
                  - type: sectionbtstype3
                    name: Section with 3 images (alternative)
                    fields:
                      image1:
                        type: files
                      image2:
                        type: files
                      image3:
                        type: files
      sidebar:
        width: 1/3
        sections:
          files:
            type: files
            uploads: default
            label: Files

This is the php

<!DOCTYPE html>
<html lang="nl" class="scroll-smooth focus:scroll-auto">
    <?php snippet('head') ?>

    <body class="font-tertiary font-normal overscroll-none bg-brand-neutral-dark-900" id="body">
        <?php snippet('grain') ?>
        <?php snippet('header') ?>

        <main class="relative z-10">
            <?= $page->blocks()->toBlocks() ?>
        </main>

        <?php snippet('footer-relative') ?>
        <?php snippet('scripts') ?>
    </body>
</html>

And this is the blueprint for my block:

name: sectiontype1
fields:
  image1:
    type: image
    ratio: 4/3
  image2:
    type: image
    template: image
    ratio: 3/4
  image3:
    type: image
    template: image
    ratio: 16/9

I want the images to render in the ratio’s that I have added.
This does not work.
What am I missing here and doing wrong?

2

Unfortunately, this does not work. ratio is the context for the display of images in the panel.

To render images with a flexible aspect ratio, you would have to create a corresponding field with values in the blueprint, e.g. select. You can then forward this value to your template.

Or define a fixed value in the template. In your case, it is best to use resize to retain the aspect ratio of the source image. There are other options for changing the height and width of images, for example with crop.

You could also structure your blueprint more simply by using and customising the gallery block. This makes the use of fieldsets with a fixed number of images superfluous. And the preview of the selected images is already integrated. But I would need to know what your hero section looks like to judge which solution would be best for you.

3

Additionally, you should decide if you want to add the block manually like above, or via the block yaml, both at the same time is not possible. So your block blueprint will not have any effect in the Panel either.