From 23319fc0a6b9f3eb08204c5e8a7baf0383d4e5b8 Mon Sep 17 00:00:00 2001
From: Louisa Goncharenko <93098869+lougoncharenko@users.noreply.github.com>
Date: Wed, 20 Dec 2023 13:20:00 -0500
Subject: [PATCH] Applied image shape and ratio to placeholder images (#2817)

added classes and styles to get image shape and image ratio working

added styling on portrait placeholders

aligned placeholder when in potrait mode

applying code review suggestions and removed image-ratio
---
 assets/component-card.css           |  1 -
 sections/featured-collection.liquid |  2 ++
 snippets/card-product.liquid        | 18 ++++++++++++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/assets/component-card.css b/assets/component-card.css
index d4081f00c9d..b4c8458c285 100644
--- a/assets/component-card.css
+++ b/assets/component-card.css
@@ -300,7 +300,6 @@
 }
 
 .card--standard:not(.card--horizontal) .placeholder-svg {
-  height: auto;
   width: 100%;
 }
 
diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid
index ff209cf64bb..15049af18d1 100644
--- a/sections/featured-collection.liquid
+++ b/sections/featured-collection.liquid
@@ -109,6 +109,8 @@
               {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
               {% render 'card-product',
                 show_vendor: section.settings.show_vendor,
+                media_aspect_ratio: section.settings.image_ratio,
+                image_shape: section.settings.image_shape,
                 placeholder_image: placeholder_image
               %}
             </li>
diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
index 1d83c18f98c..75163307778 100644
--- a/snippets/card-product.liquid
+++ b/snippets/card-product.liquid
@@ -325,21 +325,31 @@
     </div>
   </div>
 {%- else -%}
+  {%- liquid
+    assign ratio = 1
+    if media_aspect_ratio == 'portrait'
+      assign ratio = 0.8
+    endif
+  -%}
   <div class="card-wrapper product-card-wrapper underline-links-hover">
     <div
       class="
         card card--{{ settings.card_style }}
         {% if extend_height %} card--extend-height{% endif %}
+        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
         {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
       "
-      style="--ratio-percent: 100%;"
+      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
     >
       <div
         class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
-        style="--ratio-percent: 100%;"
       >
-        <div class="card__media">
-          <div class="media media--transparent">
+        <div
+          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
+        >
+          <div
+            class="media media--transparent"
+          >
             {%- if placeholder_image -%}
               {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
             {%- else -%}