How to create elements with text content and image silder in the panel?

Kirby 3 Solved ✅
1

Hey everyone,

I have a question. I made a project subpage with several projects elements.

Each project element contains a heading with some text and a swiper slider with multiple images.

How could it be possible to add and remove the entire project element via the panel (heading, text, image slider)?

It’s my first time trying something more complex.

My template code:

<section class="objekt-element">

    <div class="objekt-heading">
        <h2><?=$page->objekt1_titel()?></h2>
    </div>

    <div class="objekt-text">
        <?=$page->objekt1_text()->kt()?>
    </div>

    <div class="swiper-container swiper1">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <?php foreach($page->find('gallery_1')->images() as $image): ?>
            <div class="swiper-slide"><img class="slide" src="<?php echo $image->resize(1000, 667)->url() ?>"
                    alt="<?= $image->alt() ?>"></div>
            <?php endforeach ?>

        </div>

        <!-- If we need pagination -->
        <div class="swiper-pagination swiper-pagination1"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
</section>

This code block gets repeated multiple times and i change all names to objekt_2_text and gallery_2 and so on…I know this is a „creative“ solution :smiley:

My Blueprint:

title: Dienstleistung

columns:
  left:
    width: 2/3
    sections:
      content:
        type: fields
        fields:
          info:
            label: info
            type: info
            text: Die Nummerierung, der Elemente ist passend zu der Gallerie auf der rechten Seite. Die Inhalte gehören zusammen. z.b. Objekt 1 Text => Gallerie_1
          objekt1_titel:
            label: Objekt 1 Titel
            type: text
          objekt1_text:
            label: Objekt 1 Inhalt
            type: textarea
          objekt2_titel:
            label: Objekt 2 Titel
            type: text
          objekt2_text:
            label: Objekt 2 Inhalt
            type: textarea

  right:
    width: 1/3
    sections:
      files:
        type: files
        headline: Headerbild
        template: image
      gallery:
        headline: Gallerien
        type: pages
        layout: cards
        max: 5
        image:
          cover: true

each gallery is a subpage.

If I delete the gallery content in the panel, I get the Call to a member function images() on null error. I know that is because there aren’t any images.

Is ist possible to change the code in the template that it doesn’t matter if there aren’t any images and
if there are any they get displayed?

I have the feeling that my hole approach could be wrong because I´m repeating myself for each element in the template. Because of that I have no chance for dynamic content via the panel. Could it be possible to generate the project elements with multiple structured fields? I’m thankful for every little clue.

2

I’d create either subpages or use a structure field with title, text and pages as fields.

1 Like
3

Thanks for your hint. I almost guessed it, but wasn’t sure. So I followed the instructions on the Kirby site and got it working. I have a structured field with an image field. But with multiple sliders, there are a lot of images. That gets messy really quick.

So I tried getting like you mentioned the gallery subpages in a structured field, but can’t get it to work. the images are not displayed.

My template

<?php 
// using the `toStructure()` method, we create a structure collection
$items = $page->objekte()->toStructure();
// we can then loop through the entries and render the individual fields
foreach ($items as $item): ?>
<section class="objekt-element">

    <div class="objekt-heading">
        <h2><?= $item->title()->html() ?></h2>
    </div>

    <div class="objekt-text">
        <?= $item->description()->kt() ?>
    </div>

    <div class="swiper-container">

        <div class="swiper-wrapper">
            <?php foreach ($page->gallery()->toFiles() as $image): ?>
            <div class="swiper-slide"><img class="slide" src="<?php echo $image->resize(1100, 667)->url() ?>"></div>
            <?php endforeach ?>
        </div>

        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
</section>
<?php endforeach ?>

My Fields in the Blueprint:

objekte:
            type: structure
            columns:
                title:
                    width: 1/4
                gallery:
                    width: 1/2
            fields:
                title:
                    type: text
                    size: large
                gallery:
                    type: pages
                description:
                    type: textarea
                    size: large

It would be unbelievably awesome, if you could help me figuring out, how to call subpages in a structured field. Thanks

4

Now I found out how to display images.

<?php foreach ($page->children()->images() as $image): ?>

But unfortunately it displays all images from the pages field. So every slider has all images from the subpages. I would like to have the specific subpage images from the gallery I selected in the blueprint.

5

If I don’t understand you wrong you could do <?php foreach ($item->gallery()->toPage()->images() as $image): ?>

1 Like
6

That worked exactly like I imagined it. From the bottom of my heart. Thank you! I’ve tried dozens of different things and couldn´t get it to work.

1 Like
7

I’m glad it worked :slight_smile: