Make hero background more configurable

blueprints/modular/hero.yaml

@@ -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

blueprints/partials/blog-bits.yaml

@@ -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

scss/theme/_framework.scss

@@ -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;
   //}

templates/modular/hero.html.twig

@@ -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) }}
 

templates/partials/hero.html.twig

@@ -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 }}