Templates

The Publisher comes with existing templates. You can include these in your own templates or use them as inspiration. Embed them by using the Twig include keyword, for example: {% raw %}{% include '@core/shortcode/downloads-select.twig' %}{% endraw %}

Core Templates

These templates come with the Podlove Publisher and are always available.

Downloads (Select)

{# @core/shortcode/downloads-select.twig #}

{% spaceless %}
<form action="#">
 <div class="episode_downloads">
    {% if podcast.setting("tracking", "mode") in ["ptm", "ptm_analytics"] %}
        <input type="hidden" name="ptm_source" value="download" />
        <input type="hidden" name="ptm_context" value="select-button" />
    {% endif %}
    <select name="download_media_file">
    {% for file in episode.files %}
        {% set asset = file.asset %}
        {% if asset.downloadable %}
            <option value="{{ file.id }}" data-raw-url="{{ file.publicUrl("download", "select-show") }}">{{ asset.title }} [{{ file.size|formatBytes }}]</option>
        {% endif %}
    {% endfor %}
    </select>
    <button class="primary">Download</button>
    <button class="secondary">Show URL</button>
 </div>
</form>
{% endspaceless %}

Downloads (Buttons)

{# @core/shortcode/downloads-buttons.twig #}

<ul class="episode_download_list">
    {% for file in episode.files %}
        {% set asset = file.asset %}
        {% if asset.downloadable %}
            <li>
                <a href="{{ file.publicUrl("download", "buttonlist") }}">{{ asset.title }}<span class="size">{{ file.size|formatBytes }}</span></a>
            </li>
        {% endif %}
    {% endfor %}
</ul>

List of Feeds

{# @core/shortcode/feed-list.twig #}

<table>
    <thead>
        <tr>
            <th>Feed</th>
            <th>Enclosure</th>
        </tr>
    </thead>
    <tbody>
    {% for feed in podcast.feeds %}
        {% if feed.discoverable %}
            <tr>
                <td>
                    <a href="{{ feed.url }}">{{ feed.title }}</a>
                </td>
                <td>
                    <span title="{{ feed.asset.fileType.mimeType }} ({{ feed.asset.fileType.extension }})">
                        {{ feed.asset.title }}
                    </span>
                </td>
            </tr>
        {% endif %}
    {% endfor %}
    </tbody>
</table>

List of Episodes

{# @core/shortcode/episode-list.twig #}

<table>
    <thead>
        <th></th>
        <th>Date</th>
        <th>Title</th>
        <th>Duration</th>
    </thead>
    <tbody>
    {% for episode in podcast.episodes %}
        <tr class="podcast_archive_element">
            <td class="thumbnail">
                {{ episode.image({fallback: true}).html({width: 64, height: 64}) }}
            </td>
            <td class="date">
                <span class="release_date">
                    {{ episode.publicationDate }}
                </span>
            </td>
            <td class="title">
                <a href="{{ episode.url }}">
                    <strong>{{ episode.title }}</strong><br>
                    {{ episode.subtitle }}
                </a>
            </td>
            <td class="duration">
                {% set duration = episode.duration %}
                {{ duration.hours }}:{{ duration.minutes|padLeft("0",2) }}:{{ duration.seconds|padLeft("0",2) }}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<style type="text/css">
.podcast_archive_element .thumbnail {
    width: 64px;
    padding: 5px !important;
}

.podcast_archive_element td {
    vertical-align: top;
}
</style>

License

{# @core/license.twig #}

{#
    Include example:
    {% include '@core/license.twig' %}

    You can pass in a license to determine which one is displayed:
    {% include '@core/license.twig' with {'license': podcast.license} %}
#}
{% if license is not defined %}
    {% if episode is not null and episode.license.valid %}
        {% set license = episode.license %}
    {% else %}
        {% set license = podcast.license %}
    {% endif %}
{% endif %}

{% if license.valid %}
    {% if license.creativeCommons %}
        <div class="podlove_cc_license">
            <img src="{{ license.imageUrl }}" alt="License" />
            <p>
                This work is licensed under a <a rel="license" href="{{ license.url }}">{{ license.name }}</a>
            </p>
        </div>
    {% else %}
        This work is licensed under the <a href="{{ license.url }}">{{ license.name }}</a> license.
    {% endif %}
{% else %}
    <div class="podlove_license">
        <p style="color: red;">
            This work is (not yet) licensed, as no license was chosen.
        </p>
    </div>
{% endif %}

Contributor Templates

These templates come with the "Contributors" module.

List of Podcast Contributors

{# @contributors/podcast-contributor-list.twig #}

<table class="podlove-global-contributors">
    {% if option.title %}
        <thead>
            <tr>
                <th colspan="2">{{ option.title }}</th>
            </tr>
        </thead>
    {% endif %}
    <tbody>
        {% for contributor in podcast.contributors %}
            {% if contributor.visible %}
                <tr>
                    <td rowspan="2" class="avatar-cell" width="60">
                        {{ contributor.image.html({width: 60, height: 60, class: "avatar avatar-" ~ size ~  " photo", alt: "avatar" }) }}
                    </td>
                    <td class="social-cell">
                        <strong class="contributor-name">{{ contributor.name }}</strong>
                        <div class="social-icons">
                            {% for service in contributor.socialServices %}
                                <a target="_blank" title="{{ service.title }}" href="{{ service.profileUrl }}">
                                    {{
                                        service.image.html({
                                            width: 32,
                                            class: "podlove-contributor-button",
                                            alt: service.title ~ " Icon"
                                        })
                                    }}
                                </a>
                            {% endfor %}
                        </div>
                    </td>
                </tr>
                <tr class="episode-row">
                    <td class="episodes-cell">
                        <ul>
                        {% for episode in contributor.episodes %}
                            <li>
                                <a href="{{ episode.url }}">{{ episode.title }}</a>
                            </li>
                        {% endfor %}
                        </ul>
                    </td>
                </tr>
            {% endif %}
        {% endfor %}
    </tbody>
</table>

<script type="text/javascript">
(function ($) {
    $(document).ready(function() {
        $(".podlove-global-contributors .episodes-cell").each(function() {
            var items = $("li", this);


            if (items.length > 5) {
                $("li:gt(4)", this).hide();
                $('<span class="show-all-episodes"><a href="#">… show all episodes</a><span>').insertAfter($("ul", this));
            }
        });

        $(".podlove-global-contributors").on("click", ".show-all-episodes a", function(e) {
            e.preventDefault();

            $(this).closest(".episodes-cell")
                .find("li").show().end()
                .find(".show-all-episodes").hide();
        });
    });
}(jQuery));
</script>

<style type="text/css">
.podlove-global-contributors td {
    vertical-align: top;
    line-height: 1.3em;
}

.podlove-global-contributors .avatar-cell {
    max-width: 100px;
    text-align: center;
}

.podlove-global-contributors td {
    border-top-width: 0px;
}

.podlove-global-contributors .episode-row {
    /*margin-bottom: 10px;*/
}

.podlove-global-contributors td ul {
    margin: 0;
}

.podlove-global-contributors .social-cell li {
    margin: 0;
}

.podlove-global-contributors .episodes-cell {
    padding-top: 0px;
}

.podlove-global-contributors .episodes-cell li {
    display: inline-block;
    margin: 0;
}

.podlove-global-contributors .episodes-cell li a {
    background: #eee;
    padding: 2px 10px;
    line-height: 170%;
    border-radius: 10px;
}

</style>

Table of Podcast Contributors

{# @contributors/podcast-contributor-table.twig #}

<table class="podlove-contributors-table">
    <tbody>
        {% for contributor in podcast.contributors({group: option.group, role: option.role, scope: 'podcast'}) %}
            {% if contributor.visible %}
                {% include '@contributors/_contributor-table-row.twig' %}
            {% endif %}
        {% endfor %}
    </tbody>
</table>

{% include '@contributors/_contributor-table-css.twig' %}

Episode Contributors (comma separated)

{# @contributors/contributor-comma-separated.twig #}

<span class="podlove-contributors">
    {% for contributor in episode.contributors({group: group, role: role}) %}
        {% if contributor.visible %}
            <span>
                {% if option.avatars == "yes" %}
                    {{ contributor.image.html({width: 18, height: 18, class: "avatar avatar-" ~ size ~  " photo", alt: "avatar" }) }}
                {% endif %}
                <span class="name">{{ contributor.name }}</span></span>{% if not loop.last %}, {% endif %}
        {% endif %}
    {% endfor %}
</span>

Episode Contributors (as list)

{# @contributors/contributor-list.twig #}

<ul class="podlove-contributors">
{% for contributor in episode.contributors({group: group, role: role}) %}
    {% if contributor.visible %}
        <li>
            {% if option.avatars == "yes" %}
                <span class="avatar">
                    {{ contributor.image.html({width: size|default(50), height: size|default(50), class: "avatar avatar-" ~ size|default(50) ~  " photo", alt: "avatar" }) }}
                </span>
            {% endif %}
            <span class="name">{{ contributor.name }}</span>
        </li>
    {% endif %}
{% endfor %}
</ul>

Episode Contributors (as table)

{# @contributors/contributor-table.twig #}

{% set colspan = 2 %}
{% if avatars == "yes"   %}{% set colspan = colspan + 1 %}{% endif %}
{% if groups == "yes"    %}{% set colspan = colspan + 1 %}{% endif %}
{% if roles == "yes"     %}{% set colspan = colspan + 1 %}{% endif %}
{% if donations == "yes" %}{% set colspan = colspan + 1 %}{% endif %}

<table class="podlove-contributors-table">
    {% if option.title %}
        <thead>
            <tr>
                <th colspan="{{ colspan }}">{{ title }}</th>
            </tr>
        </thead>
    {% endif %}
    <tbody>
        {% if option.groupby == "group" %}
            {% for contributorGroup in episode.contributors({groupby: 'group', group: option.group, role: option.role}) %}
                <tr>
                    <th colspan="{{ colspan }}" class="contributor-group">
                        {% if contributorGroup.group %}
                            {{ contributorGroup.group.title }}
                        {% else %}
                            &nbsp;
                        {% endif %}
                    </th>
                </tr>
                {% for contributor in contributorGroup.contributors %}
                    {% if contributor.visible %}
                        {% include '@contributors/_contributor-table-row.twig' %}
                    {% endif %}
                {% endfor %}
            {% endfor %}
        {% else %}
            {% for contributor in episode.contributors({group: option.group, role: option.role}) %}
                {% if contributor.visible %}
                    {% include '@contributors/_contributor-table-row.twig' %}
                {% endif %}
            {% endfor %}
        {% endif %}
    </tbody>
</table>

{% include '@contributors/_contributor-table-css.twig' %}

These templates come with the "Social & Donations" module.

List of Podcast Donations

{# @social/podcast-donations-list.twig #}

<ul class="podcast_services">
{% for service in podcast.services({category: "donation"}) %}
    <li>
        <a href="{{ service.profileUrl }}" title="{{ service.description }}">
            {{
                service.image.html({
                    width: 16,
                    alt: service.title ~ " Icon"
                })
            }} {{ service.title }}
        </a>
    </li>
{% endfor %}
</ul>

<style>
.podcast_services li {
    list-style: none;
}
</style>

{# @social/podcast-social-media-list.twig #}

<ul class="podcast_services">
{% for service in podcast.services({category: "social"}) %}
    <li>
        <a href="{{ service.profileUrl }}" title="{{ service.description }}">
            {{
                service.image.html({
                    width: 16,
                    alt: service.title ~ " Icon"
                })
            }} {{ service.title }}
        </a>
    </li>
{% endfor %}
</ul>

<style>
.podcast_services li {
    list-style: none;
}
</style>

Core Templates​

Downloads (Select)​

Downloads (Buttons)​

List of Feeds​

List of Episodes​

License​

Contributor Templates​

List of Podcast Contributors​

Table of Podcast Contributors​

Episode Contributors (comma separated)​

Episode Contributors (as list)​

Episode Contributors (as table)​

Social Templates​

List of Podcast Donations​

List of Podcast Social Media Services​