coko
January 5, 2021, 9:02am
1
Iāve got some questions about the layout field, I hope itās ok to ask two questions in one topic.
How do I extend a core block in a layout field?
layout:
type: layout
layouts:
- "1/1"
- "1/2, 1/2"
- "1/4, 1/4, 1/4, 1/4"
- "1/3, 2/3"
- "2/3, 1/3"
- "1/3, 1/3, 1/3"
fieldsets:
- text
- image
extends: blocks/image
fields:
class:
label: class
type: text
- heading
extends: blocks/heading
fields:
text:
type: writer
marks: false
- list
- markdown
- quote
- gallery
- video
- code
I noticed I can set layouts up to 12 columns:
layout:
type: layout
layouts:
- "1/1"
- "1/2, 1/2"
- "1/4, 1/4, 1/4, 1/4"
- "1/3, 2/3"
- "2/3, 1/3"
- "1/3, 1/3, 1/3"
- "1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3, 1/3"
How can I check for empty columns?
$column->blocks()->isEmpty()
1 Like
coko
January 5, 2021, 2:34pm
3
Ok, thank you.
Any thoughts about how to extend a block in a layout?
I wonder if the issue is the hyphen before the extended ones?
coko
January 5, 2021, 3:03pm
5
Removing the hyphens doesnāt seem to make any difference.
Front with missing headings and images:
Hm, Iād try and define that extended block in a separate blocks blueprint, then just list it there. Not tested.
coko
January 5, 2021, 3:55pm
7
This seems to works, extending all the fields. If I donāt extend theme all I only get the image and heading field to choose from.
fieldsets:
image:
extends: blocks/image
fields:
class:
label: class
type: text
heading:
extends: blocks/heading
fields:
text:
type: writer
marks: false
text:
extends: blocks/text
list:
extends: blocks/list
markdown:
extends: blocks/markdown
quote:
extends: blocks/quote
gallery:
extends: blocks/gallery
video:
extends: blocks/video
code:
extends: blocks/code
btw: Front end renders this properly
coko
January 5, 2021, 4:17pm
8
According: https://getkirby.com/docs/reference/panel/fields/blocks#custom-block-types after the core types?
Because this works and is obviously better than the example above (extending all the fields):
fieldsets:
- text
- list
- markdown
- quote
- gallery
- video
- code
image:
extends: blocks/image
fields:
class:
label: Class
type: text
heading:
extends: blocks/heading
fields:
text:
type: writer
marks: false
Would be nice if in the reference this text:Custom blocks are defined directly in the fieldsets list: Custom blocks are defined directly in the fieldsets list after the core types:
Hello,
I have the same issue, also discussed in another ticket, yet this one seems to be very similar to my problem.
Hereās my blueprint:
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
texnixe
February 24, 2021, 8:07pm
10
What exactly is your issue? Once you add custom block types, you have to spell out all the other ones you want to use (in no particular order).
So before and/or after your fieldset,
fieldsets:
- heading
feedimage:
extends: blocks/image
# rest of your fieldset
- text
- code
Hello Sonja,
Thanks for your quick answer.
Hereās what I need to do:
layout:
type: layout
layouts:
- "1/1"
- "1/2, 1/2"
fieldsets:
- heading
imageblock:
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
However, I doesnāt render my images set. The Heading block works fine!
texnixe
February 24, 2021, 8:41pm
12
Ah, but if you give the block type a different name than the original, you need a snippet with that name.
In the frontend. The panel is all fine!
texnixe
February 24, 2021, 8:43pm
14
I have overwritten my own post, so see above.
Or use the same fieldset name, ie. image instead of imageblock.
Iām sorry but to be clear, which part I need to rename then?
texnixe
February 24, 2021, 8:52pm
16
Either replace āimageblockā in the blueprint with āimageā, or create a custom block snippet called āimageblockā
That did work ! I didnāt know that the name had to be the same.
Thanks a lot !!
Oh in fact it worked very fine for the image. It does append in the frontend. However for the other field such as āmarginā which is a radio field, I canāt achieve to append this column field in the front.
Here is my code:
layout:
type: layout
layouts:
- "1/1"
- "1/2, 1/2"
fieldsets:
image:
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
and hereās what I tried for the template:
<?php foreach ($page->layout()->toLayouts() as $layout): ?>
<section class="section grid">
<?php foreach ($layout->columns() as $column): ?>
<div class="column" style="--columns: <?= $column->width() ?>">
<?php foreach ($column->blocks()->image() as $block): ?>
<div class="block block-type-<?= $block->type() ?>">
<?php snippet('blocks/' . $block->type(), ['block' => $block, 'layout' => $layout]) ?>
</div>
<?php endforeach ?>
</div>
<?php endforeach ?>
</section>
<?php endforeach ?>
Thanks a lot
texnixe
February 24, 2021, 10:44pm
19
Right, if you add fields, you would have to overwrite the snippet and put your custom snippet in site/snippets/blocks. If you donāt want to apply this to all image blocks, using a custom name + a custom snippet is probably the better option.
It works ! Thanks a lot !!
