improve image meta

This commit is contained in:
L3D 2021-03-18 00:59:31 +01:00
parent e7a7a167b5
commit f3d63e1ce8
No known key found for this signature in database
GPG Key ID: CD08445BFF4313D1
3 changed files with 33 additions and 8 deletions

View File

@ -35,4 +35,10 @@ title: Mastodon
sm_link: https://chaos.social/@hackergeno
-----
sm_image: /images/mastodon_logo.svg
----
content_image: nasa-space-shuttle.jpg
----
content_image_alt: Startendes Space Shuttle
----
content_image_src: images.nasa.gov/details-sts057-s-055
#### flow_seperator ####

View File

@ -19,3 +19,22 @@ type = markdown
label = Content footer
type = flow
flow_blocks = flow_social_media_link
[fields.content_image]
label = Content Image
description = Upload a Image to select it here
type = select
source = record.attachments.images
width = 1/2
[fields.content_image_alt]
label = Content Image ALT tag
description = Description of the Image
type = string
width = 1/4
[fields.content_image_src]
label = Content Image Source
description = Woher kommt das Bild (Optional)
type = string
width = 1/4

View File

@ -19,11 +19,10 @@
{% endfor %}
</div>
</div>
{#
{% if this.attachments.images %}
{% if this.content_image %}
<div class="content__inner_half_box">
{% for image in this.attachments.images %}
<!--
{% 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.
@ -31,12 +30,13 @@
Versteht der Browser srcset nicht, greift src.
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="Startendes Space Shuttle" srcset="{{ image.thumbnail(image.width / 2)|url }} 1x, {{ image|url }} 2x">
{% endfor %}
#}
<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 != '' %}
<p>{{ this.content_image_src }}</p>
{% endif %}
</div>
{% endif %}
#}
</div>
</section>
<!-- 50/50 Layout - end -->