From ecd21f9781de0f026641559ab7ce4f191fdeab43 Mon Sep 17 00:00:00 2001
From: Stephan <spamonia@gmail.com>
Date: Mon, 24 May 2021 17:51:21 +0200
Subject: [PATCH] Added auto generation of the signature corner on images via
 css and svg.

---
 assets/css/style.css                          | 29 +++++++++++++++++++
 assets/images/image_corner.svg                |  7 +++++
 .../blocks/flow_one_innerbox_section.html     |  7 ++++-
 templates/blocks/flow_text_image_section.html |  7 ++++-
 templates/blocks/flow_third_box_section.html  | 14 +++++++--
 templates/flow_block_page.html                |  7 ++++-
 6 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 assets/images/image_corner.svg

diff --git a/assets/css/style.css b/assets/css/style.css
index 011adeb0..4726d385 100644
--- a/assets/css/style.css
+++ b/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 */
diff --git a/assets/images/image_corner.svg b/assets/images/image_corner.svg
new file mode 100644
index 00000000..86c1fcc4
--- /dev/null
+++ b/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>
diff --git a/templates/blocks/flow_one_innerbox_section.html b/templates/blocks/flow_one_innerbox_section.html
index 595f1fa7..4b7d0f75 100644
--- a/templates/blocks/flow_one_innerbox_section.html
+++ b/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">
diff --git a/templates/blocks/flow_text_image_section.html b/templates/blocks/flow_text_image_section.html
index b57fecfc..620f5d60 100644
--- a/templates/blocks/flow_text_image_section.html
+++ b/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 %}
diff --git a/templates/blocks/flow_third_box_section.html b/templates/blocks/flow_third_box_section.html
index 30975501..ba235198 100644
--- a/templates/blocks/flow_third_box_section.html
+++ b/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.
diff --git a/templates/flow_block_page.html b/templates/flow_block_page.html
index 30aaee92..dc02a44a 100644
--- a/templates/flow_block_page.html
+++ b/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 %}