JSFP Gästeliste

{% set Anzahl = 0 %}
{% for contributor in podcast.contributors({role: 'guest'}) %}
    {% set Anzahl = Anzahl + contributor.episodes|length %}
{% endfor %}

<p>Eigentlich ist Jörn Schaars feiner Podcast ein Solo-Format, in dem ich über mein Leben spreche. Aber manchmal bewegt mich etwas in einer Art, dass ich mir Gäste einlade. Hier findest Du eine Liste der Menschen, die bislang so nett waren, mit mir ein wenig Quatsch zu machen. Bisher waren {{ podcast.contributors({role: 'guest'})|length }} Leute in {{ Anzahl }} Episoden bei mir zu Gast.</p>
<p></p>
<p>&nbsp;</p>

<div class="container">
    {% for contributor in podcast.contributors({role: 'guest'}) %}
        <div class="mod">
            <div class="item">
                {{ contributor.image.html({width: 300, height: 300, alt: contributor.name, title: contributor.name}) }}
            </div>
            <div class="item" style="margin-top:5px">
                {% for service in contributor.services({category: "social"}) %}
                    <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}" style="color:white">
                        {{ service.image.html({width: 20, height: 20, alt: service.name}) }}
                    </a>
                {% endfor %}
                {% for service in contributor.services({category: "donation"}) %}
                    <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}" style="color:white">
                        {{ service.image.html({width: 20, height: 20, alt: service.name}) }}
                    </a>
                {% endfor %}                
            </div>
            <div class="item">
                {% if contributor.episodes|length == 1 %}
                    <strong>{% if contributor.nickname %}"{{contributor.nickname }}" {% endif %}{{ contributor.name }}</strong> in 
                {% else %}
                    <strong>{% if contributor.nickname %}"{{contributor.nickname }}" {% endif %}{{ contributor.name }}</strong> in {{ contributor.episodes|length }} Episoden, zuletzt
                {% endif %}
            </div>
            <div class="item">
                {% if contributor.episodes|length == 1 %}
                    {% for episode in contributor.episodes %}<a href="{{ episode.url }}">{{ episode.post.post_title }}</a>{% endfor %}
                {% else %}
                    {% for episode in contributor.episodes %}{% if loop.first %}<a href="{{ episode.url }}">{{ episode.post.post_title }}</a>{% endif %}{% endfor %}
                {% endif %}
            </div>
            <div class="item">
                {% if contributor.episodes|length == 1 %}
                    {% for episode in contributor.episodes %}vom {{ episode.publicationDate.format('d.m.Y') }}{% endfor %}
                {% else %}
                    {% for episode in contributor.episodes %}{% if loop.first %}vom {{ episode.publicationDate.format('d.m.Y') }}{% endif %}{% endfor %}
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>

<style>
   .container {
       display: flex;
       justify-content: center;
       align-items: flex-start;
       gap: 1em 2em;
       flex-flow: row wrap;
   }
   .mod {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       flex-flow: column wrap;
   }
   .item {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 3px;
       flex-flow: row wrap;
       flex: 0 0 auto;
       flex-basis: 20%
   }
   .cont_ep {
       background-color: #cccccc;
       padding: 8px;
       margin: 4px;
       font-weight: bold;
       font-size: small;
    }
</style>