You can add captions now to header images and article images
This commit is contained in:
parent
afe5307a29
commit
8ef95125bd
12 changed files with 144 additions and 12 deletions
|
@ -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/
|
||||
~~~
|
||||
|
||||
|
||||
|
|
|
@ -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/
|
||||
~~~
|
||||
|
||||
|
||||
|
|
|
@ -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/
|
||||
~~~
|
||||
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
32
_posts/design/2015-03-12-no-header-but-image.md
Normal file
32
_posts/design/2015-03-12-no-header-but-image.md
Normal 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' %}
|
24
_posts/design/2015-03-12-no-header.md
Normal file
24
_posts/design/2015-03-12-no-header.md
Normal 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' %}
|
Reference in a new issue