From 6269d383e6c5bd562610337785a5084205daa051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrgen=20Mummert?= <juergen@Macmini.fritz.box>
Date: Wed, 1 Apr 2026 13:03:22 +0200
Subject: [PATCH] feat: render image-only notes without inner padding

---
 contao/templates/frontend/pinnwand.html.twig |  3 ++-
 public/assets/pinboard.css                   | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/contao/templates/frontend/pinnwand.html.twig b/contao/templates/frontend/pinnwand.html.twig
index 99b88f0..6c61f53 100644
--- a/contao/templates/frontend/pinnwand.html.twig
+++ b/contao/templates/frontend/pinnwand.html.twig
@@ -5,8 +5,9 @@
 <section class="pinboard" data-pinboard>
   <div class="pinboard__surface" data-pinboard-surface>
     {% for entry in entries %}
+      {% set isImageOnly = entry.imageFigure and not entry.headline and not entry.text and not entry.link %}
       <article
-        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}"
+        class="pin-note{% if entry.highlighted %} is-highlighted{% endif %}{% if isImageOnly %} pin-note--image-only{% endif %}"
         data-pin-note
         data-highlighted="{{ entry.highlighted ? '1' : '0' }}"
         data-seed="{{ entry.id }}"
diff --git a/public/assets/pinboard.css b/public/assets/pinboard.css
index db910f1..d900d93 100644
--- a/public/assets/pinboard.css
+++ b/public/assets/pinboard.css
@@ -73,6 +73,26 @@
   margin: 0 0 0.7rem;
 }
 
+.pin-note--image-only .pin-note__inner {
+  min-height: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.pin-note--image-only .pin-note__image-wrap {
+  margin: 0;
+}
+
+.pin-note--image-only .pin-note__image-wrap img,
+.pin-note--image-only .pin-note__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.3rem;
+  box-shadow: 0 10px 22px rgba(20, 10, 5, 0.34);
+}
+
 .pin-note__image {
   display: block;
   width: 100%;