Compare commits

...
7 Commits
Author SHA1 Message Date
Michael Rose 9bfa6bbb84 Merge branch 'release/3.1.4' 2016-05-02 11:45:32 -04:00
Michael Rose 2b77f7516c Update changelog 2016-05-02 11:45:01 -04:00
Michael Rose 557fbfb059 Merge branch 'feature/overlay-filter' into develop 2016-05-02 11:42:03 -04:00
Michael Rose b59de95b62 Merge branch 'tobie-hero-filter' of https://github.com/tobie/minimal-mistakes into feature/overlay-filter 2016-05-02 11:40:47 -04:00
Tobie Langel 1edfcea306 Style fixes 2016-05-02 14:25:26 +02:00
Tobie Langel f077ec4343 Add overlay_filter param to hero headers
The `overlay_filter` param lets you darken or otherwise filter the hero header picture to make the text content pop out more.

You can use it by specifying the opacity (between 0 and 1) of a black overlay like so:

```yaml
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
header:
  overlay_image: unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  cta_label: "More Info"
  cta_url: "https://unsplash.com"
```

Or if you want to do more fancy things, go full rgba: 

```yaml
excerpt: "This post should display a **header with an overlay image**, if the theme supports it."
header:
  overlay_image: unsplash-image-1.jpg
  overlay_filter: rgba(255, 0, 0, 0.5)
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  cta_label: "More Info"
  cta_url: "https://unsplash.com"
```
2016-05-02 13:59:31 +02:00
Michael Rose d584eb42d2 Merge branch 'release/3.1.3' into develop 2016-04-27 10:58:11 -04:00
2 changed files with 18 additions and 2 deletions
+10
View File
@@ -1,3 +1,13 @@
## [3.1.4](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.1.4)
### Enhancements
- Add overlay_filter param to hero headers [#298](https://github.com/mmistakes/minimal-mistakes/pull/298)
### Maintenance
- Fix `www` and `https` links in author profile include [#293](https://github.com/mmistakes/minimal-mistakes/pull/293)
## [3.1.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.1.3)
### Enhancements
+8 -2
View File
@@ -18,8 +18,14 @@
{% capture overlay_img_path %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% 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 %}
<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: url('{{ overlay_img_path }}');{% 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">
@@ -46,4 +52,4 @@
{% if page.header.caption %}
<span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
{% endif %}
</div>
</div>