feat: render image-only notes without inner padding

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 }}"

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