improve image meta

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 ####

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

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