From f3d63e1ce8013d3b0d507b0f6f86fe5b15df1c13 Mon Sep 17 00:00:00 2001
From: L3D <l3d@c3woc.de>
Date: Thu, 18 Mar 2021 00:59:31 +0100
Subject: [PATCH] improve image meta

---
 content/contents.lr                           |  6 ++++++
 flowblocks/flow_text_image_section.ini        | 19 +++++++++++++++++++
 templates/blocks/flow_text_image_section.html | 16 ++++++++--------
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/content/contents.lr b/content/contents.lr
index 97046289..72136268 100644
--- a/content/contents.lr
+++ b/content/contents.lr
@@ -35,4 +35,10 @@ title: Mastodon
 sm_link: https://chaos.social/@hackergeno
 -----
 sm_image: /images/mastodon_logo.svg
+----
+content_image: nasa-space-shuttle.jpg
+----
+content_image_alt: Startendes Space Shuttle
+----
+content_image_src: images.nasa.gov/details-sts057-s-055
 #### flow_seperator ####
diff --git a/flowblocks/flow_text_image_section.ini b/flowblocks/flow_text_image_section.ini
index 053be294..5daa9d71 100644
--- a/flowblocks/flow_text_image_section.ini
+++ b/flowblocks/flow_text_image_section.ini
@@ -19,3 +19,22 @@ type = markdown
 label = Content footer
 type = flow
 flow_blocks = flow_social_media_link
+
+[fields.content_image]
+label = Content Image
+description = Upload a Image to select it here
+type = select
+source = record.attachments.images
+width = 1/2
+
+[fields.content_image_alt]
+label = Content Image ALT tag
+description = Description of the Image
+type = string
+width = 1/4
+
+[fields.content_image_src]
+label = Content Image Source
+description = Woher kommt das Bild (Optional)
+type = string
+width = 1/4
diff --git a/templates/blocks/flow_text_image_section.html b/templates/blocks/flow_text_image_section.html
index a828da1f..b57fecfc 100644
--- a/templates/blocks/flow_text_image_section.html
+++ b/templates/blocks/flow_text_image_section.html
@@ -19,11 +19,10 @@
                       {% endfor %}
                 </div>
             </div>
-{#
-            {% if this.attachments.images %}
+            {% if this.content_image %}
                 <div class="content__inner_half_box">
-                    {% for image in this.attachments.images %}
-                        <!--
+                    {% set image = record.attachments.images.get(this.content_image) %}
+                      {#
                         Wir laden Bilder mit hoher Auflösung hoch. Lektor baut "Thumbnails" mit halber
                         Auflösung. Per srcset bieten wir beides an und der Browser sucht das Richtige
                         raus.
@@ -31,12 +30,13 @@
                         Versteht der Browser srcset nicht, greift src.
 
                         Wichtig: Keine Angaben für width und height berechnen, dann geht beim Skalieren das Seitenverhältnis kaputt.
-                        -->
-                        <img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
-                    {% endfor %}
+                      #}
+                        <img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ this.content_image_alt }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                       {% if this.content_image_src is defined and this.content_image_alt != '' %}
+                          <p>{{ this.content_image_src }}</p>
+                       {% endif %}
                 </div>
             {% endif %}
-#}
         </div>
     </section>
     <!-- 50/50 Layout - end -->