Finished theming.

This commit is contained in:
Jeremy Gonyea
2021-01-25 02:21:19 -05:00
parent 3f9c883db3
commit 6721623c4f
10 changed files with 276 additions and 159 deletions

View File

@@ -1,16 +1,16 @@
# v3.0.0
## 01/23/2021
## 01/25/2021
1. [](#new)
* Grav v1.7 support. Grav v1.6 is no longer supported.
* Individual file field uploads are no longer supported in Grav v1.7. Instead, use the general media upoader and then the filepicker fields to select the appropriate audio/ image files.
2. [](#improved)
* Better multi-language support while creating new content via the admin plugin.
* Twig formatting is improved.
* Twig theming is improved considerably.
* Updated README to indicate that admin is now required. If this becomes a problem, I can revisit the requirements.
* Removed `max_upload` audio file size value from plugin configuration.
3. [](#bugfix)
* Episode subtitle in the rss feed now points to the correct field in the admin form. You may need to re-save this data on v2 Podcast episodes.
* Episode subtitle in the rss feed now points to the correct field in the admin form. You may need to re-save this data on v2 Podcast episodes to update them to the v3 Podcast format.
# v2.1.10
## 01/21/2021

View File

@@ -1,36 +1,79 @@
.episode-container h1,h2{
.channel-links {
text-align: center;
}
/****Episode Theming *****/
.podcast-container h1,h2{
text-align: center;
margin: 0;
padding: 0;
line-height: 40px;
}
.episode-flex-wrapper{
.podcast-flex-wrapper{
display: flex;
flex-flow: row wrap;
}
.episode-flex-child {
.podcast-flex-child {
flex: 1;
border: 2px solid yellow;
padding: 1.5em;
margin: 0;
}
.episode-flex-child h3 {
text-align: center;
.podcast-flex-break {
flex-basis: 100%;
height: 0;
}
.episode-top {
.podcast-flex-full {
flex: 0 0 100%;
text-align: center;
}
.episode-content {
flex: 4;
.podcast-page-content {
flex-grow: 2;
}
.podcast-content-image {
padding: 1em;
float: right;
border-radius: 2em;
}
.episode-nav {
border-bottom: 1px solid #3A414E;
}
.podcast-full-list ul {
list-style: none;
margin: 0 !important;
}
.podcast-full-list li {
padding: .1em 1em 1em 1em;
min-height: 20em;
background: #eee;
border-radius: 2em;
margin-bottom: 2em;
}
.podcast-full-list li h3 {
font-size: 1rem;
}
.podcast-full-list .episode-description {
text-align: left;
padding: 1em;
}
@media all and (max-width:800px){
.episode-flex-wrapper{
.podcast-flex-wrapper {
flex-flow: column wrap;
}
.podcast-page-content h3{
text-align: center;
}
.podcast-content-image {
display: none;
}
}

View File

@@ -3,16 +3,20 @@ en:
CONFIG:
MAX_UPLOAD_LABEL: Max Podcast Filesize (MB)
MAX_UPLOAD_HELP: 'Set "upload_max_filesize" and "post_max_size" in php.ini to at least this value or higher.'
PODCAST: Podcast Channel
SERIES: Podcast Series
WORDS:
CHANNEL: CHANNEL
EPISODE: Episode
LATEST: Latest
MORE: More
PODCAST: Podcast
SERIES: Series
SERIES_CONTENT:
HEADER: Series Description
EPISODE_CONTENT:
HEADER: Episode Content
DOWNLOAD: Download Audio
WARNING: Your browser does not support the audio tag.
OTHER: Other Episodes In
EMPTY: No content available.
ADMIN:
CHANNEL:
CONTENT:

View File

@@ -1,39 +1,38 @@
<div id = "episodes">
<div class = "podcast-full-list">
{% if (episodes|length > 0)%}
<h2>{{ 'PLUGIN_PODCAST.WORDS.LATEST'|t|e }} {{ 'PLUGIN_PODCAST.WORDS.EPISODE'|t|e|pluralize }}</h2>
<div class="channel-links">
<a href="{{ base_url }}{{ page.route }}.rss">RSS <i class="fa fa-rss" aria-hidden="true"></i> | {{ page.title }}</a>
</div>
<ul>
{% for episode in episodes %}
{% for e in episodes %}
<li>
<div class="episode-image">
{% if ((episode.header.podcast.itunes.image)|first) %}
{{ page.find(episode.route).media[ (((episode.header.podcast.itunes.image)|first).name) ].cropResize(200, 200).html}}
<a href ="{{ e.url }}">
{% if ((e.header.podcast.itunes.image)|first) %}
{{ e.media[e.header.podcast.itunes.image].zoomCrop(200, 200).html(e.header.podcast.itunes.image,'','podcast-content-image')|raw }}
{% else %}
<img src="{{ url("plugin://podcast/assets/images/default.jpg") }}" />
<img src="{{ url("plugin://podcast/assets/images/default.jpg") }}" class="podcast-content-image" />
{% endif %}
</div>
<a href ="{{ episode.url }}">
<h2>{{ episode.title }}
{% if (episode.header.podcast.audio.meta.duration) %}
<small>( {{ episode.header.podcast.audio.meta.duration }} )</small>
{% else %}
<small>( No Audio )</small>
{% endif %}
</h2>
<h3>{{ e.title }}
{% if (e.header.podcast.audio.meta.duration) %}
<small>( {{ e.header.podcast.audio.meta.duration }} )</small>
{% endif %}
</h2>
</a>
<p class="episode-date">
{{ (episode.modified)|date('Y-m-d')|nicetime(false) }}
{{ (e.modified)|date('Y-m-d')|nicetime(false) }}{% if e.header.podcast.audio.meta %} | <a href ="{{ e.header.podcast.audio.meta.guid }}">Download Audio</a>{% endif %}
</p>
<p class="episode-description">
{% if episode.summary %}
{{ (episode.summary)|striptags|truncate(120) }}
{% if e.summary %}
{{ (e.summary)|striptags|truncate(300)|raw }}
{% else %}
No summary available.
{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.EMPTY'|t|e }}
{% endif %}
</p>
{% if episode.header.podcast.audio.meta %}
<p class = "podcast-episode-audio">
<audio controls="1" alt="episode.title"><source src="{{ episode.header.podcast.audio.meta.guid }}">Your browser does not support the audio tag.</audio>
<br/><a href ="{{ episode.header.podcast.audio.meta.guid }}">Download Audio</a>
</p>
{% if (e.parent.template == 'podcast-series') %}
<p><a href="{{ e.parent.url }}">{{ 'PLUGIN_PODCAST.WORDS.SERIES'|t|e }} | {{ e.parent.title}}</a> </p>
{% endif %}
</li>
{% endfor %}

View File

@@ -1,12 +1,18 @@
{% set mini_episodes = page.parent.children() %}
<div class="episodes-mini-list">
<h3>{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.OTHER'|t|e }} '{{ page.parent.title }}'</h3>
<ul>
{% for e in mini_episodes|slice(0, 5) %}
<li><a href="{{ e.url() }}">{{ e.title }}</a></li>
{% endfor %}
{% if (mini_episodes|length > 1) %}
<li><a href="{{page.parent.url()}}">More >></a></li>
{% endif %}
</ul>
{% set options = {
items: {'@self.siblings':''},
'filter': {'type': 'podcast-episode'},
'order': {'by': 'date', 'dir': 'desc'},
'limit': 5 } %}
{% set mini_episodes = page.collection(options) %}
<div class="episodes-mini-list">
<h3>{{ 'PLUGIN_PODCAST.WORDS.LATEST'|t|e }} {{ page.parent.title }} {{ 'PLUGIN_PODCAST.WORDS.EPISODE'|t|e|pluralize }}</h3>
<ul>
{% for e in mini_episodes %}
<li><a href="{{ e.url() }}">{{ e.title }}</a></li>
{% endfor %}
{% if (mini_episodes|length > 1) %}
<li><a href="{{ page.parent.url() }}">{{ 'PLUGIN_PODCAST.WORDS.MORE'|t|e }} >></a></li>
{% endif %}
</ul>
</div>

View File

@@ -1,13 +1,32 @@
{# Only display the series div if there are actual series #}
{% if count(series) > 0 %}
<div id = "podcast-series">
<h2>Podcast Series</h2>
<div class = "podcast-full-list">
{% if (series|length > 0)%}
<h2>{{ 'PLUGIN_PODCAST.WORDS.LATEST'|t|e }} {{ 'PLUGIN_PODCAST.WORDS.SERIES'|t|e|pluralize }}</h2>
<ul>
{% for s in series %}
<li>
<a href="{{ base_url }}{{ s.route }}">{{ s.title }}</a>
</li>
{% endfor %}
{% for s in series %}
<li>
<a href ="{{ s.url }}">
{% if ((s.header.podcast.itunes.image)|first) %}
{{ s.media[s.header.podcast.itunes.image].zoomCrop(200, 200).html(s.header.podcast.itunes.image,'','podcast-content-image')|raw }}
{% endif %}
<h3>{{ s.title }}
{% if (s.header.podcast.audio.meta.duration) %}
<small>( {{ s.header.podcast.audio.meta.duration }} )</small>
{% endif %}
</h2>
</a>
<p class="series-description">
{% if s.summary %}
{{ (s.summary)|striptags|truncate(100)|raw }}
{% else %}
{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.EMPTY'|t|e }}
{% endif %}
</p>
</li>
{% endfor %}
</ul>
{% else %}
<p> No episodes </p>
{% endif %}
</div>
{% endif %}

View File

@@ -0,0 +1,29 @@
{% if series is defined %}
{# Using passed in series Page collection #}
{% else %}
{# Generate new series Page collection based on page template #}
{% if page.template == 'podcast-channel' %}
{% set target = {'@self.children':''} %}
{% else %}
{% set target = {'@self.siblings':''} %}
{% endif %}
{% set options = {
items: target,
'filter': {'type': 'podcast-series'},
'order': {'by': 'date', 'dir': 'desc'},
'limit': 5 }
%}
{% set series = page.collection(options) %}
{% endif %}
<div class="episodes-mini-list">
<h3>{{ 'PLUGIN_PODCAST.WORDS.LATEST'|t|e }} {{ 'PLUGIN_PODCAST.WORDS.SERIES'|t|pluralize }}</h3>
<ul>
{% for s in series %}
<li><a href="{{ s.url() }}">{{ s.title }}</a></li>
{% endfor %}
{% if (series|length > 1) %}
<li><a href="{{ page.parent.url() }}">{{ 'PLUGIN_PODCAST.WORDS.MORE'|t|e }} >></a></li>
{% endif %}
</ul>
</div>

View File

@@ -1,41 +1,50 @@
{% extends 'partials/base.html.twig' %}
{% block content %}
{% set series = page.collection({ 'items': '@self.descendants', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-series') %}
{% set series = page.parent.collection({ 'items': '@self.descendants', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-series') %}
{% set episodes = page.collection({ 'items': '@self.descendants', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-episode') %}
<div class="podcast-channel-header">
{% if (header.podcast.itunes.image) %}
<div class = "podcast-channel-image">
{% set channel_image = ((header.podcast.itunes.image)|first) %}
{{ page.media[channel_image.name].resize(200, 200).html() }}
<div class="podcast-container">
<div class="podcast-nav">
{% include 'partials/breadcrumbs.html.twig'%}
</div>
<div class="podcast-flex-wrapper">
<div class="podcast-flex-child podcast-flex-full">
<h1>{{ page.title }}</h1>
{% if (header.podcast.itunes.subtitle) -%}
<h2>{{ header.podcast.itunes.subtitle }}</h2>
{% endif %}
</div>
<div class="podcast-flex-child podcast-page-content">
{% if(header.podcast.itunes.image) %} {{ page.media[header.podcast.itunes.image].lightbox(600,400).zoomCrop(200,200).html(header.podcast.itunes.image,'','podcast-content-image')|raw }} {% endif %}
{% if not page.content %}
<p>{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.EMPTY'|t|e }}</p>
{% else %}
{{ page.content|raw }}
{% endif %}
</div>
<div class="podcast-flex-break"></div> <!-- break -->
<div class="podcast-flex-child">
{% include 'partials/podcast_episodes_list.html.twig' %}
</div>
{% if(series|length > 0) %}
<div class="podcast-flex-child">
{% include 'partials/podcast_series_list.html.twig' %}
</div>
{% endif %}
<div class="channel-meta">
<h1>{{ header.title }}</h1>
<p class = "owner">by {{ header.podcast.itunes.owner.name}}</p>
<p class = "description">{{page.header.podcast.description}}</p>
</div>
<div class="channel-links">
<a href="{{base_url}}{{page.route}}.rss"><i class="fa fa-rss" aria-hidden="true"></i>{{ 'PLUGIN_PODCAST.PODCAST'|t }} | {{page.title}}</a>
</div>
</div>
{% if (page.content) %}
<div class="channel-content">
<p>
{{page.content}}
</p>
</div>
{% endif %}
{% include 'partials/podcast_episodes_list.html.twig' %}
{% include 'partials/podcast_series_list.html.twig' %}
<div class="clearfix"></div>
{% endblock %}
</div>
{% endblock %}

View File

@@ -1,46 +1,46 @@
{% extends 'partials/base.html.twig' %}
{% block content %}
{% if page.parent.template == 'podcast-channel' %}
{% set episodes = page.siblings %}
{% elseif page.template == 'podcast-series' %}
{% set channel = page.parent %}
{% endif %}
<div class="episode-container">
<div class="episode-nav">
{% include 'partials/breadcrumbs.html.twig'%}
</div>
<div class="episode-flex-wrapper">
<div class="episode-flex-child episode-top">
<h1>{{ page.title }} {% if (header.podcast.audio.meta.guid) %}<small>({{ header.podcast.audio.meta.duration }})</small>{% endif %}</h1>
{% if (header.podcast.itunes.subtitle) -%}
<h2>{{ header.podcast.itunes.subtitle }}</h2
{% endif %}
<div class="episode-content-wrapper">
{% if (header.podcast.audio.meta.guid) %}
<div class="podcast-episode-audio">
<audio controls="1" alt="{{ episode.title }}"><source src="{{ page.header.podcast.audio.meta.guid }}">{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.WARNING'|t|e }}</audio></br>
<a href ="{{ header.podcast.audio.meta.guid }}">{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.DOWNLOAD'|t|e }}</a> | Posted {{ header.date|date('Y-m-d')|nicetime(false) }}
</div>
{% else %}
<p>No audio for this episode</p>
{% endif %}
</div>
<div class="episode-flex-child episode-content">
<h3>{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.HEADER'|t|e }}</h3>
{{ page.content|raw }}
</div>
<div class="episode-flex-child">
{% include 'partials/podcast_episodes_mini_list.html.twig'%}
</div>
</div>
</div>
{% extends 'partials/base.html.twig' %}
{% block content %}
<div class="podcast-container">
<div class="podcast-nav">
{% include 'partials/breadcrumbs.html.twig'%}
</div>
<div class="podcast-flex-wrapper">
<div class="podcast-flex-child podcast-flex-full">
<h1>{{ page.title }} {% if (header.podcast.audio.meta.guid) %}<small>({{ header.podcast.audio.meta.duration }})</small>{% endif %}</h1>
{% if (header.podcast.itunes.subtitle) -%}
<h2>{{ header.podcast.itunes.subtitle }}</h2>
{% endif %}
</div>
<div class="podcast-flex-child podcast-flex-full">
{% if (header.podcast.audio.meta.guid) %}
<div class="podcast-episode-audio">
<audio controls="1" alt="{{ episode.title }}"><source src="{{ page.header.podcast.audio.meta.guid }}">{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.WARNING'|t|e }}</audio></br>
<a href ="{{ header.podcast.audio.meta.guid }}">{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.DOWNLOAD'|t|e }}</a> | Posted {{ header.date|date('Y-m-d')|nicetime(false) }}
</div>
{% else %}
<div><p>No audio for this episode</p></div>
{% endif %}
</div>
<div class="podcast-flex-child podcast-page-content">
{% if not page.content %}
<p>{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.EMPTY'|t|e }}</p>
{% else %}
<h3>{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.HEADER'|t|e }}</h3>
{% if(header.podcast.itunes.image) %} {{ page.media[header.podcast.itunes.image].lightbox(600,400).zoomCrop(200,200).html(header.podcast.itunes.image ,'','podcast-content-image')|raw }} {% endif %}
{{ page.content|raw }}
{% endif %}
</div>
<div class="podcast-flex-child">
{% include 'partials/podcast_episodes_mini_list.html.twig'%}
</div>
</div>
</div>
{% endblock %}

View File

@@ -1,38 +1,46 @@
{% extends 'partials/base.html.twig' %}
{% block content %}
{% set series = page.parent.collection({ 'items': '@self.descendants', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-series') %}
{% set episodes = page.collection({ 'items': '@self.descendants', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-episode') %}
<div class="podcast-channel-header">
<div class = "podcast-channel-image">
{% if not (header.series.image) and (page.parent.header.podcast.itunes.image)%}
{{ page.parent.media[page.parent.header.podcast.itunes.image].resize(200, 200).html()|raw }}
{% else %}
{{ page.media[header.series.image].resize(200, 200).html()|raw }}
{% endif %}
<div class="podcast-container">
<div class="podcast-nav">
{% include 'partials/breadcrumbs.html.twig'%}
</div>
<div class="podcast-flex-wrapper">
<div class="podcast-flex-child podcast-flex-full">
<h1>{{ page.title }}</h1>
{% if (header.podcast.itunes.subtitle) -%}
<h2>{{ header.podcast.itunes.subtitle }}</h2
{% endif %}
</div>
<div class="channel-meta">
<h1>{{ page.parent.header.title }} - {{header.title}}</h1>
<p class = "owner">by {{ page.parent.header.podcast.itunes.owner.name }}</p>
<div class="podcast-flex-child podcast-page-content">
<h3>{{ 'PLUGIN_PODCAST.SERIES_CONTENT.HEADER'|t|e }}</h3>
{% if(header.series.image) %} {{ page.media[header.series.image].lightbox(600,400).zoomCrop(200,200).html(header.podcast.itunes.image,'','podcast-content-image')|raw }} {% endif %}
{% if not page.content %}
{% set description = page.parent.header.podcast.description %}
<p>{{ 'PLUGIN_PODCAST.EPISODE_CONTENT.EMPTY'|t|e }}</p>
{% else %}
{% set description = page.content() %}
{{ page.content|raw }}
{% endif %}
<p class = "description">{{ description|raw }}</p>
</div>
<div class="channel-links">
<a href="{{ base_url }}{{ page.route }}.rss"><i class="fa fa-rss" aria-hidden="true"></i>{{ 'PLUGIN_PODCAST.SERIES'|t }} | {{ page.title }}</a>
{% set series = page.collection({ 'items': '@self.siblings', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-series') %}
{% if(series|length > 0) %}
<div class="podcast-flex-child">
{% include 'partials/podcast_series_mini_list.html.twig' %}
</div>
{% endif %}
{% set episodes = page.collection({ 'items': '@self.children', 'order': {'by': 'date', 'dir': 'desc'}} ).ofType('podcast-episode') %}
<div class="podcast-flex-child podcast-flex-full">
{% include 'partials/podcast_episodes_list.html.twig' %}
</div>
</div>
{% include 'partials/podcast_episodes_list.html.twig' %}
{% include 'partials/podcast_series_list.html.twig' %}
<div class="clearfix"></div>
</div>
{% endblock %}