turbotraktor
/
cheese-theme
1
0
Fork 0
Code Issues Releases Activity

Make hero background more configurable

Browse Source
master
Nikola Forró 6 years ago
parent 499f77fcc0
commit f94f467960
6 changed files with 80 additions and 19 deletions
Show Stats Download Patch File Download Diff File

35
blueprints/modular/hero.yaml
Unescape View File

@ -13,11 +13,44 @@ form:
type: text
label: Hero Classes
markdown: true
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `left-shift`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
header.hero_image:
type: filepicker
label: Hero Image
preview_images: true
toggleable: true
description: 'If not specified, this defaults to the first image found in the page''s folder'
header.hero_autosize:
type: toggle
label: Hero Image Autosize
description: Resize image to cover the entire width
default: 1
highlight: 1
options:
1: Yes
0: No
validate:
type: bool
header.hero_position:
type: text
size: small
label: Hero Image Position
description: Horizontal image position in %
default: 50
validate:
type: number
min: 0
max: 100
header.hero_background_image:
type: filepicker
label: Hero Background Image
preview_images: true
toggleable: true
header.hero_background_color:
type: colorpicker
label: Hero Background Color
toggleable: true

37
blueprints/partials/blog-bits.yaml
Unescape View File

@ -8,14 +8,49 @@ form:
type: text
label: Hero Classes
markdown: true
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `left-shift`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
header.hero_image:
type: filepicker
label: Hero Image
preview_images: true
toggleable: true
description: 'If not specified, this defaults to the first image found in the page''s folder'
header.hero_autosize:
type: toggle
label: Hero Image Autosize
dexcription: Resize image to cover the entire width
default: 1
highlight: 1
options:
1: Yes
0: No
validate:
type: bool
header.hero_position:
type: text
size: small
label: Hero Image Position
description: Horizontal image position in %
default: 50
validate:
type: number
min: 0
max: 100
header.hero_background_image:
type: filepicker
label: Hero Background Image
preview_images: true
toggleable: true
header.hero_background_color:
type: colorpicker
label: Hero Background Color
toggleable: true
toggles_title:
type: spacer
title: Configuration

2
css-compiled/theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
scss/theme/_framework.scss
Unescape View File

@ -54,21 +54,6 @@ section.section {
height: 8rem;
}
background-position: 50% bottom;
background-repeat: no-repeat;
&.blue-bg {
background-color: #2d384a;
}
&.purple-bg {
background-color: #312b59;
}
&.yellow-bg {
background-color: #d29016;
}
//&.parallax {
// background-attachment: fixed;
//}

4
templates/modular/hero.html.twig
Unescape View File

@ -1,5 +1,9 @@
{% set grid_size = theme_var('grid-size') %}
{% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}
{% set hero_position = page.header.hero_position ? page.header.hero_position : 50 %}
{% set hero_size = page.header.hero_autosize ? 'cover' : 'auto' %}
{% set hero_background_image = page.header.hero_background_image ? page.media[page.header.hero_background_image] : null %}
{% set hero_background_color = page.header.hero_background_color %}
{{ dump(hero_image) }}

6
templates/partials/hero.html.twig
Unescape View File

@ -1,4 +1,8 @@
<section id="{{ id }}" class="section hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}" {% if hero_image %}style="background-image: url({{ hero_image.url }});"{% endif %}>
<section id="{{ id }}" class="section hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}"
style="background:
{% if hero_image %}url({{ hero_image.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
{% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% endif %}
{% if hero_background_color %} {{ hero_background_color }}{% endif %};">
<div class="image-overlay"></div>
<section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
{{ content }}

Write Preview
Loading…
Cancel
Save