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

This commit is contained in:
Stephan 2021-05-24 17:51:21 +02:00
parent 2792b474fd
commit ecd21f9781
6 changed files with 66 additions and 5 deletions

View File

@ -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 */

View File

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

After

Width:  |  Height:  |  Size: 655 B

View File

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

View File

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

View File

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

View File

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