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.
texnixe
September 18, 2023, 9:18pm
22
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
learn79
September 19, 2023, 4:15pm
23
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.
learn79
September 19, 2023, 4:23pm
24
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.
texnixe
September 19, 2023, 5:59pm
25
Definitely not, but I already explained your options in another thread.
learn79
September 19, 2023, 6:11pm
26
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.
learn79
September 19, 2023, 6:14pm
27
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.
learn79
September 19, 2023, 7:25pm
28
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">×</span>
<div class="slider-Content">
<span class="arrow leftArrow" id="prevSlide">❮</span>
<span class="arrow rightArrow" id="nextSlide">❯</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') ?>
texnixe
September 19, 2023, 8:10pm
29
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.
learn79
September 19, 2023, 8:17pm
30
I don’t claim, I’ve built several WordPress templates myself from scratch.
texnixe
September 19, 2023, 9:16pm
31
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!