Clickthrough gallery with metadata

Kirby 3 Questions šŸ¤”
1

Hello,

I have made a clickthrough gallery with some simple javascript which works, but I would like to also display the image metadata. I cant seem to get the metadata to update with the src. Iā€™m copying the code here. I imagine there is a simple solution I am missing. Is there a way to get the file based on id - so I could display the metadata of the ā€œfeatured-imageā€?

Thank you!

<?php snippet('header') ?> <?php snippet('menu') ?> <?php snippet('mobilemenu') ?> 
<figcaption>

  <div>
    <h1><?= $page->title() ?></h1>

    <h1><?= $page->headline()->or($page->gallery()) ?></h1>
    <time class="project-year"><?= $page->year() ?></time>
    <?php if ($page->intro()->isNotEmpty()) : ?>
      <div class="toptext">
        <?= $page->intro()->kt()->lower() ?>
      </div>
    <?php endif ?>
  </div>
</figcaption>

<div class="project-text">
  <?= $page->text()->kt()->lower() ?>

  <?php if ($page->textTwo()->inNotEmpty()) : ?>
    <?= $page->textTwo()->lower() ?>
  <?php endif ?>
</div>


<div class="project-cover">
  <?php if ($cover = $page->image()) : ?>
    <figure class="project-cover">
      <img src="<?= $cover->resize(1200, 1000)->url() ?>" alt="<?= $cover->alt() ?>" id="featured-image" />
      <div class="credits">

      <p> <?php if ($cover->alt()->isNotEmpty()) : ?>
            <?= $cover->alt() ?>
          <?php endif ?></p>

        <p> <?php if ($cover->title()->isNotEmpty()) : ?>
            <?= $cover->title() ?>
          <?php endif ?></p>

        <p> <?php if ($cover->technique()->isNotEmpty()) : ?>
            <?= $cover->technique() ?>
          <?php endif ?> </p>
        <p> <?php if ($cover->year()->isNotEmpty()) : ?>
            <?= $cover->year() ?>
          <?php endif ?> </p>
      
          <script>
      var coverMetadata = {
        title: '<?= $cover->title() ?>',
        technique: '<?= $cover->technique() ?>',
        year: '<?= $cover->year() ?>',
        collection: '<?= $cover->collection() ?>'
      };
    </script>
      </div>
    </figure>
  <?php endif ?>


</div>

<div class="gallery">
<?php if ($gallery = $page->images()->sortBy('sort', 'asc')) : ?> 
<ul class="project-gallery">
  <?php foreach ($gallery as $index => $image) : ?>
    <li
      data-title="<?= $image->title() ?>"
      data-technique="<?= $image->technique() ?>"
      data-year="<?= $image->year() ?>"
      data-collection="<?= $image->collection() ?>"
    >
      <a href="">
        <img
          src="<?= $image->resize(1200, 1000)->url() ?>"
          alt="<?= $image->alt() ?>"
          class="gallery-image"
        />
      </a>
      <div class="credits">

      <p> <?php if ($image->alt()->isNotEmpty()) : ?>
            <?= $image->alt() ?>
          <?php endif ?></p>

        <p> <?php if ($image->title()->isNotEmpty()) : ?>
            <?= $image->title() ?>
          <?php endif ?></p>

        <p> <?php if ($image->technique()->isNotEmpty()) : ?>
            <?= $image->technique() ?>
          <?php endif ?> </p>
        <p> <?php if ($image->year()->isNotEmpty()) : ?>
            <?= $image->year() ?>
          <?php endif ?> </p>
        <p> <?php if ($image->collection()->isNotEmpty()) : ?>
            <?= $image->collection() ?>
          <?php endif ?><p>
      </div>
    </li>
  <?php endforeach ?>
</ul>
<?php endif ?>

X

 <?php snippet('footer') ?>
2

heres the script -

// Get all gallery images, including the featured image
const galleryImages = document.querySelectorAll(ā€˜.gallery-imageā€™);
const featuredImage = document.getElementById(ā€˜featured-imageā€™);

// Get the elements for title, technique, year, and collection
const titleElement = document.querySelector(ā€˜.project-cover .credits p:nth-child(1)ā€™);
const techniqueElement = document.querySelector(ā€˜.project-cover .credits p:nth-child(2)ā€™);
const yearElement = document.querySelector(ā€˜.project-cover .credits p:nth-child(3)ā€™);
const collectionElement = document.querySelector(ā€˜.project-cover .credits p:nth-child(4)ā€™);

// Combine the featured image with the gallery images
const allImages = [featuredImage, ā€¦galleryImages];

// Variable to keep track of the current image index
let currentImageIndex = 0;

// update the featured image and info with the specified index
function updateFeaturedImage(index) {
// Update the source and alt attributes of the featured image with the image at the given index
featuredImage.src = allImages[index].src;
featuredImage.alt = allImages[index].alt;
featuredImage.title = allImages[index].title;

// Update the title, technique, year, and collection based on the data attributes of the currently displayed gallery image
const currentGalleryImage = galleryImages[index];
titleElement.textContent = currentGalleryImage.dataset.title || '';
techniqueElement.textContent = currentGalleryImage.dataset.technique || '';
yearElement.textContent = currentGalleryImage.dataset.year || '';
collectionElement.textContent = currentGalleryImage.dataset.collection || '';

// Remove the "active" class from all gallery images
allImages.forEach(image => image.classList.remove('active'));

// Add the "active" class to the image at the given index to visually highlight it
allImages[index].classList.add('active');

// Update the current image index
currentImageIndex = index;

}

// handle click event on gallery images
function onGalleryImageClick(event) {
event.preventDefault();
const clickedImage = event.target;
const clickedIndex = [ā€¦galleryImages].findIndex(image => image === clickedImage);

// Update the featured image with the clicked image
updateFeaturedImage(clickedIndex);

}

// handle click event on the featured image

function onFeaturedImageClick() {
const nextIndex = (currentImageIndex + 1) % galleryImages.length;
updateFeaturedImage(nextIndex);

  // Update meta information based on the next image's metadata
  const nextGalleryImage = galleryImages[nextIndex];
  titleElement.textContent = nextGalleryImage.dataset.title || '';
  techniqueElement.textContent = nextGalleryImage.dataset.technique || '';
  yearElement.textContent = nextGalleryImage.dataset.year || '';
  collectionElement.textContent = nextGalleryImage.dataset.collection || '';

  // For the cover image, use embedded metadata
  if (nextIndex === 0 && typeof coverMetadata !== 'undefined') {
    titleElement.textContent = coverMetadata.title || '';
    techniqueElement.textContent = coverMetadata.technique || '';
    yearElement.textContent = coverMetadata.year || '';
    collectionElement.textContent = coverMetadata.collection || '';
  }
}

// Add a click event listener to each gallery image
galleryImages.forEach(image => image.addEventListener(ā€˜clickā€™, onGalleryImageClick));

// Add a click event listener to the featured image to update it separately
featuredImage.addEventListener(ā€˜clickā€™, onFeaturedImageClick);