Fix image lightbox click handling and module image size rendering

contao/config/services.yaml

@@ -15,7 +15,7 @@ services:
         name: contao.frontend_module
         category: application
         type: pinnwand
-        template: frontend_module/pinnwand
+        template: frontend/pinnwand
 
   Eiswurm\ContaoPinboardBundle\EventListener\DataContainer\PinboardTimestampListener:
     tags:

contao/templates/frontend/pinnwand.html.twig

@@ -0,0 +1,34 @@
+<link rel="stylesheet" href="{{ asset('bundles/contaopinboard/css/pinboard.css') }}">
+
+<section class="pinboard" data-pinboard>
+  <div class="pinboard__surface" data-pinboard-surface>
+    {% for entry in entries %}
+      <article
+        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
+        data-pin-note
+        data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
+        data-seed="{{ entry.id }}"
+        aria-label="{{ entry.headline }}"
+      >
+        {% if entry.imagePath %}
+          <figure class="pin-note__image-wrap">
+            <img src="{{ asset(entry.imagePath) }}" alt="" class="pin-note__image">
+          </figure>
+        {% endif %}
+
+        <h3 class="pin-note__headline">{{ entry.headline }}</h3>
+        <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>
+
+        {% if entry.link %}
+          <p class="pin-note__link-wrap">
+            <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>
+          </p>
+        {% endif %}
+      </article>
+    {% else %}
+      <p class="pinboard__empty">Keine veröffentlichten Pinnwandeinträge vorhanden.</p>
+    {% endfor %}
+  </div>
+</section>
+
+<script src="{{ asset('bundles/contaopinboard/js/pinboard.js') }}" defer></script>

src/Controller/FrontendModule/PinboardController.php

@@ -5,15 +5,22 @@ declare(strict_types=1);
 namespace Eiswurm\ContaoPinboardBundle\Controller\FrontendModule;
 
 use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController;
+use Contao\CoreBundle\Image\Studio\Studio;
 use Contao\CoreBundle\Twig\FragmentTemplate;
 use Contao\FilesModel;
 use Contao\ModuleModel;
+use Contao\StringUtil;
 use Eiswurm\ContaoPinboardBundle\Model\PinboardModel;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 
 final class PinboardController extends AbstractFrontendModuleController
 {
+    public function __construct(
+        private readonly Studio $studio,
+    ) {
+    }
+
     protected function getResponse(FragmentTemplate $template, ModuleModel $model, Request $request): Response
     {
         $collection = PinboardModel::findBy(
@@ -26,11 +33,27 @@ final class PinboardController extends AbstractFrontendModuleController
 
         if (null !== $collection) {
             foreach ($collection as $entry) {
-                $imagePath = null;
+                $imageFigure = null;
 
                 if ($entry->bild) {
                     $fileModel = FilesModel::findByUuid($entry->bild);
-                    $imagePath = $fileModel?->path;
+
+                    if (null !== $fileModel) {
+                        $figureBuilder = $this->studio
+                            ->createFigureBuilder()
+                            ->fromFilesModel($fileModel)
+                            ->enableLightbox()
+                            ->setLightboxGroupIdentifier('pinnwand-'.$model->id)
+                        ;
+
+                        $imageSize = StringUtil::deserialize($model->imgSize, true);
+
+                        if ([] !== $imageSize) {
+                            $figureBuilder->setSize($imageSize);
+                        }
+
+                        $imageFigure = $figureBuilder->buildIfResourceExists();
+                    }
                 }
 
                 $notes[] = [
@@ -40,7 +63,7 @@ final class PinboardController extends AbstractFrontendModuleController
                     'link' => (string) $entry->link,
                     'dateAdded' => (int) $entry->dateAdded,
                     'dateModified' => (int) $entry->dateModified,
-                    'imagePath' => $imagePath,
+                    'imageFigure' => $imageFigure,
                     'highlighted' => '1' === $entry->hervorgehoben,
                 ];
             }

src/Resources/public/js/pinboard.js

@@ -57,6 +57,10 @@
     let offsetY = 0;
 
     note.addEventListener('pointerdown', (event) => {
+      if (event.target instanceof Element && event.target.closest('a, button, input, select, textarea, label')) {
+        return;
+      }
+
       dragging = true;
       pointerId = event.pointerId;
       note.setPointerCapture(pointerId);

templates/frontend_module/pinnwand.html.twig

@@ -1,38 +0,0 @@
-{% extends '@Contao/frontend_module/_base.html.twig' %}
-
-{% block content %}
-  <link rel="stylesheet" href="{{ asset('bundles/contaopinboard/css/pinboard.css') }}">
-
-  <section class="pinboard" data-pinboard>
-    <div class="pinboard__surface" data-pinboard-surface>
-      {% for entry in entries %}
-        <article
-          class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
-          data-pin-note
-          data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
-          data-seed="{{ entry.id }}"
-          aria-label="{{ entry.headline }}"
-        >
-          {% if entry.imagePath %}
-            <figure class="pin-note__image-wrap">
-              <img src="{{ asset(entry.imagePath) }}" alt="" class="pin-note__image">
-            </figure>
-          {% endif %}
-
-          <h3 class="pin-note__headline">{{ entry.headline }}</h3>
-          <div class="pin-note__text">{{ entry.text|e|nl2br }}</div>
-
-          {% if entry.link %}
-            <p class="pin-note__link-wrap">
-              <a href="{{ entry.link }}" class="pin-note__link" target="_blank" rel="noopener">Mehr erfahren</a>
-            </p>
-          {% endif %}
-        </article>
-      {% else %}
-        <p class="pinboard__empty">Keine veröffentlichten Pinnwandeinträge vorhanden.</p>
-      {% endfor %}
-    </div>
-  </section>
-
-  <script src="{{ asset('bundles/contaopinboard/js/pinboard.js') }}" defer></script>
-{% endblock %}