1
0
Fork 0

You can add captions now to header images and article images

This commit is contained in:
Moritz »mo.« Sauer 2015-03-12 19:30:50 +01:00
parent afe5307a29
commit 8ef95125bd
12 changed files with 144 additions and 12 deletions

View file

@ -12,6 +12,8 @@ tags:
header:
image: header_unsplash_2-970x.jpg
pattern: pattern_concrete.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-image-color/).
@ -22,6 +24,8 @@ It's so easy to do. Just define in front matter an image and a pattern image. In
header:
image: "header_unsplash_2-970x.jpg"
pattern: "pattern_concrete.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~

View file

@ -12,7 +12,9 @@ tags:
image:
thumb: "unsplash_brooklyn-bridge_thumb.jpg"
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
It's so easy to do. Just define in front matter your image.
@ -20,7 +22,9 @@ It's so easy to do. Just define in front matter your image.
~~~
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~

View file

@ -12,6 +12,8 @@ tags:
header:
image: header_unsplash_2-970x.jpg
background-color: "#304558"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-image-pattern/).
@ -23,6 +25,8 @@ It's so easy to do. Just define in front matter an image and a background color.
header:
image: "header_unsplash_2-970x.jpg"
background-color: "#fabb00"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~

View file

@ -14,6 +14,8 @@ header:
background-color: "#EFC94C;"
# pattern: pattern_concrete.jpg
image_fullwidth: unsplash_brooklyn-bridge_header.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
@ -23,6 +25,8 @@ header:
header:
title: header with text
image_fullwidth: unsplash_brooklyn-bridge_header.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~
### All Header-Styles

View file

@ -0,0 +1,32 @@
---
layout: page
subheadline: "Headers With Style"
title: "No Header but Article Image"
teaser: "Feeling Responsive enables you to get the attention of visitors. If you don't want to use a big header, use an image for the article instead."
categories:
- design
tags:
- design
- background color
- header
header: no
image:
title: unsplash_eagle.jpg
credit: This is a caption for the header image with link
url: https://unsplash.com/
---
First turn of the header with `header: no`. Than add an image to with the following code. The caption is optional.
~~~
header: no
image:
title: unsplash_eagle.jpg
credit: This is a caption for the header image with link
url: https://unsplash.com/
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

View file

@ -0,0 +1,24 @@
---
layout: page
subheadline: "Headers With Style"
title: "No Header but Article Image"
teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header but a centered image above the headline."
categories:
- design
tags:
- design
- background color
- header
header: no
---
*Silence is beautiful.* Sometimes you just want no distractions at all. Wether you like the content to speak for itself or enjoy pure typography on a plain background: *Feeling Responsive* got you covered. Just say *no* like this:
~~~
header: no
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}