Skip to content

Commit

Permalink
Minor improvements to product media liquid [Refactor] (#2022)
Browse files Browse the repository at this point in the history 
* Refactor ratio usage in product thumbnail

* Fix zoom icon placement and featured product issues

* Minor updates

Shopify/dawn#2022
  • Loading branch information
@mattiadragone
mattiadragone committed Oct 22, 2022
1 parent 84bda62 commit 7d752aa
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 106 deletions.
3 changes: 2 additions & 1 deletion assets/section-featured-product.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
padding-bottom: 0;
}

.featured-product .product__modal-opener {
.featured-product .product-media-container {
margin-bottom: var(--media-shadow-vertical-offset);
max-width: 100%;
}

.featured-product .product__media-item {
Expand Down
40 changes: 34 additions & 6 deletions assets/section-main-product.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,8 +571,8 @@ a.product__text {
height: 3rem;
width: 3rem;
position: absolute;
left: calc(1.2rem + var(--media-border-width));
top: calc(1.2rem + var(--media-border-width));
left: 1.2rem;
top: 1.2rem;
z-index: 1;
transition: color var(--duration-short) ease,
opacity var(--duration-short) ease;
Expand Down Expand Up @@ -666,11 +666,11 @@ a.product__text {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
top: calc(var(--border-width) * -1);
right: calc(var(--border-width) * -1);
bottom: calc(var(--border-width) * -1);
left: calc(var(--border-width) * -1);
z-index: 2;
height: 100%;
width: 100%;
}

.product__media-toggle:focus-visible {
Expand Down Expand Up @@ -1236,3 +1236,31 @@ a.product__text {
margin-left: 1.2rem;
flex-shrink: 0;
}

/* Product-thumbnail snippet */

.product-media-container {
width: 100%;
max-width: calc(100% - calc(var(--media-border-width) * 2));
}

@media screen and (min-width: 750px) {
.product-media-container {
max-width: 100%;
}
}

.product-media-container .product__modal-opener {
display: block;
position: relative;
}

@media screen and (min-width: 750px) {
.product-media-container .product__modal-opener:not(.product__modal-opener--image) {
display: none;
}
}

.product-media-container .media {
padding-top: var(--ratio-percent);
}
205 changes: 106 additions & 99 deletions snippets/product-thumbnail.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,125 +37,132 @@
if mobile_layout == 'columns' and media_count > 1
assign mobile_columns = 2
endif

assign preview_media_ratio = 1 | divided_by: media.preview_image.aspect_ratio | times: 100
assign media_ratio = 1 | divided_by: media.aspect_ratio | times: 100
-%}

{%- capture sizes -%}
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | divided_by: desktop_columns | round }}px, (min-width: 990px) calc({{ media_width | times: 100 | divided_by: desktop_columns }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / {{ mobile_columns }} - 4rem)
{%- endcapture -%}

<noscript>
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="product__media-icon motion-reduce quick-add-hidden">{% render 'icon-play' %}</span>
<div class="product__media media gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<div
class="product-media-container gradient global-media-settings"
style="--ratio-percent: {{ preview_media_ratio }}%;"
>
<noscript>
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="product__media-icon motion-reduce quick-add-hidden">{% render 'icon-play' %}</span>
<div class="product__media media">
{{ media.preview_image | image_url: width: 1946 | image_tag:
loading: lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
alt: media.preview_image.alt | escape
}}
</div>
<a href="{% if media.media_type == 'video' %}{{ media.sources[1].url }}{% else %}{{ media | external_video_url }}{% endif %}" class="product__media-toggle">
<span class="visually-hidden">{{ 'products.product.video_exit_message' | t: title: product.title | escape }}</span>
</a>
{%- else -%}
<div class="product__media media">
{{ media.preview_image | image_url: width: 1946 | image_tag:
loading: lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
alt: media.preview_image.alt | escape
}}
</div>
{%- endif -%}
</noscript>

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
<span class="product__media-icon motion-reduce quick-add-hidden" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>
<div class="product__media media media--transparent">
{{ media.preview_image | image_url: width: 1946 | image_tag:
loading: lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
alt: media.preview_image.alt | escape
}}
</div>
<a href="{% if media.media_type == 'video' %}{{ media.sources[1].url }}{% else %}{{ media | external_video_url }}{% endif %}" class="product__media-toggle">
<span class="visually-hidden">{{ 'products.product.video_exit_message' | t: title: product.title | escape }}</span>
</a>
{%- else -%}
<div class="product__media media gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
<button class="product__media-toggle quick-add-hidden" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
</modal-opener>

{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}
<product-model class="deferred-media media media--transparent no-js-hidden" style="--ratio-percent: 100%;" data-media-id="{{ media.id }}">
{%- else -%}
<deferred-media class="deferred-media media no-js-hidden" style="--ratio-percent: {{ media_ratio }}%;" data-media-id="{{ media.id }}">
{%- endif -%}
<button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
<span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
{%- render 'icon-3d-model' -%}
{%- else -%}
<span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
{%- render 'icon-play' -%}
{%- endif -%}
</span>
{{ media.preview_image | image_url: width: 1946 | image_tag:
loading: lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
alt: media.preview_image.alt | escape
}}
</div>
{%- endif -%}
</noscript>

<modal-opener class="product__modal-opener product__modal-opener--{{ media.media_type }} no-js-hidden" data-modal="#ProductModal-{{ modal_id }}">
<span class="product__media-icon motion-reduce quick-add-hidden" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>

<div class="product__media media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
{{ media.preview_image | image_url: width: 1946 | image_tag:
loading: lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
alt: media.preview_image.alt | escape
}}
</div>
<button class="product__media-toggle quick-add-hidden" type="button" aria-haspopup="dialog" data-media-id="{{ media.id }}">
<span class="visually-hidden">
{{ 'products.product.media.open_media' | t: index: position }}
</span>
</button>
</modal-opener>
</button>
<template>
{%- liquid
case media.media_type
when 'external_video'
assign video_class = 'js-' | append: media.host
if media.host == 'youtube'
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
endif
when 'video'
echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
</template>

{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}
<product-model class="deferred-media media media--transparent gradient global-media-settings no-js-hidden" style="padding-top: 100%" data-media-id="{{ media.id }}">
{%- else -%}
<deferred-media class="deferred-media gradient global-media-settings media no-js-hidden" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%" data-media-id="{{ media.id }}">
{%- endif -%}
<button id="Deferred-Poster-Modal-{{ media.id }}" class="deferred-media__poster" type="button">
<span class="deferred-media__poster-button motion-reduce">
{%- if media.media_type == 'model' -%}
<span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
{%- render 'icon-3d-model' -%}
{%- else -%}
<span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
{%- render 'icon-play' -%}
{%- if media.media_type == 'model' -%}
</product-model>
{%- if xr_button -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ media.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
{%- endif -%}
</span>
{{ media.preview_image | image_url: width: 1946 | image_tag:
loading: lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',
alt: media.preview_image.alt | escape
}}
</button>
<template>
{%- liquid
case media.media_type
when 'external_video'
assign video_class = 'js-' | append: media.host
if media.host == 'youtube'
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
endif
when 'video'
echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
when 'model'
echo media | media_tag: image_size: "2048x", toggleable: true
endcase
-%}
</template>

{%- if media.media_type == 'model' -%}
</product-model>
{%- if xr_button -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ media.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% render 'icon-3d-model' %}
{{ 'products.product.xr_button' | t }}
</button>
{%- else -%}
</deferred-media>
{%- endif -%}
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}
</div>

0 comments on commit 7d752aa

Please sign in to comment.