From 28b69fc1b7be415f52f2632a598f6ec866f712a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Forr=C3=B3?= <nikola@mraveniste.cc>
Date: Mon, 17 Sep 2018 11:34:42 +0200
Subject: [PATCH] Allow to configure vertical Hero position

---
 blueprints/modular/hero.yaml       | 15 +++++++++++++--
 blueprints/partials/blog-bits.yaml | 15 +++++++++++++--
 templates/modular/hero.html.twig   |  3 ++-
 templates/partials/hero.html.twig  |  4 ++--
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/blueprints/modular/hero.yaml b/blueprints/modular/hero.yaml
index 900b797..de77218 100644
--- a/blueprints/modular/hero.yaml
+++ b/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:
diff --git a/blueprints/partials/blog-bits.yaml b/blueprints/partials/blog-bits.yaml
index a672dc3..be7ac3c 100644
--- a/blueprints/partials/blog-bits.yaml
+++ b/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:
diff --git a/templates/modular/hero.html.twig b/templates/modular/hero.html.twig
index 217c47c..4ca1b93 100644
--- a/templates/modular/hero.html.twig
+++ b/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 %}
diff --git a/templates/partials/hero.html.twig b/templates/partials/hero.html.twig
index 20a3011..1b05a03 100644
--- a/templates/partials/hero.html.twig
+++ b/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;