Iterating though children for a slideshow carousel

[cooper]

Hello!
I am working on a project that displays the research an artist did for a video work.
It should allow users to swipe between individual paragraphs of transcript text (one paragraph appearing at a time), with links to reference PDFs/images/iframed websites that should pop up within the same window when clicked, and be able to be dragged around (an effect like this)

(in the mockup above, the orange link would bring up the draggable PDF that pops up on top of it)

I set up a blueprint for individual stanzas that is basically just the text block type and a file field:

stanza.yml
columns:
  - width: 2/3
    fields:
      text:
        type: blocks
  - width: 1/3
    sections:
      meta:
        type: fields
        fields:
          images:
            type: files
            multiple: true

and it’s working well to display all the individual slides within a carousel:

stanzas.php
<?php foreach ($stanzas as $stanza): ?>
<div class="gallery-cell"><div class="stanza-container">
 <?php snippet('stanza', ['stanza' => $stanza]) ?>
</div>
</div>
<?php endforeach ?>

1) A question about the link behavior:
Using text blocks as I do above works well to display each paragraph with standard hyperlinks, but in order to do these special draggable popup links I need to add a custom class/id to certain links (at least that’s how I know how to do it). I’m not sure how to do this (to change the fields that appear in the text block hyperlink editor below so that they can include custom class/id)

So I am wondering either how to add class/id fields to the link editor above, or (preferably) is it possible to just use an HTML editor instead of the WYSIWYG editor in my stanza.yml blueprint so I can just write the paragraphs as HTML blocks…? I see the blocks editor has a ‘code’ block type, but it doesn’t seem to be the right solution.

2) A question about iterating through the stanza children
As you can see in stanzas.php, there is a foreach loop that constructs the carousel. The whole transcript is quite long and I am worried about loading time, so I am wondering if anyone can suggest a way to iterate through these individual paragraphs where each carousel slide gets loaded individually (kind of a like a lazy loading situation)?
2B) The cherry on top: the client would like these stanzas to be iterated through randomly- the stanzas appear in a different order on each load. I just started trying to solve that aspect of the slideshow, but if anyone can point me in a direction that would be great.

[texnixe]

Ideally, you would overwrite the link dialog, but I don’t know how complex that is. While it’s easy to change the dialog and add another field for class/id, you would then have to figure out how you get that value into the output. Probably doable, but beyond my Vue skills.

And alternative would be to use a textarea field instead of a writer field and where you can then add the class via the link Kirbytag.

As regards loading, you could load these stanzas via Ajax.

[cooper]

Awesome @texnixe, the textarea field is a perfect solution for adding the classes!

I am going to look into using Ajax to load the stanzas, appreciate the tip

[cooper]

Does anyone have any tips for loading children elements I am iterating through with AJAX?
The snippet in the top of this post (stanzas.php) has the foreach loop that fetches PDFs, images, and gifs and makes a large carousel of them. I still cannot figure out how to use AJAX to load them separately (when I arrive on the individual carousel slide) and since there are so many files it is a reallllly long loading time.
If anyone can point me in a direction that might help I would really appreciate it, thank you

[texnixe]

@cooper

<?php snippet('stanza', ['stanza' => $stanza]) ?>

So this snippet is what needs to be loaded with Ajax, right? Or the stuff inside this snippet? Trying to understand the structure. And when do these files come into viewport? On scroll?

In any case, you need a JavaScript event listener of some sort that then loads the stuff that needs to be loaded with Ajax.

We have a recipe here that might help you get started: Load more with Ajax | Kirby CMS

Of course, needs to be adapted to your particular case.

[cooper]

Thank you @texnixe ,
I will look into that recipe you sent now.

About the structure: The template stanzas.php generates a carousel that uses Flickity, each slide comes into view with either keyboard navigation or L/R arrows.

stanzas.php has the foreach loop that generates

1. The slide content (through a snippet called stanza, this is really lightweight and just rendering a paragraph of text and buttons that bring up the popups)
2. The pop-ups that are associated with each slide (through a snippet called popups: PDFs, videos, iframes- this is the part that I’m most concerned about with loading)

If this is still unclear, here is the page where this is used: science fiction is not pretend (link is live at the time of posting 23/02/2022)

stanzas.php
<div class="gallery js-flickity">
<?php foreach ($stanzas as $stanza): ?>
<div class="gallery-cell">
<?php snippet('popups', ['stanza' => $stanza]) ?>
  <div class="stanza-container">
      <?php snippet('stanza', ['stanza' => $stanza]) ?>
  </div>
</div>
<?php endforeach ?>
</div>

The popup links are what’s really resource-intensive, so this is what I am most prioritizing for loading with AJAX.

popups.php
<?php
$items = $stanza->windows()->toStructure();
foreach ($items as $item): ?>
<div id="mydiv<?= $item->popupnumber()->html() ?>" class="mydiv <?= $item->sizingclass()->html() ?>">
<div id="mydiv<?= $item->popupnumber()->html() ?>header" class="mydivheader">
<?php if ($item->popuptitle()->isNotEmpty()): ?>
<p class="windowTitle"><?= $item->popuptitle()->html() ?></p>
<?php endif ?>
<?php if ($item->newtab()->isNotEmpty()): ?>
<a class="externalLink" href="<?= $item->newtab()->html() ?>" target='_blank'><?php if ($item->newtabtext()->isNotEmpty()): ?><?= $item->newtabtext()->html() ?><?php endif ?> <img alt ="open in new tab" class="svg-cta-sm"  src="https://cooperlovano.com/pom/assets/svg/tab.svg" /></a>
<?php endif ?>
<img id="closeButton<?= $item->popupnumber()->html() ?>" alt ="close transcript" class="svg-cta"  src="https://cooperlovano.com/pom/assets/svg/close.svg" />
</div>
<!--Image-->
<?php if ($item->toggleimg()->isTrue()): ?>
<img class="popup-img" alt= '<?= $item->alttext()->html() ?>' data-flickity-lazyload="<?= $item->mediaurl()->html() ?> " />
<?php endif ?>
<!--pdf-->
<?php if ($item->togglepdf()->isTrue()): ?>
<iframe src="<?= $item->mediaurl()->html() ?>"></iframe>
<?php endif ?>
<!--website-->
<?php if ($item->togglewebsite()->isTrue()): ?>
<iframe src="<?= $item->mediaurl()->html() ?>"></iframe>
<?php endif ?>
<!--big text-->
<?php if ($item->togglebigtext()->isTrue()): ?>
<h2 class="bigtext"><?= $item->bigtext()->kt() ?></h2>
<?php endif ?>
</div>
<?php endforeach ?>

I am going to read through the Loading with Ajax link you sent and see if it can be possible to set this up to trigger on both the L/R navigation as well as the keyboard navigation, thank you