Kirby Layout and Images

valentin1 · February 24, 2021, 11:06am

Hello everyone,

I’m new to Kirby Layout and kinda stuck in a simple move. I have checked the guide, yet still lost!

Basically I am designing a simple grid gallery of 2 columns where images can be either 1/2, 2/3 or 1/3.
I set my blueprint such as this then:

 fields:
    imageselection:
      label: Feed Selection
      type: files
      query: site.find('albums').children.images
      uploads: false
      layout: cards
      image:
        cover: true
        ratio: 3/4

As you can see, I need to query my images from the Albums Page.
With the help of File blueprint, I managed to create a field such as this:

And it works fine. It is not WYSIWYG yet It works.
Then I discovered the magic of Kirby Layout and I thought It would be great for my client.

I set my layout such as this:

   layout:
      type: layout
      layouts:
        - "1/1"
        - "1/2, 1/2"
      fieldsets:
            - image

And I got this in my panel when I want to set my image:

To be clear, I need to manage how I want these fields (in order to query from my Albums). Can I do that ?

Thanks a lot in advance for your precious help

bruno · February 24, 2021, 11:21am

I’m not quite sure what you mean by that – you want to set the query for the image field in the block preview, correct?

Check out the default image block (image | Kirby CMS) and how to extend blocks (Blocks | Kirby CMS) or, maybe that’s simpler, create your own custom block that simply contains an image field which queries from your album page (Blocks | Kirby CMS). If you want an image preview in the layout, I would suggest extending the default block.

valentin1 · February 24, 2021, 11:44am

Sorry that wasn’t clear indeed.

To be short, I need to

To add a connection for every photo with a page of the website (the purpose is to create a link then)

      link:
         label: Redirection Link
         type: select
         options: query
         query: site.find('albums').children.published
         width: 1/1

The images need to be query from the Albums too.

So I would need that in fact:

Thanks a lot for your help

bruno · February 24, 2021, 11:55am

I think that something like this should work for extending the custom image block:

fields:
  layout:
    type: layout
    layouts:
      - "1/1"
      - "1/2, 1/2"
    fieldsets:
      albumImage:
        extends: blocks/image
        fields:
          image:
            type: files
            query: page('albums').images

You could have a look at what fields are contained in the default image block, so you can selectively hide them.

I would recommend creating a custom block type however, so you have complete control over what content you expect and how to render it. Creating custom blocks is pretty simple and straight forward, all you need is a blueprint, a template and a vue component (if you want to render content in the panel). Blocks | Kirby

For the preview, just copy what you need from the vue component kirby/Image.vue at master · getkirby/kirby · GitHub

valentin1 · February 24, 2021, 1:02pm

Wow I was really unfamiliar with all the blocks stuff. I will focus on creating a custom image block. I’ll keep you posted !

Thanks a lot Bruno, life-saver.

valentin1 · February 24, 2021, 2:40pm

So, I managed to create a custom block. Pretty easy indeed. I can now custom the fields and stuff that’s great, one problem’s solved!

Now… I must say I’m lost with vue component ! I have check this page : Blocks | Kirby which is great to explain for the button example. Yet, as you can see, I cannot achieve to adapt it to display the picture in the panel.

I have create the files in the directory for my feedimage custom block:
Screenshot 2021-02-24 at 15.32.20

I have checked the link you gave me, with the orignal view component, yet I don’t know how to adapt it to my custom block, on what part I should copy and where…

Thanks a lot for your help!

pixelijn · February 24, 2021, 2:46pm

Not published yet, but might help: Custom block type recipe by texnixe · Pull Request #1227 · getkirby/getkirby.com · GitHub

BenjaminB · February 24, 2021, 3:01pm

Hi.

Creating a custom block from scratch involves creating the component that goes with it to manage the preview.
But there is another approach that may be sufficient for you.
Extend a core block and modify it.

You create your custom block, you extend a core block (image, or gallery) and you delete the fields that do not interest you.
This way, the preview will continue to be managed by the core component and you will only have to create a blueprint and a snippet in your module.

valentin1 · February 24, 2021, 3:52pm

Hey both of you two !

Thanks for your help.

I managed to make it works with the extends method.

I even achieved to hide and overwrite fields I don’t need with this trick:

layout:
	type: layout
	layouts:
		- "1/1"
		- "1/2, 1/2"
	fieldsets:
		feedimage:
			extends: blocks/image
			fields:
				image:
					type: files
					query: site.find('albums').children.images
				link:
					label: Redirection Link
					type: select
					options: query
					query: site.find('albums').children.published
					width: 1/1
				ratio:
					when: xxx
				crop:
					when: xxx
				caption:
					when: xxx							
				alt:
					when: xxx

Thanks a lot!

BenjaminB · February 24, 2021, 4:00pm

Instead, try:

ratio: false

This is the “real” native solution.

valentin1 · February 24, 2021, 5:12pm

Oh right… haha thanks!

While I’m at it… I must be dumb but I can’t achieved to get my layout in my template.
Here’s what I have set:

<?php foreach ($page->layout()->toLayouts() as $layout): ?>
<section class="grid" id="<?= $layout->id() ?>">
  <?php foreach ($layout->columns() as $column): ?>
  <div class="column" style="--span:<?= $column->span() ?>">
    <div class="blocks">
      <?= $column->blocks() ?>
    </div>
  </div>
  <?php endforeach ?>
</section>
<?php endforeach ?>

It creates the divs and stuff. It’s <?= $column->blocks() ?> which seems to bug. Where did I get it wrong?

Thanks!

BenjaminB · February 24, 2021, 5:20pm

Did you create a custom block template with your new custom block ?

valentin1 · February 24, 2021, 5:21pm

I did the extends how you told me such as this:

layout:
type: layout
layouts:
	- "1/1"
	- "1/2, 1/2"
fieldsets:
	feedimage:
		extends: blocks/image
		fields:
			image:
				type: files
				query: site.find('albums').children.images
			link:
				label: Redirection Link
				type: select
				options: query
				query: site.find('albums').children.published
				width: 1/1
			margin:
				type: radio
				label: 'Size'
				options:
					normal: 'Normal'
					margin: 'Thumbnail centred'
			ratio: false
			crop: false
			caption: false
			alt: false

BenjaminB · February 24, 2021, 5:35pm

Try with a global block type and create a custom snippet.
Here, the way :

valentin1 · February 24, 2021, 5:42pm

I am not sure I understand. Should I discard the layout method and restart all with block?

BenjaminB · February 24, 2021, 5:48pm

No. Keep the layout method.
Create /site/blueprints/blocks/feedimages.yml and paste in your extends property AND your own fields.
Create /site/snippets/blocks/feedimages.php and use feedimages as a core block in your layout.fieldsets property.

valentin1 · February 24, 2021, 5:57pm

I’m not sure I understand what I should do in feedimages.php… sorry!

BenjaminB · February 24, 2021, 6:00pm

Just template your code.
Try to start with that :

<figure>
  <ul>
    <?php foreach ($block->images()->toFiles() as $image): ?>
    <li>
      <?= $image ?>
    </li>
    <?php endforeach ?>
  </ul>
</figure>

For galery, or that for image. Depends what block is extended.

<?php

/** @var \Kirby\Cms\Block $block */
$alt     = $block->alt();
$caption = $block->caption();
$crop    = $block->crop()->isTrue();
$link    = $block->link();
$ratio   = $block->ratio()->or('auto');
$src     = null;

if ($block->location() == 'web') {
    $src = $block->src();
} elseif ($image = $block->image()->toFile()) {
    $alt = $alt ?? $image->alt();
    $src = $image->url();
}

?>
<?php if ($src): ?>
<figure<?= attr(['data-ratio' => $ratio, 'data-crop' => $crop], ' ') ?>>
  <?php if ($link->isNotEmpty()): ?>
  <a href="<?= $link->toUrl() ?>">
    <img src="<?= $src ?>" alt="<?= $alt ?>">
  </a>
  <?php else: ?>
  <img src="<?= $src ?>" alt="<?= $alt ?>">
  <?php endif ?>

  <?php if ($caption->isNotEmpty()): ?>
  <figcaption>
    <?= $caption ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>

Edit : I stupidly copied the doc

valentin1 · February 24, 2021, 6:13pm

Okay I’m all lost to be honest
Here what I have at the moment,

Blueprint of home home.yml:

layout:
	type: layout
	layouts:
		- "1/1"
		- "1/2, 1/2"
	fieldsets:
		feedimage:
			extends: blocks/image
			fields:
				image:
					type: files
					query: site.find('albums').children.images
				link:
					label: Redirection Link
					type: select
					options: query
					query: site.find('albums').children.published
					width: 1/1
				margin:
					type: radio
					label: 'Size'
					options:
						normal: 'Normal'
						margin: 'Thumbnail centred'
				ratio: false
				crop: false
				caption: false
				alt: false

I have the same in the block blueprint feedimages.yml then? Something must be wrong here?

In the feedimages snippet I have this:

    <?php foreach ($block->images()->toFiles() as $image): ?>
      <?= $image ?>
    <?php endforeach ?>

So I call that snippet in my core template: <?php snippet('feedimages') ?>

It doesn’t work and I’m losing my mind haha

BenjaminB · February 24, 2021, 6:17pm

Try that :

layout:
	type: layout
	layouts:
		- "1/1"
		- "1/2, 1/2"
	fieldsets:
		- feedimages

Topic		Replies	Views
Customizing the Layout field Questions v3	5	456	June 11, 2023
Image selection for layout image block Questions v3	0	334	April 11, 2022
Image aspect ratio and cropping into Block field working only in preview Questions v3	5	980	January 20, 2022
Layout with Blocks/Images Questions	2	199	October 6, 2023
Blueprint/Panel advice needed for x images within a div Questions v3	7	381	November 17, 2019

Kirby Layout and Images

Related topics