forked from ag_kommunikation/webseite
48 lines
2.2 KiB
HTML
48 lines
2.2 KiB
HTML
<!-- 50/50 Layout - start -->
|
|
<section class="content">
|
|
<div class="content__box -heading">
|
|
<div class="content__inner_box">
|
|
<h2>{{ this.title }}</h2>
|
|
</div>
|
|
</div>
|
|
<div class="content__half_box">
|
|
<div class="content__inner_half_box">
|
|
<div class="content__teaser">
|
|
{{ this.content_teaser }}
|
|
</div>
|
|
<div class="content__body">
|
|
{{ this.content_body }}
|
|
</div>
|
|
<div class="content__footer">
|
|
{% for lnk in this.content_footer.blocks %}
|
|
{{ lnk }}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% if this.content_image %}
|
|
<div class="content__inner_half_box">
|
|
{% 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.
|
|
|
|
Versteht der Browser srcset nicht, greift src.
|
|
|
|
Wichtig: Keine Angaben für width und height berechnen, dann geht beim Skalieren das Seitenverhältnis kaputt.
|
|
#}
|
|
<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 %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
<!-- 50/50 Layout - end -->
|