Outputting data

It overwhelms me to look through the numerous posts, so I only refer to the last post.
Please try the following code:

<span><?= $page->accordiondescriptionins()
->kt()->inline() ?></span>

A tip for this help forum:
Limit your queries and keep them short, bundle your wording into understandable statements.

Thanks for trying to help. I don’t think that’s the problem, though, one of the problems was the syntax error and then there’s probably a wrong variable name error as well, but the use of variable names keep changing from post to post. I already tried to explain that in another thread, but finally gave up :woman_shrugging:

Hello,

I tried adding this: structuretwo: label: Stoffe type: structure fields: image: label: Image type: files layout: cards max: 1 label: label: Label type: text default: Label

to this code:

title: Betten
preset: page
num: zero

status:
  draft: true
  listed: true

fields:
  Name:
    label: Produktname
    type: text

  Beschreibung:
    label: Beschreibung
    type: text

  Accordionbeschreibungeins:
    label: Produktinfos
    type: text

  Accordionbeschreibungzwei:
    label: Oberfläche
    type: text

  files:
    label: Produktbild
    type: files
    template: image

structure:
  label: Holzarten
  type: structure
  fields:
    image:
      label: Image
      type: files
      layout: cards
      max: 1
    label:
      label: Label
      type: text
      default: Label

structuretwo:
  label: Stoffe
  type: structure
  fields:
    image:
      label: Image
      type: files
      layout: cards
      max: 1
    label:
      label: Label
      type: text
      default: Label

but it’s not showing in the panel.

Thanks for trying to help. My statements are very clear but require you to take the time to read them and I understand that not everyone has the time. The issue is simple: JavaScript is needed in order to output the values entered in the Kirby panel when in fact, the task of outputting the values should be accomplished by using PHP. I’m still working on the issue.

Definitely not, but I already explained your options in another thread.

Hi Ms. Broda, Yes, you’re right, but JavaScript makes it work in my ‘strange case’ and I’m working on a solution that will make it work with PHP only as it normally should.

This did it:

 structure:
  label: Holzarten
  type: structure
  fields:
    image:
      label: Image
      type: files
      layout: cards
      max: 1
    label:
      label: Label
      type: text
      default: Label
      
 structuretwo:
  label: Stoffe
  type: structure
  fields:
    image:
      label: Image
      type: files
      layout: cards
      max: 1
    label:
      label: Label
      type: text
      default: Label

Now I’ve two.

This code outputs the data without relying on JavaScript (JavaScript is only needed to make the Slidshow function). However, the data is not being outputted correctly. For example, this part only outputs one image in the palette.

Also, only one bed image is shown on the page itself (not the modal slideshow), the second image on the page (not the modal slideshow) is that of an image from the palette instead of the second bed which should only be shown inside the product palette.

<!-- ======= Product Palette  ======= -->

                                <?php
                                // using the `toStructure()` method, we create a structure collection
                                $items = $betten->structure()->toStructure();
                                // we can then loop through the entries and render the individual fields
                                foreach ($items as $item) : ?>
                                    <div class="palette-box">
                                        <div class="image-container">
                                            <h3><?= $item->label()->html() ?></h3>
                                            <img src="<?= $item->image()->toFile()->url() ?>">
                                        </div>
                                    </div>
                                <?php endforeach ?>
                            </div>
                        </div>
                    </div>

Here is the complete code of the betten.php template:

<?php snippet('header') ?>

<!-- ======= Introduction ======= -->

<div class="main-container">
    <main>
        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui voluptas provident nostrum velit incidunt. Quia mollitia cumque praesentium assumenda exercitationem quo inventore, voluptates harum saepe, vel, in quasi ratione amet?
        </p>
    </main>
</div>

<!-- ======= Products No. 2 ======= -->

