[TASK] add option to make image full height in image card module (#73)

Co-authored-by: Dmytro Hrynevych <[email protected]>
Resultify · Apr 3, 2024 · e0a7a52 · e0a7a52
1 parent 4024cfb
commit e0a7a52
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 3 deletions.
diff --git a/theme/modules/image-card.module/_locales/en/messages.json b/theme/modules/image-card.module/_locales/en/messages.json
@@ -3814,6 +3814,31 @@
     "description" : "",
     "placeholders" : null
   },
+  "style.image.image.alignment.full_height.default" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.full_height.help_text" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.full_height.inline_help_text" : {
+    "message" : "Stretch the image to the full height of the column. This can cause the image to be cut in unwanted places. Setting image position to either left or right might help with this.",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.full_height.label" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.full_height.placeholder" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
   "style.image.image.alignment.full_width.help_text" : {
     "message" : "",
     "description" : "",
@@ -3839,6 +3864,41 @@
     "description" : "",
     "placeholders" : null
   },
+  "style.image.image.alignment.image_position.choices.value 1" : {
+    "message" : "Label 1",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.image_position.choices.value 2" : {
+    "message" : "Label 2",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.image_position.default" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.image_position.help_text" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.image_position.inline_help_text" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.image_position.label" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
+  "style.image.image.alignment.image_position.placeholder" : {
+    "message" : "",
+    "description" : null,
+    "placeholders" : null
+  },
   "style.image.image.alignment.inline_help_text" : {
     "message" : "",
     "description" : "",
@@ -3874,6 +3934,11 @@
     "description" : "",
     "placeholders" : null
   },
+  "style.image.image.alignment.name" : {
+    "message" : "image-card",
+    "description" : "",
+    "placeholders" : null
+  },
   "style.image.image.alignment.placeholder" : {
     "message" : "",
     "description" : "",

diff --git a/theme/modules/image-card.module/fields.json b/theme/modules/image-card.module/fields.json
@@ -472,6 +472,40 @@
           "display" : "toggle",
           "type" : "boolean",
           "default" : false
+        }, {
+          "id" : "b634a6bd-6957-7896-ad20-5b4972f5c15d",
+          "name" : "full_height",
+          "display_width" : null,
+          "label" : "Full height",
+          "help_text" : "",
+          "inline_help_text" : "Stretch the image to the full height of the column. This can cause the image to be cut in unwanted places. Setting image position to either left or right might help with this.",
+          "required" : false,
+          "locked" : false,
+          "display" : "toggle",
+          "type" : "boolean",
+          "default" : false
+        }, {
+          "id" : "da2500e6-cf28-fadf-dec8-ce03ed84a33e",
+          "name" : "image_position",
+          "display_width" : null,
+          "label" : "Image position",
+          "required" : false,
+          "locked" : false,
+          "visibility" : {
+            "controlling_field" : null,
+            "controlling_field_path" : "style.image.image.alignment.full_height",
+            "controlling_value_regex" : "true",
+            "property" : null,
+            "operator" : "EQUAL",
+            "access" : null
+          },
+          "display" : "select",
+          "choices" : [ [ "left", "Left" ], [ "right", "Right" ] ],
+          "multiple" : false,
+          "reordering_enabled" : true,
+          "preset" : null,
+          "type" : "choice",
+          "default" : ""
         }, {
           "id" : "ceb44ace-5187-71f0-083c-89136a649953",
           "name" : "desktop_alignment",
@@ -518,6 +552,8 @@
         "type" : "group",
         "default" : {
           "full_width" : false,
+          "full_height" : false,
+          "image_position" : "",
           "desktop_alignment" : {
             "horizontal_align" : "LEFT"
           },
@@ -594,6 +630,8 @@
       "default" : {
         "alignment" : {
           "full_width" : false,
+          "full_height" : false,
+          "image_position" : "",
           "desktop_alignment" : {
             "horizontal_align" : "LEFT"
           },
@@ -640,6 +678,8 @@
       "image" : {
         "alignment" : {
           "full_width" : false,
+          "full_height" : false,
+          "image_position" : "",
           "desktop_alignment" : {
             "horizontal_align" : "LEFT"
           },
@@ -3988,7 +4028,7 @@
       "expanded" : false,
       "type" : "group",
       "default" : { }
-    } ],
+          } ],
     "tab" : "STYLE",
     "expanded" : false,
     "type" : "group",
@@ -4084,7 +4124,7 @@
       "expanded" : false,
       "type" : "group",
       "default" : { }
-    } ],
+          } ],
     "tab" : "STYLE",
     "expanded" : false,
     "type" : "group",
@@ -4157,6 +4197,8 @@
       "image" : {
         "alignment" : {
           "full_width" : false,
+          "full_height" : false,
+          "image_position" : "",
           "desktop_alignment" : {
             "horizontal_align" : "LEFT"
           },
@@ -5904,7 +5946,7 @@
   }, {
     "component" : "Secondary button",
     "show" : true
-  }, {
+}, {
     "component" : "CTA",
     "show" : true
   }, {

diff --git a/theme/modules/image-card.module/module.html b/theme/modules/image-card.module/module.html
@@ -107,6 +107,20 @@
         width: 100%;
       }
     {% endif %}
+    {% if module.style.image.image.alignment.full_height %}
+      .image-card-module__image,
+      .g-module-macros-image_wrp {
+        height: 100%;
+      }
+      .image-card-module__image img {
+        object-fit: cover;
+        {% if module.style.image.image.alignment.image_position == 'left' %}
+          object-position: left;
+        {% elif module.style.image.image.alignment.image_position == 'right' %}
+          object-position: right;
+        {% endif %}
+      }
+    {% endif %}
 
     .image-card-module {
       row-gap: {{module.style.general.spacing.horizontal_gap ~ 'px'}};