Kirby Layout and Images

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 :slight_smile:

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

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

Sorry that wasn’t clear indeed.

To be short, I need to

  1. 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 
    
  2. The images need to be query from the Albums too.

So I would need that in fact:

Thanks a lot for your help :slight_smile:

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

1 Like

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.

1 Like

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! :grin:

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… :face_with_monocle:

Thanks a lot for your help!

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

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.

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! :smiley:

Instead, try:

ratio: false

This is the “real” native solution.

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? :frowning:

Thanks!

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

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

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

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

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.

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

Just template your code. :wink:
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

Okay I’m all lost to be honest :joy:
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 :grinning:

Try that :

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