Simplify and cleanup thumbnail fit approach

Shopify · Oct 26, 2022 · 0532ff8 · 0532ff8
1 parent f7683a8
commit 0532ff8
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 30 deletions.
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -1206,34 +1206,10 @@ a.product__text {
 }
 
 .thumbnail img {
-  pointer-events: none;
-}
-
-.thumbnail--narrow:not(.media-fit-cover) img {
-  height: 100%;
-  width: auto;
-  max-width: 100%;
-}
-
-.thumbnail--wide:not(.media-fit-cover) img {
-  height: auto;
-  width: 100%;
-}
-
-.thumbnail--narrow.media-fit-cover img {
-  height: auto;
+  object-fit: cover;
   width: 100%;
-  transform: translateY(-50%);
-  left: 0;
-  position: absolute;
-}
-
-.thumbnail--wide.media-fit-cover img {
   height: 100%;
-  width: auto;
-  transform: translateX(-50%);
-  top: 0;
-  position: absolute;
+  pointer-events: none;
 }
 
 .thumbnail__badge .icon {

diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid
@@ -41,8 +41,6 @@
   if is_duplicate
     assign id_append = '-duplicate'
   endif
-
-  assign thumbnail_media_fit = 'cover'
 -%}
 
 <media-gallery
@@ -186,7 +184,7 @@
               Thumbnail-{{ section.id }}-0{{ id_append }}
             {%- endcapture -%}
             <button
-              class="thumbnail global-media-settings global-media-settings--no-shadow media-fit-{{ thumbnail_media_fit }}{% if media.preview_image.aspect_ratio > 1 %} thumbnail--wide{% else %} thumbnail--narrow{% endif %}"
+              class="thumbnail global-media-settings global-media-settings--no-shadow"
               aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
               aria-current="true"
               aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
@@ -235,7 +233,7 @@
                 Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
               {%- endcapture -%}
               <button
-                class="thumbnail global-media-settings global-media-settings--no-shadow media-fit-{{ thumbnail_media_fit }}{% if media.preview_image.aspect_ratio > 1 %} thumbnail--wide{% else %} thumbnail--narrow{% endif %}"
+                class="thumbnail global-media-settings global-media-settings--no-shadow"
                 aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                 {% if media == product.selected_or_first_available_variant.featured_media
                   or product.selected_or_first_available_variant.featured_media == null