Allow to configure vertical Hero position

blueprints/modular/hero.yaml

@@ -35,10 +35,21 @@ form:
               validate:
                 type: bool
 
-            header.hero_position:
+            header.hero_vertical_position:
               type: text
               size: small
-              label: Hero Image Position
+              label: Hero Image Vertical Position
+              description: Vertical image position in %
+              default: 0
+              validate:
+                type: number
+                min: 0
+                max: 100
+
+            header.hero_horizontal_position:
+              type: text
+              size: small
+              label: Hero Image Horizontal Position
               description: Horizontal image position in %
               default: 50
               validate:

blueprints/partials/blog-bits.yaml

@@ -30,10 +30,21 @@ form:
       validate:
         type: bool
 
-    header.hero_position:
+    header.hero_vertical_position:
       type: text
       size: small
-      label: Hero Image Position
+      label: Hero Image Vertical Position
+      description: Vertical image position in %
+      default: 0
+      validate:
+        type: number
+        min: 0
+        max: 100
+
+    header.hero_horizontal_position:
+      type: text
+      size: small
+      label: Hero Image Horizontal Position
       description: Horizontal image position in %
       default: 50
       validate:

templates/modular/hero.html.twig

@@ -1,7 +1,8 @@
 {% 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_vertical_position = page.header.hero_vertical_position ? page.header.hero_vertical_position : 0 %}
+{% set hero_horizontal_position = page.header.hero_horizontal_position ? page.header.hero_horizontal_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 %}

templates/partials/hero.html.twig

@@ -1,7 +1,7 @@
 <style scoped>
 .hero-scoped {
     background:
-        {% if hero_image %}url({{ hero_image.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
+        {% if hero_image %}url({{ hero_image.url }}) {{ hero_horizontal_position }}% {{ hero_vertical_position }}%/{{ hero_size }} no-repeat{% endif %}
         {% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% endif %}
         {% if hero_background_color %} {{ hero_background_color }}{% endif %};
     height: {{ hero_height }}px;
@@ -10,7 +10,7 @@
 @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_image_small %}url({{ hero_image_small.url }}) {{ hero_horizontal_position }}% {{ hero_vertical_position }}%/{{ 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;