Podlove-Templates mit Twig (8): Team- oder Gästeliste

Viele Podcastprojekte bestehen aus mehr als einer Person. Manche haben regelmäßige Gäste, andere haben ein großes Team, das immer wieder neu zusammen kommt. Vielleicht gibt es sogar beide Optionen in Deinem Projekt. Und vielleicht hast Du ja das Bedürfnis danach, eine Seite zu haben auf der alle Deine Teammitglieder und alle Deine Gäste angezeigt werden. In dieser Lektion meines kleinen Tutorials zeige ich Dir wie Du eine Gästeliste bauen kannst – daraus kannst Du ableiten, was für eine Teamseite zu tun wäre. Ich setze voraus, dass Du das Contributor-Modul aktiviert hast und weißt, wie Du Mitwirkende anlegst und einer Episode hinzufügst.

Zunächst legen wir ein neues Template an, das beispielsweise „Gästeliste“ heißen könnte. Und dann geht es mit der bekannten for-Schleife los, die wir schon zu so vielen Gelegenheiten benutzt haben:

{% for contributor in podcast.contributors ({scope: "global-active", order: "DESC", orderby: "id", group: "gaeste"}) %}

Das müssen wir jetzt ein wenig auseinander nehmen: Wir schauen uns hier also alle Mitglieder von podcast.contributors an. Mit scope: "global-active" schränken wir die Schleife auf die Personen ein, die mindestens einer veröffentlichten Episode zugeordnet sind. Das ist vor allem dann interessant, wenn Du regelmäßig wechselnde Gäste hast und Episoden lange im Voraus produzierst. Wenn Du global-active benutzt, erscheinen Deine Gäste erst dann in dieser Liste, wenn ihre erste Episode online geht. Das ist auch der Default-Wert für diese Option, Du kannst die Angabe also auch weglassen. Möchtest Du alle Gäste anzeigen, die als Mitwirkende angelegt sind, solltest Du als Scope global einstellen.

order: "DESC" bewirkt, dass die Gäste in absteigender Reihenfolge sortiert werden, orderby: "id" legt fest, nach welchem Kriterium sortiert werden soll. Möglich wäre hier auch name (Das ist wieder der Default-Wert), gender oder mutmaßlich jede andere Option, die Du im Mitwirkenden-Menü ausfüllen kannst. Die Dokumentation ist hier etwas unterwältigend, deswegen käme das auf den Versuch an.

Zuletzt legen wir fest, dass wir ausschließlich Mitwirkende anzeigen lassen wollen, die in unseren Episoden zu Gast waren, das funktioniert mit group: "gaeste", wobei gaeste hier der Slug der Mitwirkenden-Gruppe ist, die Du anzeigen möchtest. Das könnte also auch „moderatorinnen“, „technik“ oder „bandmitglieder“ sein, so lange es diese Gruppe gibt. Analog funktioniert das auch mit role: "gaeste", wenn das besser in Deine Mitwirkenden-Struktur passt. 

{{ contributor.image.html({width: 100, height: 100, alt: contributor.name, title: contributor.name}) }}<br />
  {% for service in contributor.services({category: "social"}) %}
    <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
      {{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}
    </a>
{% endfor %}
{% for service in contributor.services({category: "donation"}) %}
  <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
    {{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}
  </a>
{% endfor %}

Als nächstes fügen wir das Profilbild der Mitwirkenden ein und stellen in einer neuen Zeile die Social Media-Profile dar. Auch das ist wieder eine for-Schleife, kennen wir schon. Das gleiche machen wir mit den Spenden-Icons. Wir müssen hier nicht abfragen, ob in der Liste überhaupt etwas anzuzeigen ist, wenn es nichts gibt, wird auch nichts gezeigt.

<strong>{{ contributor.name }}</strong> ist bekannt als {{ contributor.jobtitle }} und aus:
<ul>
{% for episode in contributor.episodes %}
  <li>
    <a href="{{ episode.url }}">{{ episode.post.post_title }}</a> vom {{ episode.publicationDate.format('d.m.Y') }}
  </li>
{% endfor %}            
</ul>

Den Namen der Mitwirkenden lassen wir fett anzeigen und dann habe ich hier eine kleine Spielerei, indem ich im Mitwirkenden-Menü ein paar nette Worte über die Mitwirkende einfüge. Das ist natürlich nicht die ganz reine Lehre, weil diese Angaben grundsätzlich auch im Podcast-Feed auftauchen, wenn sie definiert sind. Darunter zeigen wir die Episoden mit dieser Mitwirkenden an, das kennst Du schon aus einer anderen Lektion. Das Ergebnis sieht am Ende so aus:

Interessantes Detail übrigens: Je nach Serverkonfiguration kann es dazu kommen, dass die Profilbilder Deiner Contributorinnen nicht angezeigt werden. Ich habe mich darüber lange gewundert und alle möglichen Tricks und Kniffe ausprobiert. Was letztlich geholfen hat: Ich habe in der WordPress-Mediathek bei den Bildern sowohl einen Titel als auch eine Beschriftung, einen alternativen Text und eine Bildbeschreibung hinterlegt. Letzteres sollte man aus Gründen der Barrierefreiheit ja ohnehin immer tun, ich vergesse das noch zu oft. Wenn diese Felder beim Upload der Bilder ausgefüllt sind (oder nachträglich ausgefüllt werden) passiert also irgendeine Art von Magie und die Bilder erscheinen zuverlässig.

Beim Blick auf den Screenshot oben bekommen erfahrene Internetzhasen schon eine Idee, ich lasse das ganze in einer Tabelle darstellen. Das ist zwar nicht HTML 5-konform, funktioniert aber zuverlässig. So sieht der ganze Code dieses Templates aus:

<table style="border:1px solid white;">
{% for contributor in podcast.contributors ({scope: "global-active", order: "DESC", orderby: "id", group: "gaeste"}) %}
<tr>
<td style="border:1px solid white;text-align:top;vertical-align:top;border-bottom:1px black solid;border-spacing:7px 25px">
{{ contributor.image.html({width: 100, height: 100, alt: contributor.name, title: contributor.name}) }}<br />
{% for service in contributor.services({category: "social"}) %}
<a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">{{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}</a>
{% endfor %}
{% for service in contributor.services({category: "donation"}) %}
<a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">{{ service.image.html({width: 20, heigth: 20, alt: service.name}) }}</a>
{% endfor %}  
</td>
<td style="border:1px solid white;text-align:top;vertical-align:top;border-bottom:1px black solid;border-spacing:7px 25px">
<strong>{{ contributor.name }}</strong> ist bekannt als {{ contributor.jobtitle }} und aus:
<ul>
{% for episode in contributor.episodes %}
<li><a href="{{ episode.url }}">{{ episode.post.post_title }}</a> vom {{ episode.publicationDate.format('d.m.Y') }}</li>
{% endfor %}            
</ul>
</td>
</tr>
{% endfor %}
</table>

Am Schluss erstellst Du eine neue Seite in WordPress, in der nichts weiter als der Templateaufruf steht und fertig ist Deine Gästeliste.

Alle Lektionen in dieser Reihe:

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert