New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add overlay_filter param to hero headers #298

Merged
merged 2 commits into from May 2, 2016

Conversation

Projects
None yet
2 participants
@tobie
Contributor

tobie commented May 2, 2016

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:

excerpt: "This post should [...]"
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"

05

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

excerpt: "This post should [...]"
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"

05red

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"
```
Show outdated Hide outdated _includes/page__hero.html Outdated
@tobie

This comment has been minimized.

Show comment
Hide comment
@tobie

tobie May 2, 2016

Contributor

Anything else? How do you handle documentation given it's in a different branch?

Contributor

tobie commented May 2, 2016

Anything else? How do you handle documentation given it's in a different branch?

@mmistakes mmistakes merged commit 1edfcea into mmistakes:master May 2, 2016

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes May 2, 2016

Owner

Thanks and merged!

On my todo list was to add an transparent black overlay by default, but your PR is much better as it offers more flexibility. Thanks again.

Owner

mmistakes commented May 2, 2016

Thanks and merged!

On my todo list was to add an transparent black overlay by default, but your PR is much better as it offers more flexibility. Thanks again.

@tobie

This comment has been minimized.

Show comment
Hide comment
@tobie

tobie May 2, 2016

Contributor

No, thank you for an awesome project.

Contributor

tobie commented May 2, 2016

No, thank you for an awesome project.

cjmadsen pushed a commit to cjmadsen/cjmadsen.github.io that referenced this pull request Dec 7, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment