Add header overlay sample posts

This commit is contained in:
Michael Rose 2016-03-23 21:50:22 -04:00
parent bda9a23261
commit cae92a8770
13 changed files with 86 additions and 39 deletions

View file

@ -4,18 +4,24 @@
{% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %} {% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
{% endif %} {% endif %}
{% if page.header.background_image contains "http" %} {% if page.header.overlay_image contains "http" %}
{% capture background_img_path %}{{ page.header.background_image }}{% endcapture %} {% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
{% else %} {% elsif page.header.overlay_image %}
{% capture background_img_path %}{{ page.header.background_image | prepend: "/images/" | prepend: base_path }}{% endcapture %} {% capture overlay_img_path %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
{% endif %} {% endif %}
<div class="page__hero{% if page.header.splash %}--splash{% endif %}" <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
style="background: {{ page.header.background_color | default: 'transparent' }} {% if background_img_path %}url('{{ background_img_path }}'){% endif %};" style="background: {{ page.header.overlay_color | default: 'transparent' }} {% if overlay_img_path %}url('{{ overlay_img_path }}'){% endif %};"
> >
{% if page.header.splash %} {% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper"> <div class="wrapper">
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1> <h1 class="page__title" itemprop="headline">
{% if paginator %}
{{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page }} {{ paginator.page }}{% endunless %}
{% else %}
{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
{% endif %}
</h1>
{% 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 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 %}
</div> </div>
{% else %} {% else %}

View file

@ -2,7 +2,7 @@
layout: default layout: default
--- ---
{% if page.header.image %} {% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
{% include page__hero.html %} {% include page__hero.html %}
{% endif %} {% endif %}
@ -14,7 +14,9 @@ layout: default
{% include sidebar.html %} {% include sidebar.html %}
<div class="archive"> <div class="archive">
{% unless page.header.overlay_color or page.header.overlay_image %}
<h1 class="page__title">{{ page.title }}</h1> <h1 class="page__title">{{ page.title }}</h1>
{% endunless %}
{{ content }} {{ content }}
</div> </div>
</div> </div>

View file

@ -4,7 +4,7 @@ layout: default
{% include base_path %} {% include base_path %}
{% if page.header.image %} {% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
{% include page__hero.html %} {% include page__hero.html %}
{% endif %} {% endif %}
@ -16,15 +16,18 @@ layout: default
{% include sidebar.html %} {% include sidebar.html %}
<article class="page" itemscope itemtype="http://schema.org/CreativeWork"> <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.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.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
{% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %} {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
<div class="page__inner-wrap"> <div class="page__inner-wrap">
{% unless page.header.overlay_color or page.header.overlay_image %}
<header> <header>
<h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1> <h1 class="page__title" itemprop="headline">{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}</h1>
{% 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 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 %}
</header> </header>
{% endunless %}
<section class="page__content" itemprop="text"> <section class="page__content" itemprop="text">
{{ content }} {{ content }}

View file

@ -4,7 +4,7 @@ layout: default
{% include base_path %} {% include base_path %}
{% if page.header.splash %} {% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
{% include page__hero.html %} {% include page__hero.html %}
{% endif %} {% endif %}

View file

@ -1,5 +1,5 @@
--- ---
title: "Template: Featured Image (External URL)" title: "Template: Header Image (External URL)"
header: header:
image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg
categories: categories:
@ -12,6 +12,6 @@ tags:
- template - template
--- ---
This post should display a **featured image**, if the theme supports it. This post should display a **header image**, if the theme supports it.
Featured image is an external asset and should load. Featured image is an external asset and should load.

View file

@ -1,5 +1,5 @@
--- ---
title: "Template: Featured Image (Horizontal)" title: "Template: Header Image (Horizontal)"
header: header:
image: unsplash-image-1.jpg image: unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)" caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
@ -13,8 +13,8 @@ tags:
- template - template
--- ---
This post should display a **featured image**, if the theme supports it. This post should display a **header image**, if the theme supports it.
Non-square images can provide some unique styling issues. Non-square images can provide some unique styling issues.
This post tests a horizontal featured image. This post tests a horizontal header image.

View file

@ -1,5 +1,5 @@
--- ---
title: "Template: Featured Image and Text Readability" title: "Template: Header Image and Text Readability"
header: header:
image: unsplash-image-4.jpg image: unsplash-image-4.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)" caption: "Photo credit: [**Unsplash**](https://unsplash.com)"

View file

@ -1,5 +1,5 @@
--- ---
title: "Template: Featured Image (Vertical)" title: "Template: Header Image (Vertical)"
header: header:
image: unsplash-image-6.jpg image: unsplash-image-6.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)" caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
@ -14,8 +14,8 @@ tags:
- template - template
--- ---
This post should display a **featured image**, if the theme supports it. This post should display a **header image**, if the theme supports it.
Non-square images can provide some unique styling issues. Non-square images can provide some unique styling issues.
This post tests a vertical featured image. This post tests a vertical header image.

View file

@ -0,0 +1,18 @@
---
title: "Template: Header Overlay with Background Fill"
header:
overlay_color: "#333"
categories:
- Template
- Uncategorized
tags:
- edge case
- image
- template
---
This post should display a **header with a solid background color**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests overlay headers.

View file

@ -0,0 +1,18 @@
---
title: "Template: Header Image Overlay"
header:
overlay_image: unsplash-image-1.jpg
categories:
- Template
- Uncategorized
tags:
- edge case
- image
- template
---
This post should display a **header with an overlay image**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests overlay header images.

View file

@ -64,6 +64,19 @@
position: relative; position: relative;
margin-bottom: 2em; margin-bottom: 2em;
@include clearfix; @include clearfix;
&--overlay {
position: relative;
margin-bottom: 2em;
padding: 3em 0;
@include clearfix;
text-align: center;
.page__title {
color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5);
}
}
} }
.page__hero-image { .page__hero-image {

View file

@ -2,19 +2,6 @@
SPLASH SPLASH
========================================================================== */ ========================================================================== */
.page__hero--splash {
position: relative;
margin-bottom: 2em;
padding: 3em 0;
@include clearfix;
text-align: center;
.page__title {
color: #fff;
text-shadow: 1px 1px 4px rgba(#000, 0.5);
}
}
.splash__item { .splash__item {
margin-bottom: 2em; margin-bottom: 2em;

File diff suppressed because one or more lines are too long