<article class="beds">
    <?php if ($p = page('betten')) : ?>
        <?php foreach ($p->children()->limit(26) as $betten) : ?>
            <div class="beds-box">
                <a href="#" class="popup-trigger" data-image="<?= $betten->image()->url() ?>">
                    <?php if ($image = $betten->image()) : ?>
                        <img src="<?= $image->url() ?>" class="clickable-image">
                    <?php endif ?>
                </a>
                <div class="beds-box-title">
                    <h3><?= $betten->title()->html() ?></h3>
                </div>
                <div class="js-modal" style="display: none;">

                    <div class="single-product">
                        <div class="the-product">
                            <img data-id="popup-image" src="" alt="Popup Image" class="slida">
                        </div>
                        <div class="product-description">
                            <ul class="breadcrumb">
                                <?php foreach ($site->breadcrumb() as $crumb) : ?>
                                    <li<?php e($crumb->isActive(), ' aria-current="location"') ?>><a href="<?= $crumb->url() ?>"><?= $crumb->title()->html() ?></a></li>
                                    <?php endforeach; ?>
                            </ul>
                            <h4><?php echo $betten->name(); ?></h4>
                            <p><?php echo $betten->beschreibung(); ?></p>

                            <!-- ======= Bootstrap Accordion ======= -->

                            <div class="accordion accordion-flush" data-id="accordionFlushExample">

                                <!-- Accordion 1 -->

                                <div class="accordion-item">
                                    <h2 class="accordion-header" data-id="flush-headingOne">
                                        <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                            Produktinfos
                                        </button>
                                    </h2>
                                    <div data-id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body"><span><?php echo $betten->accordionbeschreibungeins(); ?></span></div>
                                    </div>
                                </div>

                                <!-- Accordion 2 -->

                                <div class="accordion-item">
                                    <h2 class="accordion-header" data-id="flush-headingTwo">
                                        <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                            Oberfläche
                                        </button>
                                    </h2>
                                    <div data-id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body"><span><?php echo $betten->accordionbeschreibungzwei(); ?></span></div>
                                    </div>
                                </div>

                                <!-- Accordion 3 -->

                                <div class="accordion-item">
                                    <h2 class="accordion-header" data-id="flush-headingThree">
                                        <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                            Holzarten
                                        </button>
                                    </h2>
                                    <div data-id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">

                                            <!-- ======= Product Palette  ======= -->

                                            <?php
                                            // using the `toStructure()` method, we create a structure collection
                                            $items = $betten->structure()->toStructure();
                                            // we can then loop through the entries and render the individual fields
                                            foreach ($items as $item) : ?>
                                                <div class="palette-box">
                                                    <div class="image-container">
                                                        <h3><?= $item->label()->html() ?></h3>
                                                        <img src="<?= $item->image()->toFile()->url() ?>">
                                                    </div>
                                                </div>
                                            <?php endforeach ?>
                                        </div>
                                    </div>
                                </div>

                                <!-- ======= Product Palette Stoffe ======= -->

                                <!-- Accordion 4 -->

                                <div class="accordion-item">
                                    <h2 class="accordion-header" data-id="flush-headingFour">
                                        <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
                                            Stoffe
                                        </button>
                                    </h2>
                                    <div data-id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body">

                                            <!-- ======= Dropdown Palette ======= -->

                                            <div class="product-palette">

                                                <div class="accordion-body">

                                                    <!-- ======= Product Palette  ======= -->

                                                    <?php
                                                    // using the `toStructure()` method, we create a structure collection
                                                    $items = $betten->structuretwo()->toStructure();
                                                    // we can then loop through the entries and render the individual fields
                                                    foreach ($items as $item) : ?>
                                                        <div class="palette-box">
                                                            <div class="image-container">
                                                                <h3><?= $item->label()->html() ?></h3>
                                                                <img src="<?= $item->image()->toFile()->url() ?>">
                                                            </div>
                                                        </div>
                                                    <?php endforeach ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="button-two" href="/kontakt"><?php echo $site->mehr(); ?> </a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach ?>
    <?php endif ?>
</article>

<!-- Adds the modal HTML structure -->

