I’m using the layout field to include a grid of people’s profile images. The layout options obviously need to be complete rows, for example 4 or 5 rows of 3 columns. But if the last row has 1 or 2 people in it, I want the items in the ‘incomplete’ row to be centred. But to achieve that I need to hide any empty column divs.
Attempt 1: using :empty
I first tried adding display: none; to the parent column div when the blocks div is empty. However, even when I don’t add any blocks to the layout column, the blocks div is not completely empty – it contains some tabs and/or spaces.
Attempt 2: using if with isNotEmpty in the grid snippet
Better still, I’d like to be able to hide the entire column div when it contains no blocks. But I can’t get this to work.
This is my custom /site/snippets/blocks/grid.php file…
<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php foreach ($block->grid()->toLayouts() as $layout): ?>
<section class="grid" id="<?= $layout->id() ?>">
<?php foreach ($layout->columns() as $column): ?>
<?php if ($column->isNotEmpty()): ?>
<div class="column" style="--span:<?= $column->span() ?>">
<div class="blocks">
<?= $column->blocks() ?>
</div>
</div>
<?php endif ?>
<?php endforeach ?>
</section>
<?php endforeach ?>
But even with the if statement, the end-of-row ‘empty’ column still appears in the page…
I suspect it’s something wrong with the way the if statement is written but I can’t figure it out. Even if I move the if statement to surround the blocks div instead, the blocks div still appears in the page.
Any pointers on what I’m missing would be appreciated.
The version with the if statement should work, provided the column really does not contain any blocks. Note that isNotEmpty() won’t work if the column actually contains an (empty) block.
$column->isNotEmpty() internally counts the number of blocks in a column (ignoring hidden ones).
Hi, Sonja. Thanks for the feedback.
That last column is empty in the Panel…
…which appears to be borne out by the content .txt file…
Based on your feedback, I tried removing the blocks div from the /site/snippets/blocks/grid.php file, so that the column divs wouldn’t have any content other then the content blocks added in the Panel…
<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php foreach ($block->grid()->toLayouts() as $layout): ?>
<section class="grid" id="<?= $layout->id() ?>">
<?php foreach ($layout->columns() as $column): ?>
<?php if ($column->isNotEmpty()): ?>
<div class="column" style="--span:<?= $column->span() ?>">
<?= $column->blocks() ?>
</div>
<?php endif ?>
<?php endforeach ?>
</section>
<?php endforeach ?>
In theory, shouldn’t that make the if statement work? But even if I clear cache in the Panel and the browser, when I refresh the webpage the child blocks divs still appear. That’s clearly why the :empty pseudo-class doesn’t work but it makes me wonder if my custom grid.php file isn’t getting recognised.
In addition, all of the blocks divs seems to contain rogue content in the form of four tabs. I’m not sure where that’s coming from because it’s not in the custom grid.php file. Unless, that file really isn’t being used.
This is the code as it appears in the page source and in Dev Tools. I’ve tidied it up a bit for legibility and added some comments…
<section class="grid" id="53b009f9-96f4-48f6-b898-ef364281e36d">
<div class="column" style="--span:4">
<div class="blocks">
<figure data-ratio="auto" class="text-center">
<img src="http://localhost/projects/wendovertrust/media/pages/about/3c235cbdeb-1711277423/gwen-williams.webp" alt="Gwen WIlliams picture">
</figure>
<!-- In the line below, the space between the </p> and </div> tags is those four rogue tabs. -->
<p><span class="txt-c">Dr Gwen Williams (Chair)</span></p> </div>
</div>
<!-- The other column divs with content follow exactly the same format as above, complete with tabs at the end of the content. Until the last 'empty' column div, which contains the tabs and nothing else... -->
<div class="column" style="--span:4">
<div class="blocks"> </div>
</div>
</section>
I can’t figure out…
- Why the blocks divs still appear after being removed from the custom
grid.php file
- If that file isn’t being recognised, why not
- Why the content contains rogue tabs that then prevent
:empty from working.
Any further thoughts would be appreciated.
could you do the following, before the if statement, add
<?php dump($column->blocks()->count()) ?>
That should print the number of blocks in each column.
Hi, Sonja. Sorry for the delayed response – I’ve been away for a couple of days.
That doesn’t seem to have done anything. The custom snippet now looks like this…
<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php foreach ($block->grid()->toLayouts() as $layout): ?>
<section class="grid" id="<?= $layout->id() ?>">
<?php foreach ($layout->columns() as $column): ?>
<?php dump($column->blocks()->count()) ?>
<?php if ($column->isNotEmpty()): ?>
<div class="column" style="--span:<?= $column->span() ?>">
<?= $column->blocks() ?>
</div>
<?php endif ?>
<?php endforeach ?>
</section>
<?php endforeach ?>
…but the front-end page is unchanged. Where should the number of blocks appear?
Hm, somehow I have a feeling that this snippet doesn’t do anything. Sure you are making your changes in the correct snippet?
Sonja, you’re right. I was editing my custom grid.php block but, from your prompt, I realised that it’s a different snippet controlling that particular piece of content. I was staring at it so hard that I missed the obvious!
Thanks for your help and sorry for wasting your time.
