Fix image lightbox click handling and module image size rendering

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);