46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
{#- Layout für halb-Text - halb Bild Startseitendinge #}
|
|
<!-- 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 -%}
|
|
{{- '\n ' -}} <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.
|
|
|
|
ToDO: Nochmal nach Bildgrößen schauen, ggf. webp usw. mit einbeziehen...
|
|
#}
|
|
<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" />
|
|
{%- if this.content_image_src is defined and this.content_image_alt != '' -%}
|
|
{{- '\n ' -}} <p>{{ this.content_image_src }}</p>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif %}
|
|
</div>
|
|
</section>
|
|
<!-- 50/50 Layout - end -->
|