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

Use small variant of Hero image

Browse Source
master
Nikola Forró 6 years ago
parent f94f467960
commit a122f9acc2
6 changed files with 95 additions and 41 deletions
Show Stats Download Patch File Download Diff File

40
blueprints/modular/hero.yaml
Unescape View File

@ -9,11 +9,6 @@ form:
type: tab
title: Hero
fields:
header.hero_classes:
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`, `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
@ -21,6 +16,13 @@ form:
toggleable: true
description: 'If not specified, this defaults to the first image found in the page''s folder'
header.hero_image_small:
type: filepicker
label: Hero Image (small variant)
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
@ -50,7 +52,35 @@ form:
preview_images: true
toggleable: true
header.hero_background_image_small:
type: filepicker
label: Hero Background Image (small variant)
preview_images: true
toggleable: true
header.hero_background_color:
type: colorpicker
label: Hero Background Color
toggleable: true
header.hero_height:
type: text
size: small
label: Hero Height
description: Height in pixels
default: 500
validate:
type: number
min: 100
max: 1000
header.hero_height_small:
type: text
size: small
label: Hero Height (small variant)
description: Height in pixels
default: 350
validate:
type: number
min: 100
max: 1000

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

@ -4,12 +4,6 @@ form:
type: spacer
title: Hero Section
header.hero_classes:
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`, `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
@ -17,6 +11,13 @@ form:
toggleable: true
description: 'If not specified, this defaults to the first image found in the page''s folder'
header.hero_image_small:
type: filepicker
label: Hero Image (small variant)
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
@ -46,11 +47,39 @@ form:
preview_images: true
toggleable: true
header.hero_background_image_small:
type: filepicker
label: Hero Background Image (small variant)
preview_images: true
toggleable: true
header.hero_background_color:
type: colorpicker
label: Hero Background Color
toggleable: true
header.hero_height:
type: text
size: small
label: Hero Height
description: Height in pixels
default: 500
validate:
type: number
min: 100
max: 1000
header.hero_height_small:
type: text
size: small
label: Hero Height (small variant)
description: Height in pixels
default: 350
validate:
type: number
min: 100
max: 1000
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

24
scss/theme/_framework.scss
Unescape View File

@ -34,30 +34,6 @@ section.section {
padding-top: 6rem;
padding-bottom: 7rem;
&.hero-fullscreen {
height: 100vh;
}
&.hero-large {
height: 500px;
}
&.hero-medium {
height: 400px;
}
&.hero-small {
height: 110px;
}
&.hero-tiny {
height: 8rem;
}
//&.parallax {
// background-attachment: fixed;
//}
h1 {
color: $header-text;
font-size: 4rem !important;

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

@ -1,9 +1,13 @@
{% 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_image_small = page.header.hero_image_small ? page.media[page.header.hero_image_small] : 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_image_small = page.header.hero_background_image_small ? page.media[page.header.hero_background_image_small] : null %}
{% set hero_background_color = page.header.hero_background_color %}
{% set hero_height = page.header.hero_height ? page.header.hero_height : 500 %}
{% set hero_height_small = page.header.hero_height_small ? page.header.hero_height_small : 350 %}
{{ dump(hero_image) }}

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

@ -1,8 +1,23 @@
<section id="{{ id }}" class="section hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}"
style="background:
<style scoped>
.hero-scoped {
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 %};">
{% if hero_background_color %} {{ hero_background_color }}{% endif %};
height: {{ hero_height }}px;
}
@media (max-height: 1000px), (max-width: 700px) {
.hero-scoped {
background:
{% if hero_image_small %}url({{ hero_image_small.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
{% if hero_background_image_small %}, url({{ hero_background_image_small.url }}) repeat{% endif %}
{% if hero_background_color %} {{ hero_background_color }}{% endif %};
height: {{ hero_height_small }}px;
}
}
</style>
<section id="{{ id }}" class="section hero hero-scoped">
<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