Two types of blocks (Alternately)

Kirby 3 Solved ✅
1

Hi,

I have a question.
I have some ‘tours’ and want them output alternately with two types of blocks.

1-2-1-2
1-2-1-2899×1126 51 KB

FIRST BLOCK

<?php if ($page = page('tours')): ?>
<?php foreach($page->children()->listed() as $tour): ?>    
            <div class="row light-bg">
                <div class="col-sm-6 no-pad-right">
                    <?php if ($image = $tour->cover()->toFile()): ?>
                    <div class="fixed-img-tours" style="background-image: url(<?= $image->crop(555, 555)->url() ?>);"></div>
                    <?php endif ?>
                </div>
                <div class="col-sm-6 about-me" style="padding: 5em;">
                    <div class="page-title mar-top-0 mar-bot-0" style="margin-top: 50px;">
                        <h2><?= $tour->title() ?></h2>
                        <?php if ($tour->experiencetext1()->isNotEmpty()) : ?>
                        <p><?= $tour->experiencetext1()->kirbytextinline()->excerpt(300) ?></p>
                        <?php endif ?>
                        <a href="<?= $tour->url() ?>" class="red">Read More</a>
                    </div>
                </div>
            </div>
    <?php endforeach ?>

        <?php endif ?>

SECOND BLOCK

<?php if ($page = page('tours')): ?>
    <?php foreach($page->children()->listed() as $tour): ?>    
        <div class="row light-bg">
            
            <div class="col-sm-6 about-me " style="padding: 5em;">
                <div class="page-title" style="margin-top: 50px !important;">
                    <h2><?= $tour->title() ?></h2>
                            <?php if ($tour->experiencetext1()->isNotEmpty()) : ?>
                            <p><?= $tour->experiencetext1()->kirbytextinline()->excerpt(300) ?></p>
                            <?php endif ?>
                    <a href="<?= $tour->url() ?>" class="red">Read More</a>
                </div>
            </div>
            <div class="col-sm-6 no-pad-left">
                 <?php if ($image = $tour->cover()->toFile()): ?>
                        <div class="fixed-img-tours" style="background-image: url(<?= $image->crop(555, 555)->url() ?>);"></div>
                        <?php endif ?>
            </div>
        </div>

I tried this with $pages->offset() but then I only starts by a certain number.

Can anybody give me advice how to do this?

Thanks!!

2

I’d actually solve this with CSS only, using the order property of flexbox, depending on whether or not the item is even or odd.

If you really want two different markups, create two snippets and call them alternating, if index is odd, snippet one, if index is even, snippet two.

1 Like
3

Thanks for your suggestion.
I used the alternating one with the snippets:

<div class="container">
<div id="content-wrapper" style="margin-top: 110px;">
<?php if ($page = page('tours')): ?>    
<?php $n = 0; foreach($page->children()->listed() as $tours): $n++; ?>
<?php snippet(r($n%2==0, 'even', 'odd')) ?>
<?php endforeach ?>          
<?php endif ?>             

        </div>
    </div>

And for the odd (variation of the ‘odd’ is the ‘even’ one):

<?php foreach($page->children()->listed()->offset(1) as $tour): ?> 
<div class="row light-bg">
    <div class="col-sm-6 no-pad-right">
        <?php if ($image = $tour->cover()->toFile()): ?>
        <div class="fixed-img-tours" style="background-image: url(<?= $image->crop(555, 555)->url() ?>);"></div>
        <?php endif ?>
    </div>
    <div class="col-sm-6 about-me" style="padding: 5em;">
        <div class="page-title mar-top-0 mar-bot-0" style="margin-top: 50px;">
            <h2><?= $tour->title() ?></h2>
            <?php if ($tour->experiencetext1()->isNotEmpty()) : ?>
            <p><?= $tour->experiencetext1()->kirbytextinline()->excerpt(300) ?></p>
            <?php endif ?>
            <a href="<?= $tour->url() ?>" class="red">Read More</a>
        </div>
    </div>
</div>
    <?php endforeach ?>

But now it shows only the first article (offsett(1) ) in both of my snippets (the same). How can I make it that every snippet is a new one?

Thanks

4

You have a logic error. The loop is in the template, the snippets only display a single item.

The loop: We call the snippet and pass on the variable to the snippet:

<div class="container">
<div id="content-wrapper" style="margin-top: 110px;">
<?php if ($page = page('tours')): ?>    
<?php $n = 0; foreach($page->children()->listed() as $tour): $n++; ?>
<?php snippet(r($n%2==0, 'even', 'odd'), ['tour' => $tour) ?>
<?php endforeach ?>          
<?php endif ?>             

        </div>
    </div>

The snippet: no more loops

<div class="row light-bg">
    <div class="col-sm-6 no-pad-right">
        <?php if ($image = $tour->cover()->toFile()): ?>
        <div class="fixed-img-tours" style="background-image: url(<?= $image->crop(555, 555)->url() ?>);"></div>
        <?php endif ?>
    </div>
    <div class="col-sm-6 about-me" style="padding: 5em;">
        <div class="page-title mar-top-0 mar-bot-0" style="margin-top: 50px;">
            <h2><?= $tour->title() ?></h2>
            <?php if ($tour->experiencetext1()->isNotEmpty()) : ?>
            <p><?= $tour->experiencetext1()->kirbytextinline()->excerpt(300) ?></p>
            <?php endif ?>
            <a href="<?= $tour->url() ?>" class="red">Read More</a>
        </div>
    </div>
</div>
5

Thanks for your help.
I think

<?php snippet(r($n%2==0, 'even', 'odd'), ['tour' => $tour) ?>

Must be:

<?php snippet(r($n%2==0, 'even', 'odd'), ('tour' => $tour) ?>

But I got a “syntax error, unexpected ‘=>’ (T_DOUBLE_ARROW) error.”

6

No, I missed a closing square bracket, too late…:sleeping:

<?php snippet(r($n%2==0, 'even', 'odd'), ['tour' => $tour]) ?>
1 Like
7

Thank you so much! Was struggling with this for hours!

:pray: