Added auto generation of the signature corner on images via css and svg.

assets/css/style.css

@@ -876,6 +876,35 @@ hr.-even {
     flex-direction: column;
     justify-content: flex-start;
 }
+.image_box {
+    width: 100%;
+    height: max-content;
+    display: flex;
+    flex-direction: column;
+}
+
+.image_box__image {
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: 55% 45%;
+    grid-template-rows: 10% 90%;
+}
+
+.image_box__top_bar {
+    grid-column: 2 / 3;
+    grid-row: 1 / 1;
+    background-image: url("../images/image_corner.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    z-index: 5;
+}
+
+.image_box__image img {
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+    z-index: 0;
+}
 /* main - Ende */
 
 /* footer - Start */

assets/images/image_corner.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2801 325" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1,0,0,0.574167,-2799.5,-10)">
+        <path d="M2800,0L3200,600L5600,600L5600,0L2800,0Z" style="fill:#edefeb;stroke:#000;stroke-width:1.23px;"/>
+    </g>
+</svg>

templates/blocks/flow_one_innerbox_section.html

@@ -2,7 +2,12 @@
                 <h2 class="content__inner_third_heading">{{ this.title }}</h2>
                 {% if this.box_image is defined and this.box_image != '' %}
                     {% set image = record.attachments.images.get(this.box_image) %}
-                        <img class="content__inner_third_image" 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">
+                        <div class="image_box">
+                            <div class="image_box__image">
+                                <div class="image_box__top_bar"></div>
+                                <img class="content__inner_third_image" 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">
+                            </div>
+                        </div>
                 {% endif %}
                 {{ this.box_content }}
                 <div class="content__button_box">

templates/blocks/flow_text_image_section.html

@@ -31,7 +31,12 @@
 
                         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="{{ this.content_image_alt }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                        <div class="image_box">
+                            <div class="image_box__image">
+                                <div class="image_box__top_bar"></div>
+                                <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">
+                            </div>
+                        </div>
                        {% if this.content_image_src is defined and this.content_image_alt != '' %}
                           <p>{{ this.content_image_src }}</p>
                        {% endif %}

templates/blocks/flow_third_box_section.html

@@ -11,7 +11,12 @@
                 </h2>
                 {% if this.attachments.images %}
                     {% for image in this.attachments.images %}
-                        <img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                        <div class="image_box">
+                            <div class="image_box__image">
+                                <div class="image_box__top_bar"></div>
+                                <img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                            </div>
+                        </div>
                     {% endfor %}
                 {% endif %}
                 <p>Wir verstehen uns als Plattform for Hackende, auf der sich mit Gleichgesinnten wirtschaftliche Projekte möglich werden, die es anders nicht gäbe. Wir fördern und bewirtschaften im Kollektiv als Genossenschaft die Leistungen unserer Mitglieder.
@@ -29,7 +34,12 @@
                 </h2>
                 {% if this.attachments.images %}
                     {% for image in this.attachments.images %}
-                        <img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                        <div class="image_box">
+                            <div class="image_box__image">
+                                <div class="image_box__top_bar"></div>
+                                <img class="content__inner_third_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                            </div>
+                        </div>
                     {% endfor %}
                 {% endif %}
                 <p>Wir bieten useren Mitgliedern nicht nur ein gutes Netzwerk, sondern auch eine sichere Anlagemöglichkeit. Hier kannst Du Dich über die Anlagekriterien informieren.

templates/flow_block_page.html

@@ -27,7 +27,12 @@
             {% if this.attachments.images %}
                 <div class="content__inner_half_box">
                     {% for image in this.attachments.images %}
-                        <img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ image.description }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                        <div class="image_box">
+                            <div class="image_box__image">
+                                <div class="image_box__top_bar"></div>
+                                <img class="content__half_box_image" src="{{ image|url }}" width="{{ image.width / 2 }}" alt="{{ image.description }}" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
+                            </div>
+                        </div>
                     {% endfor %}
                 </div>
             {% endif %}