Use small variant of Hero image

blueprints/modular/hero.yaml

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

blueprints/partials/blog-bits.yaml

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

scss/theme/_framework.scss

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

templates/modular/hero.html.twig

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

templates/partials/hero.html.twig

@@ -1,8 +1,23 @@
-<section id="{{ id }}" class="section hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}"
+<style scoped>
-         style="background:
+.hero-scoped {
-            {% if hero_image %}url({{ hero_image.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
+    background:
-            {% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% endif %}
+        {% if hero_image %}url({{ hero_image.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
-            {% if hero_background_color %} {{ hero_background_color }}{% endif %};">
+        {% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% 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 }}