<div id="myModal" class="popupSlider">
    <span class="closeButton" id="closeSlider">&times;</span>
    <div class="slider-Content">
        <span class="arrow leftArrow" id="prevSlide">&#10094;</span>
        <span class="arrow rightArrow" id="nextSlide">&#10095;</span>

        <!-- ======= Single ======= -->

        <div class="single-product">
            <div class="the-product">
                <img id="popup-image" src="" alt="Popup Image" class="slida">
            </div>
            <div class="product-description">
                <ul class="breadcrumb">
                    <?php foreach ($site->breadcrumb() as $crumb) : ?>
                        <li<?php e($crumb->isActive(), ' aria-current="location"') ?>><a href="<?= $crumb->url() ?>"><?= $crumb->title()->html() ?></a></li>
                        <?php endforeach; ?>
                </ul>
                <h4><?php echo $betten->name(); ?></h4>
                <p><?php echo $betten->beschreibung(); ?></p>

                <!-- ======= Bootstrap Accordion ======= -->

                <div class="accordion accordion-flush" id="accordionFlushExample">

                    <!-- Accordion 1 -->

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                            <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                Produktinfos
                            </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body"><span><?php echo $betten->accordionbeschreibungeins(); ?></span></div>
                        </div>
                    </div>

                    <!-- Accordion 2 -->

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingTwo">
                            <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                                Oberfläche
                            </button>
                        </h2>
                        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body"><span><?php echo $betten->accordionbeschreibungzwei(); ?></span></div>
                        </div>
                    </div>

                    <!-- Accordion 3 -->

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingThree">
                            <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                                Holzarten
                            </button>
                        </h2>
                        <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">

                                <!-- ======= Product Palette  ======= -->

                                <?php
                                // using the `toStructure()` method, we create a structure collection
                                $items = $betten->structure()->toStructure();
                                // we can then loop through the entries and render the individual fields
                                foreach ($items as $item) : ?>
                                    <div class="palette-box">
                                        <div class="image-container">
                                            <h3><?= $item->label()->html() ?></h3>
                                            <img src="<?= $item->image()->toFile()->url() ?>">
                                        </div>
                                    </div>
                                <?php endforeach ?>
                            </div>
                        </div>
                    </div>

                    <!-- ======= Product Palette Stoffe ======= -->

                    <!-- Accordion 4 -->

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingFour">
                            <button class="accordion-button collapsed bold-accordion-header" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
                                Stoffe
                            </button>
                        </h2>
                        <div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
                            <div class="accordion-body">

                                <!-- ======= Dropdown Palette ======= -->

                                <div class="product-palette">

                                    <div class="accordion-body">

                                        <!-- ======= Product Palette  ======= -->

                                        <?php
                                        // using the `toStructure()` method, we create a structure collection
                                        $items = $betten->structuretwo()->toStructure();
                                        // we can then loop through the entries and render the individual fields
                                        foreach ($items as $item) : ?>
                                            <div class="palette-box">
                                                <div class="image-container">
                                                    <h3><?= $item->label()->html() ?></h3>
                                                    <img src="<?= $item->image()->toFile()->url() ?>">
                                                </div>
                                            </div>
                                        <?php endforeach ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="button-two" href="/kontakt"><?php echo $site->mehr(); ?> </a>
            </div>
        </div>
    </div>
</div>

<!-- ======= Snippets ======= -->

<?php snippet('info-block') ?>
<?php snippet('footer') ?>

Given a loop like this:

<?php

foreach ($pages as $p): // start of loop
  echo $p->title();
endforeach; // end of loop

// now when I try to output $p **outside** the loop, the variable only contains the last item that was stored in this variable.

dump($p);

This is the same in Kirby as it is on WordPress, which you claim to know very well in your profile. WP is a PHP application, Kirby is a PHP application, while very different in detail, the basic stuff with how loops and conditions and variables etc. work is always the same.

I don’t claim, I’ve built several WordPress templates myself from scratch.

I’m marking this as solved now, as the topic has grown huge with unrelated stuff, and the original question was already answered.

In the future, please open a new topic when you have unrelated questions, thank you!