veranstaltungen.liquid

---
title: Veranstaltungen
position: 100
permalink: veranstaltungen.html
---
{%- for event in site.events reversed -%}
    <section>
        <h2 class="d-flex justify-content-between align-items-baseline flex-wrap">
            {{ event.title }}
            <small>{{- event.date | date: '%d.%m.%Y' -}}</small>{{- '' -}}
        </h2>

        <div>
            {% if event.teaserPic -%}
                {%- assign teaserPic = site.static_files
                    | where_exp: 'file', 'file.path contains event.imagePath'
                    | where_exp: 'file', 'file.path contains event.teaserPic'
                    | first
                -%}
                <div class="row">
                    {% if event.imagePath -%}
                        {%- assign images = site.static_files | where_exp: 'file', 'file.path contains event.imagePath' -%}
                        {%- assign imageCount = images | size -%}
                        {%- assign imagePath = event.imagePath | append: '/' | append: teaserPic.name -%}
                        {%-
                            assign aspectRatio = assets[imagePath].dimensions.width
                            | times: 1.0
                            | divided_by: assets[imagePath].dimensions.height
                        -%}
                        {%- assign maxImagePath = imagePath | asset: 'magick:resize=1920 @path' -%}
                    {%- else -%}
                        {%- assign imageCount = 0 -%}
                    {%- endif -%}

                    <div class="col-md-4 {% if imageCount == 1 -%}js-gallery{%- endif -%}">
                        <figure class="card">
                            {% if event.imagePath -%}
                                <a
                                    {%- if imageCount > 1 %}
                                        href="{{ event.url }}"
                                        title="Zu den Bildern"
                                    {%- else %}
                                        href="{{ imagePath | asset: 'magick:resize=1920 @path' }}"
                                        title="Bild vergrößern"
                                        data-size="
                                            {%- if aspectRatio > 1 -%}
                                                1920x{{- 1920 | divided_by: aspectRatio | round -}}
                                            {%- else -%}
                                                {{- 1920 | times: aspectRatio | round -}}x1920
                                            {%- endif -%}
                                        "
                                    {%- endif %}
                                >
                                    <img
                                        alt='{{ event.altTexts[teaserPic.name] }}'
                                        class="img-fluid card-img-top"
                                        sizes='{{- '' -}}
                                            (min-width: 1200px) 348px, {{ '' -}}
                                            (min-width: 992px) 288px, {{ '' -}}
                                            (min-width: 768px) 208px, {{ '' -}}
                                            (min-width: 576px) 508px, {{ '' -}}
                                            calc(100vw - 30px)
                                        {{- '' -}}'
                                        src="{{ maxImagePath }}"
                                        srcset="
                                            {{ imagePath | asset: 'magick:resize="543x" @path' }} 543w,
                                            {{ imagePath | asset: 'magick:resize="508x" @path' }} 508w,
                                            {{ imagePath | asset: 'magick:resize="348x" @path' }} 348w,
                                            {{ imagePath | asset: 'magick:resize="288x" @path' }} 288w,
                                            {{ imagePath | asset: 'magick:resize="208x" @path' }} 208w
                                        "
                                    />
                                </a>
                            {%- else -%}
                                <img
                                    class="img-fluid card-img-top"
                                    src="{{ event.teaserPic }}"
                                    alt="{{ event.teaserAltText }}"
                                />
                            {%- endif %}

                            {% if event.teaserCaption or event.captions[teaserPic.name]-%}
                                <figcaption class="card-body">
                                    <p class="card-text text-center text-muted">
                                        {{ event.teaserCaption | default: event.captions[teaserPic.name] }}
                                    </p>
                                </figcaption>
                            {%- endif %}
                        </figure>

                        {% if imageCount > 1 -%}
                            <p>
                                <a href="{{ event.url }}" class="btn btn-block btn-secondary btn-info">Zu den Bildern</a>
                            </p>
                        {%- endif %}
                    </div>

                    <div class="col-md-8">
                        <div>
                            {{ event.content }}
                        </div>
                    </div>
                </div>
            {%- else -%}
                <p>
                    {{ event.content }}
                </p>
            {%- endif %}
        </div>
    </section>
{%- endfor -%}

{% include pswp.liquid %}