Skip to content

Commit

Permalink
theme: Overide date read-time and no excerpt in overlay
Browse files Browse the repository at this point in the history 
Modify the archive-single.html and single.html to display the date and
the read-time in a single line of "meta" data. Always display this in
the single layout, regardless if overlay is used or not.

Never include the excerpt in the overlay, just the title. Excerpt has at
least two uses and should probably be split into overlay_excerpt and
archive_excerpt so they can be configured independently.

Signed-off-by: Darren Hart <[email protected]>
  • Loading branch information
@dvhart
dvhart committed Dec 31, 2017
1 parent 8d91635 commit 05b076b
Show file tree
Hide file tree
Showing 3 changed files with 206 additions and 0 deletions.
47 changes: 47 additions & 0 deletions _includes/archive-single.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{% if post.header.teaser %}
{% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
{% assign teaser = site.teaser %}
{% endif %}

{% if post.id %}
{% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
{% assign title = post.title %}
{% endif %}

<div class="{{ include.type | default: "list" }}__item">
<article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
{% if include.type == "grid" and teaser %}
<div class="archive__item-teaser">
<img src=
{% if teaser contains "://" %}
"{{ teaser }}"
{% else %}
"{{ teaser | absolute_url }}"
{% endif %}
alt="">
</div>
{% endif %}
<h2 class="archive__item-title" itemprop="headline">
{% if post.link %}
<a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | absolute_url }}" rel="permalink"><i class="fa fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
{% else %}
<a href="{{ post.url | absolute_url }}" rel="permalink">{{ title }}</a>
{% endif %}
</h2>

<!-- dvhart: date read-time meta line -->
<p class="page__meta">
{% if post.last_modified_at %}
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> <time datetime="{{ post.last_modified_at | date: "%Y-%m-%d" }}">{{ post.last_modified_at | date: "%B %d, %Y" }}</time>&emsp;
{% elsif post.date %}
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y " }}</time>&emsp;
{% endif %}
{% if post.read_time %}<i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{% include read-time.html %}{% endif %}
</p>
<!-- end dvhart date read-time meta line -->

{% if post.excerpt %}<p class="archive__item-excerpt" itemprop="description">{{ post.excerpt | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
</article>
</div>
63 changes: 63 additions & 0 deletions _includes/page__hero.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{% if page.header.image contains "://" %}
{% capture img_path %}{{ page.header.image }}{% endcapture %}
{% else %}
{% capture img_path %}{{ page.header.image | absolute_url }}{% endcapture %}
{% endif %}

{% if page.header.cta_url contains "://" %}
{% capture cta_path %}{{ page.header.cta_url }}{% endcapture %}
{% else %}
{% capture cta_path %}{{ page.header.cta_url | absolute_url }}{% endcapture %}
{% endif %}

{% if page.header.overlay_image contains "://" %}
{% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
{% elsif page.header.overlay_image %}
{% capture overlay_img_path %}{{ page.header.overlay_image | absolute_url }}{% endcapture %}
{% endif %}

{% if page.header.overlay_filter contains "rgba" %}
{% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% elsif page.header.overlay_filter %}
{% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %}
{% endif %}

{% if page.header.image_description %}
{% assign image_description = page.header.image_description %}
{% else %}
{% assign image_description = page.title %}
{% endif %}

{% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}

<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}), {% endif %}url('{{ overlay_img_path }}');{% endif %}"
>
{% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper">
<h1 class="page__title" itemprop="headline">
{% if paginator and site.paginate_show_page_num %}
{{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}
{% else %}
{{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
{% endif %}
</h1>
<!-- dvhart: Disable overlay excerpts
{% if page.excerpt %}
<p class="page__lead">{{ page.excerpt | markdownify | remove: "<p>" | remove: "</p>" }}</p>
{% endif %}
-->
{% if site.read_time and page.read_time %}
<p class="page__meta"><i class="fa fa-clock-o" aria-hidden="true"></i> {% include read-time.html %}</p>
{% endif %}
{% if page.header.cta_url %}
<p><a href="{{ cta_path }}" class="btn btn--light-outline btn--large">{{ page.header.cta_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
{% endif %}
</div>
{% else %}
<img src="{{ img_path }}" alt="{{ image_description }}" class="page__hero-image">
{% endif %}
{% if page.header.caption %}
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %}
</div>
96 changes: 96 additions & 0 deletions _layouts/single.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
layout: default
---

{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
{% include page__hero.html %}
{% elsif page.header.video.id and page.header.video.provider %}
{% include page__hero_video.html %}
{% endif %}

{% if page.url != "/" and site.breadcrumbs %}
{% unless paginator %}
{% include breadcrumbs.html %}
{% endunless %}
{% endif %}

<div id="main" role="main">
{% include sidebar.html %}

<article class="page" itemscope itemtype="http://schema.org/CreativeWork">
{% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
{% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
{% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
{% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date: "%B %d, %Y" }}">{% endif %}

<div class="page__inner-wrap">
{% unless page.header.overlay_color or page.header.overlay_image %}
<header>
{% if page.title %}<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>{% endif %}
</header>
{% endunless %}

<section class="page__content" itemprop="text">
{% if page.toc %}
<aside class="sidebar__right">
<nav class="toc">
<header><h4 class="nav__title"><i class="fa fa-{{ page.toc_icon | default: 'file-text' }}"></i> {{ page.toc_label | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
{% include toc.html sanitize=true html=content h_min=2 h_max=3 class="toc__menu" %}
</nav>
</aside>
{% endif %}

<!-- dvhart: date read-time meta line -->
<p class="page__meta">
{% if page.last_modified_at %}
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> <time datetime="{{ page.last_modified_at | date: "%Y-%m-%d" }}">{{ page.last_modified_at | date: "%B %d, %Y" }}</time>&emsp;
{% elsif page.date %}
<i class="fa fa-fw fa-calendar" aria-hidden="true"></i> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y " }}</time>&emsp;
{% endif %}
{% if page.read_time %}<i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;{% include read-time.html %}{% endif %}
</p>
<!-- end dvhart date read-time meta line -->

{{ content }}
{% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ site.data.ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
</section>

<footer class="page__meta">
{% if site.data.ui-text[site.locale].meta_label %}
<h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
{% endif %}
{% include page__taxonomy.html %}
</footer>

{% if page.share %}{% include social-share.html %}{% endif %}

{% include post_pagination.html %}
</div>

{% if jekyll.environment == 'production' and site.comments.provider and page.comments %}
{% include comments.html %}
{% endif %}
</article>

{% comment %}<!-- only show related on a post page when `related: true` -->{% endcomment %}
{% if page.id and page.related and site.related_posts.size > 0 %}
<div class="page__related">
<h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label | default: "You May Also Enjoy" }}</h4>
<div class="grid__wrapper">
{% for post in site.related_posts limit:4 %}
{% include archive-single.html type="grid" %}
{% endfor %}
</div>
</div>
{% comment %}<!-- otherwise show recent posts if no related when `related: true` -->{% endcomment %}
{% elsif page.id and page.related %}
<div class="page__related">
<h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label | default: "You May Also Enjoy" }}</h4>
<div class="grid__wrapper">
{% for post in site.posts limit:4 %}
{% include archive-single.html type="grid" %}
{% endfor %}
</div>
</div>
{% endif %}
</div>

0 comments on commit 05b076b

Please sign in to comment.