From ecd21f9781de0f026641559ab7ce4f191fdeab43 Mon Sep 17 00:00:00 2001 From: Stephan 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 @@ + + + + + + + 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 @@

{{ this.title }}

{% if this.box_image is defined and this.box_image != '' %} {% set image = record.attachments.images.get(this.box_image) %} - Startendes Space Shuttle +
+
+
+ Startendes Space Shuttle +
+
{% endif %} {{ this.box_content }}
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. #} - {{ this.content_image_alt }} +
+
+
+ {{ this.content_image_alt }} +
+
{% if this.content_image_src is defined and this.content_image_alt != '' %}

{{ this.content_image_src }}

{% 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 @@ {% if this.attachments.images %} {% for image in this.attachments.images %} - Startendes Space Shuttle +
+
+
+ Startendes Space Shuttle +
+
{% endfor %} {% endif %}

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 @@ {% if this.attachments.images %} {% for image in this.attachments.images %} - Startendes Space Shuttle +

+
+
+ Startendes Space Shuttle +
+
{% endfor %} {% endif %}

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

{% for image in this.attachments.images %} - {{ image.description }} +
+
+
+ {{ image.description }} +
+
{% endfor %}
{% endif %}