Allow custom gradient in page header overlays (#2806)

* Allow custom gradient in page header overlays

* Update documentation

* Update CHANGELOG and history
This commit is contained in:
iBug 2021-02-06 09:24:25 +08:00 committed by GitHub
parent d585934803
commit 5fe4c4810d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 4 deletions

View file

@ -14,6 +14,7 @@
- Update Indonesian localized UI text strings. [#2731](https://github.com/mmistakes/minimal-mistakes/pull/2731) - Update Indonesian localized UI text strings. [#2731](https://github.com/mmistakes/minimal-mistakes/pull/2731)
- Update remote theme documentation. [#2734](https://github.com/mmistakes/minimal-mistakes/pull/2734) - Update remote theme documentation. [#2734](https://github.com/mmistakes/minimal-mistakes/pull/2734)
- Update allejo/jekyll-toc to v1.1.0, skip headings without an ID. [#2752](https://github.com/mmistakes/minimal-mistakes/pull/2752) - Update allejo/jekyll-toc to v1.1.0, skip headings without an ID. [#2752](https://github.com/mmistakes/minimal-mistakes/pull/2752)
- Allow custom gradient for page header overlay. [#2806](https://github.com/mmistakes/minimal-mistakes/pull/2806)
## [4.21.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.21.0) ## [4.21.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.21.0)

View file

@ -1,9 +1,13 @@
{% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %} {% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %}
{% if page.header.overlay_filter contains "rgba" %} {% if page.header.overlay_filter contains "gradient" %}
{% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %} {% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% elsif page.header.overlay_filter contains "rgba" %}
{% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
{% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
{% elsif page.header.overlay_filter %} {% elsif page.header.overlay_filter %}
{% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %} {% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %}
{% capture overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}){% endcapture %}
{% endif %} {% endif %}
{% if page.header.image_description %} {% if page.header.image_description %}
@ -15,7 +19,7 @@
{% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %} {% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}
<div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% 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: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}), {% endif %}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 %}{{ overlay_filter }}, {% endif %}url('{{ overlay_img_path }}');{% endif %}"
> >
{% if page.header.overlay_color or page.header.overlay_image %} {% if page.header.overlay_color or page.header.overlay_image %}
<div class="wrapper"> <div class="wrapper">

View file

@ -428,7 +428,7 @@ To overlay text on top of a header image you have a few more options:
| Name | Description | Default | | Name | Description | Default |
| ---- | ----------- | ------- | | ---- | ----------- | ------- |
| **overlay_image** | Header image you'd like to overlay. Same rules as `header.image` from above. | | | **overlay_image** | Header image you'd like to overlay. Same rules as `header.image` from above. | |
| **overlay_filter** | Color/opacity to overlay on top of the header image eg: `0.5` or `rgba(255, 0, 0, 0.5)`. | | **overlay_filter** | Color/opacity to overlay on top of the header image. Example: `0.5`, `rgba(255, 0, 0, 0.5)` or [`linear-gradient`][mdn-linear-gradient]. |
| **show_overlay_excerpt** | Display excerpt in the overlay text | true | | **show_overlay_excerpt** | Display excerpt in the overlay text | true |
| **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | | | **excerpt** | Auto-generated page excerpt is added to the overlay text or can be overridden. | |
| **tagline** | Overrides page excerpt. Useful when header text needs to be different from excerpt in archive views. | | | **tagline** | Overrides page excerpt. Useful when header text needs to be different from excerpt in archive views. | |
@ -436,6 +436,8 @@ To overlay text on top of a header image you have a few more options:
| **cta_label** | Deprecated, use `actions` instead. Call to action button text label. | `more_label` in UI Text data file | | **cta_label** | Deprecated, use `actions` instead. Call to action button text label. | `more_label` in UI Text data file |
| **cta_url** | Deprecated, use `actions` instead. Call to action button URL. | | | **cta_url** | Deprecated, use `actions` instead. Call to action button URL. | |
[mdn-linear-gradient]: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
With this YAML Front Matter: With this YAML Front Matter:
```yaml ```yaml
@ -477,7 +479,7 @@ header:
url: "https://github.com" url: "https://github.com"
``` ```
Or if you want to do more fancy things, go full rgba: Or if you feel colorful, use full rgba:
![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }}) ![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }})
@ -492,6 +494,21 @@ header:
url: "https://github.com" url: "https://github.com"
``` ```
Or if you want to do more fancy things, go all the way to [linear-gradient][mdn-linear-gradient]:
![transparent custom overlay]({{ "/assets/images/mm-header-overlay-custom-filter.jpg" | relative_url }})
```yaml
excerpt: "This post should [...]"
header:
overlay_image: /assets/images/unsplash-image-1.jpg
overlay_filter: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 255, 255, 0.5))
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
actions:
- label: "Download"
url: "https://github.com"
```
Multiple call to action button links can be assigned like this: Multiple call to action button links can be assigned like this:
```yaml ```yaml

View file

@ -25,6 +25,7 @@ toc: false
- Update Indonesian localized UI text strings. [#2731](https://github.com/mmistakes/minimal-mistakes/pull/2731)] - Update Indonesian localized UI text strings. [#2731](https://github.com/mmistakes/minimal-mistakes/pull/2731)]
- Update remote theme documentation. [#2734](https://github.com/mmistakes/minimal-mistakes/pull/2734) - Update remote theme documentation. [#2734](https://github.com/mmistakes/minimal-mistakes/pull/2734)
- Update allejo/jekyll-toc to v1.1.0, skip headings without an ID. [#2752](https://github.com/mmistakes/minimal-mistakes/pull/2752) - Update allejo/jekyll-toc to v1.1.0, skip headings without an ID. [#2752](https://github.com/mmistakes/minimal-mistakes/pull/2752)
- Allow custom gradient for page header overlay. [#2806](https://github.com/mmistakes/minimal-mistakes/pull/2806)
## [4.21.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.21.0) ## [4.21.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.21.0)

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB