Gallery with images in relation to each other

The CMS Questions
1

I aim to realise a gallery with images in relation to each other. It is about reproduced physical images of different sizes. In the gallery, these images will be shown in relation to each other. I have successfully implemented this concept in the past. However, I have defined the corresponding values in the CSS. If the customer requires new or different values, the dimensions of the images, I have to add them. How can I make it so that the customer can specify his own values, for example in a structure field, and these then flow into the CSS?

2

Can you give a little bit more information? Are you using CSS grid for example? Do you have a screen shot of how the result looks in the browser?

But for now, you can certainly generate inline styles on elements, or use the layouts and blocks feature of Kirby. So for eaxmple you can use the width of the layouts to control the size of the images.

In the panel it will look something like this:

image
image892×1223 135 KB

You can use the layouts to divide the areas into smaller and smaller sections.

Then in the blocks php code, you can use css vars to genrate it (adapt the class names to your needs):

<div id="wall" class="content work-wall">
    <?php foreach ($page->mediabuilder()->toLayouts() as $layout): ?>
    
          <?php foreach ($layout->columns() as $column): ?>
          <div class="item" style="--span:<?= $column->span() ?>">
            <div class="blocks">
              <?= $column->blocks() ?>
            </div>
          </div>
          <?php endforeach ?>

    <?php endforeach ?>
</div>

with following scss/css in your stylesheet, it will automatically create the required sizes:

.work-wall {
  display: grid;
  grid-template-rows: 1fr;
  grid-row-gap: rem(12px);
  grid-column-gap: rem(12px);
  grid-template-columns: repeat(12, 1fr);
  .item {
    grid-column: span var(--span);
    @include media("<medium") {
      grid-column: span 12;
    }
  }
}

The above example is from one of my own projects, you will need to adapt it as necessary for your own project.

3

Here is the gallery part of the site I realised: https://sonjakalb.com/de/works

This is an CSS excerpt:

:root {
  --widest-painting: 210;
}

/* Paintings
/* 210cm = 100%
/*
/* 30cm width */
figure.gallery figure.painting-h40w30 {
  width: calc(30% * 100 / var(--widest-painting));
}
/* 40cm width */
figure.gallery figure.painting-h30w40 {
  width: calc(40% * 100 / var(--widest-painting));
}
/* 60cm width */
figure.gallery figure.painting-h80w60 {
  width: calc(60% * 100 / var(--widest-painting));
}
/* 80cm width */
figure.gallery figure.painting-h60w80,
figure.gallery figure.painting-h120w80 {
  width: calc(80% * 100 / var(--widest-painting));
}
/* 90cm width */
figure.gallery figure.painting-h120w90 {
  width: calc(90% * 100 / var(--widest-painting));
}
/* 100cm width */
figure.gallery figure.painting-h100w100 {
  width: calc(100% * 100 / var(--widest-painting));
}
/* 120cm width */
figure.gallery figure.painting-h80w120,
figure.gallery figure.painting-h90w120,
figure.gallery figure.painting-h180w120 {
  width: calc(120% * 100 / var(--widest-painting));
}
/* 130cm width */
figure.gallery figure.painting-h195w130 {
  width: calc(130% * 100 / var(--widest-painting));
}
/* 140cm width */
figure.gallery figure.painting-h210w140 {
  width: calc(140% * 100 / var(--widest-painting));
}
/* 180cm width */
figure.gallery figure.painting-h120w180 {
  width: calc(180% * 100 / var(--widest-painting));
}
/* 195cm width */
figure.gallery figure.painting-h130w195 {
  width: calc(195% * 100 / var(--widest-painting));
}
/* 210cm width */
figure.gallery figure.painting-h140w210 {
  width: calc(210% * 100 / var(--widest-painting));
}

The widest picture is 210cm wide. The display of all other images refers to this size, which defines the maximum width of 100%.

4

You could store what data you need in the file metadata. Then in template, render as CSS variables on the element You cannot do that in some central place, but need to overwrite each block yaml Problem is that this then applies globally to all blocks, no matter where you use them. Or you need to create custom blocks based on the default one, and only use those custom ones in the page blueprints where you need to restrict access.