Shownotes in a Collapsible

Podlove Publisher Podlove Templates
1

Hey guys,

we are using the Podlove Publisher and the Podlove Web Player for our Podcast “Hinter den Zeilen”:

Because we are using a lot of text and links in our shownotes, the display of every episode on our website is very long and needs a lot of scrolling (especially on mobile). We would like to put our shownotes in a collapsible, so that the users can just fold and unfold the shownotes. The Podcast Lage der Nation is doing this for example:
https://lagedernation.org/

I am guessing that we can do this by Templating, but I dont know how to do it. Can somebody help us?

2

An das Thema hänge ich mich mal ran :slight_smile: Würde es auch gerne für unseren PodCast umsetzen

3

Ich löse das so:

<style type="text/css">
.ts-speaker { font-weight: bold; }
.ts-items { margin-left: 20px; }
.ts-time { font-size: small; color: #999; }
</style>
<details>
    <summary id="text">
        <strong>Transkription der Episode anzeigen</strong>
    </summary>
    <p>
        {% for group in episode.transcript %}
            <div class="ts-group">
                {% if group.contributor %}
                    <div class="ts-speaker">{{ group.contributor.name }}</div>
                {% endif %}
                <div class="ts-items">
                    {% for line in group.items %}
                        <span class="ts-time">{{ line.start }}&ndash;{{ line.end }}</span>
                        <div class="ts-content">{{ line.content }}</div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </p>
</details>

Das Ergebnis steht hier.