Add header overlay sample posts
This commit is contained in:
Michael Rose
parent
bda9a23261
commit
cae92a8770
|
|
@ -4,18 +4,24 @@
|
|||
{% capture img_path %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.background_image contains "http" %}
|
||||
{% capture background_img_path %}{{ page.header.background_image }}{% endcapture %}
|
||||
{% else %}
|
||||
{% capture background_img_path %}{{ page.header.background_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
|
||||
{% if page.header.overlay_image contains "http" %}
|
||||
{% capture overlay_img_path %}{{ page.header.overlay_image }}{% endcapture %}
|
||||
{% elsif page.header.overlay_image %}
|
||||
{% capture overlay_img_path %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% endcapture %}
|
||||
{% endif %}
|
||||
|
||||
<div class="page__hero{% if page.header.splash %}--splash{% endif %}"
|
||||
style="background: {{ page.header.background_color | default: 'transparent' }} {% if background_img_path %}url('{{ background_img_path }}'){% endif %};"
|
||||
<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% 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">
|
||||
<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 %}
|
||||
</div>
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: default
|
||||
---
|
||||
|
||||
{% if page.header.image %}
|
||||
{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
|
||||
{% include page__hero.html %}
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -14,7 +14,9 @@ layout: default
|
|||
{% include sidebar.html %}
|
||||
|
||||
<div class="archive">
|
||||
<h1 class="page__title">{{ page.title }}</h1>
|
||||
{% unless page.header.overlay_color or page.header.overlay_image %}
|
||||
<h1 class="page__title">{{ page.title }}</h1>
|
||||
{% endunless %}
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@ layout: default
|
|||
|
||||
{% 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 %}
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -16,15 +16,18 @@ layout: default
|
|||
{% 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.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
|
||||
|
||||
<div class="page__inner-wrap">
|
||||
<header>
|
||||
<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 %}
|
||||
</header>
|
||||
{% unless page.header.overlay_color or page.header.overlay_image %}
|
||||
<header>
|
||||
<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 %}
|
||||
</header>
|
||||
{% endunless %}
|
||||
|
||||
<section class="page__content" itemprop="text">
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ layout: default
|
|||
|
||||
{% 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 %}
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Template: Featured Image (External URL)"
|
||||
title: "Template: Header Image (External URL)"
|
||||
header:
|
||||
image: https://farm5.staticflickr.com/4140/4939863887_84705982fd_b.jpg
|
||||
categories:
|
||||
|
|
@ -12,6 +12,6 @@ tags:
|
|||
- 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.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Template: Featured Image (Horizontal)"
|
||||
title: "Template: Header Image (Horizontal)"
|
||||
header:
|
||||
image: unsplash-image-1.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
|
|
@ -13,8 +13,8 @@ tags:
|
|||
- 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.
|
||||
|
||||
This post tests a horizontal featured image.
|
||||
This post tests a horizontal header image.
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Template: Featured Image and Text Readability"
|
||||
title: "Template: Header Image and Text Readability"
|
||||
header:
|
||||
image: unsplash-image-4.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Template: Featured Image (Vertical)"
|
||||
title: "Template: Header Image (Vertical)"
|
||||
header:
|
||||
image: unsplash-image-6.jpg
|
||||
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
|
||||
|
|
@ -14,8 +14,8 @@ tags:
|
|||
- 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.
|
||||
|
||||
This post tests a vertical featured image.
|
||||
This post tests a vertical header image.
|
||||
18
_posts/2012-03-15-template-header-overlay-color.md
Normal file
18
_posts/2012-03-15-template-header-overlay-color.md
Normal 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.
|
||||
18
_posts/2012-03-15-template-header-overlay-image.md
Normal file
18
_posts/2012-03-15-template-header-overlay-image.md
Normal 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.
|
||||
|
|
@ -64,6 +64,19 @@
|
|||
position: relative;
|
||||
margin-bottom: 2em;
|
||||
@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 {
|
||||
|
|
|
|||
|
|
@ -2,19 +2,6 @@
|
|||
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 {
|
||||
margin-bottom: 2em;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue