Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix blurry product/collection grid images #2277

Open
wants to merge 27 commits into
base: main
Choose a base branch
from
+111 −42
Open

Fix blurry product/collection grid images #2277

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
c25500b
Fix blurry product/collection grid images
marija-scuric Feb 2, 2023
bf9813b
Removes references to columns
marija-scuric Mar 15, 2023
262e4e3
Update to Dawn 9.0.0 (#2531)
Roi-Arthur Apr 14, 2023
8db58fd
Merge branch 'main' into grid-image-blurry-fix
ludoboludo Apr 14, 2023
ea3fc19
Merge branch 'main' into grid-image-blurry-fix (#2545)
Roi-Arthur Apr 19, 2023
6b2b1e8
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Apr 19, 2023
29ed08b
Merge branch 'main' into grid-image-blurry-fix
ludoboludo Apr 19, 2023
1ac370a
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Apr 21, 2023
691a640
Fix img rendering in Collage, cart and product
Roi-Arthur Apr 21, 2023
2111487
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Apr 25, 2023
7e50a15
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur May 2, 2023
015ef60
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur May 3, 2023
ddf1180
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur May 15, 2023
a9914ad
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur May 29, 2023
72c13c5
Adding new placeholder images
Roi-Arthur Jun 14, 2023
aa247b1
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Jun 14, 2023
9cbd431
Improve readability of column numbers assignment
Roi-Arthur Jun 14, 2023
a1dfcd7
Update 1 translation file
translation-platform[bot] Jun 21, 2023
3bb16d3
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Jul 10, 2023
2db55d5
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Jul 14, 2023
3b109c6
Merge branch 'main' into grid-image-blurry-fix
Roi-Arthur Jul 31, 2023
7ea1e11
Update 1 translation file
translation-platform[bot] Sep 18, 2023
e1ada57
Update 1 translation file
translation-platform[bot] Sep 19, 2023
a70d1e6
Update 1 translation file
translation-platform[bot] May 31, 2024
f4835a1
Update 1 translation file
translation-platform[bot] Aug 23, 2024
63ef7e3
Update 1 translation file
translation-platform[bot] Oct 8, 2024
0936ace
Update 1 translation file
translation-platform[bot] Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions sections/collection-list.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,6 @@
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign columns = section.blocks.size
if columns > 3
assign columns = 3
endif
-%}
{%- for block in section.blocks -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
Expand All @@ -68,7 +62,8 @@
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: section.settings.image_ratio,
columns: columns
columns_desktop: section.settings.columns_desktop,
columns_mobile: section.settings.columns_mobile
%}
</li>
{%- endfor -%}
Expand Down
2 changes: 2 additions & 0 deletions sections/featured-collection.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}"
>
{% render 'card-product',
columns_desktop: section.settings.columns_desktop,
columns_mobile: section.settings.columns_mobile,
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
Expand Down
2 changes: 2 additions & 0 deletions sections/main-collection-product-grid.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,8 @@
{%- endif -%}
<li class="grid__item">
{% render 'card-product',
columns_desktop: section.settings.columns_desktop,
columns_mobile: section.settings.columns_mobile,
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
Expand Down
5 changes: 3 additions & 2 deletions sections/main-list-collections.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@
{%- for collection in collections -%}
<li class="collection-list__item grid__item">
{% render 'card-collection',
columns_desktop: section.settings.columns_desktop,
columns_mobile: section.settings.columns_mobile,
card_collection: collection,
media_aspect_ratio: section.settings.image_ratio,
columns: 3
media_aspect_ratio: section.settings.image_ratio
%}
</li>
{%- endfor -%}
Expand Down
2 changes: 2 additions & 0 deletions sections/main-search.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,6 +222,8 @@
{%- when 'product' -%}
{%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
{% render 'card-product',
columns_desktop: section.settings.columns_desktop,
columns_mobile: section.settings.columns_mobile,
card_product: item,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
Expand Down
2 changes: 2 additions & 0 deletions sections/related-products.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@
{% for recommendation in recommendations.products %}
<li class="grid__item">
{% render 'card-product',
columns_desktop: section.settings.columns_desktop,
columns_mobile: section.settings.columns_mobile,
card_product: recommendation,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
Expand Down
9 changes: 6 additions & 3 deletions snippets/card-collection.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
Accepts:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To reply to your comment @Roi-Arthur

I think we can change the logic a little. the desktop variable is assigned at_least: 1 so in some cases we don't need to assign anything in the collage file.
Here is the mobile logic you have but a bit reworked, I'd have to actually test it to make sure the and is read properly:

{% liquid 
  unless section.settings.mobile_layout == 'column' or section.block.size == 1
    if section.settings.mobile_layout == 'collage'
      if section.blocks.size == 3 and forloop.first and section.settings.desktop_layout == left or forloop.last and section.settings.desktop_layout == right
        assign columns_amount_mobile = 1
      else
        assign columns_amount_mobile = 2
      endif
    endif
  endunless
%}

For the complementary products it's a bit trickier 🤔 I think from what I can see their size is going from 64px wide up to potentially 140px when it's on a product with no image. And 118px on a product with images.

Maybe we could do something a bit simpler that isn't quite perfect but good enough. Something like defaulting to 10 for desktop and 5 for mobile 👍 This way we don't go into logic that's a bit hard to understand.

What do you think?

Copy link
Contributor

@Roi-Arthur Roi-Arthur Apr 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the desktop variable is assigned at_least: 1 so in some cases we don't need to assign anything in the collage file.

I did think of this after the fact and was wondering what's preferable: one the one hand we have more liquid but it's very readable and you know exactly what you're passing to the snippet so might be more user friendly, especially for people who are getting started. On the other we can definitely remove all cases where the assign is for 1 in terms of efficiency.

I'd have to actually test it to make sure the and is read properly:

That was also my concern 😅
Haven't tried any of this yet; was just a draft starting from what sounded logical.

For the complementary products it's a bit trickier

Totally up for something that does 80% of the job if lets us sidestep making more calculations (especially since they do feel a bit arbitrary)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turns out that you cannot chain Liquid operators the way you want; specifically, operators are evaluated from left to right, with no possibility to use parentheses to create "logic blocks". So with that in mind we can't do the long checks I had previously included.

As a result this is what I tested that seems to be working to declare variables before the card snippets:

{% liquid
  unless section.blocks.size == 1
    if forloop.first and section.settings.desktop_layout == 'left'
      assign columns_amount_desktop = 1.5
    elsif forloop.last and section.settings.desktop_layout == 'right'
      assign columns_amount_desktop = 1.5
    else
      assign columns_amount_desktop = 3
    endif
  endunless

  assign columns_amount_mobile = 1
  unless section.settings.mobile_layout == 'column' or section.blocks.size == 1
    unless section.blocks.size == 3 and forloop.first and section.settings.desktop_layout == 'left'
      unless section.blocks.size == 3 and forloop.last and section.settings.desktop_layout == 'right'
        assign columns_amount_mobile = 2
      endunless
    endunless
  endunless
%}

Note the assign columns_amount_mobile = 1 before the mobile assignment, as it appears that the variable value carried forward through the next iterations of the loop? At least that was my conclusion as I was ending up with "columns_amount_mobile = 2" in the last loop even when with desktop_layout = 'right' and this fixed it.

Copy link
Contributor

@ludoboludo ludoboludo May 10, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a correction, you mentioned that operators are evaluated from left to right which isn't right. It's the opposite (source).

- card_collection: {Object} Collection Liquid object
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- columns: {Number}
- columns_desktop: {Number} Number of columns on desktop. Default: 3 (optional)
- columns_mobile: {Number} Number of columns on mobile. Default: 2 (optional)
- extend_height: {Boolean} Card height extends to available container space. Default: false (optional)
- wrapper_class: {String} Wrapper class for card (optional)

Expand All @@ -28,6 +29,8 @@
assign card_color_scheme = settings.collection_card_color_scheme
assign card_style = settings.collection_card_style
endif
assign desktop = columns_desktop | at_least: 1
assign mobile = columns_mobile | at_least: 1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here for the naming. Having something a bit more descriptive so it's easier to read would be great.

-%}

<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
Expand Down Expand Up @@ -62,8 +65,8 @@
"
src="{{ card_collection.featured_image | image_url: width: 1500 }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: desktop }}px,
(min-width: 750px) {% if mobile > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)
"
alt=""
Expand Down
8 changes: 6 additions & 2 deletions snippets/card-product.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- columns_desktop: {Number} Number of columns on desktop. Default: 4 (optional)
- columns_mobile: {Number} Number of columns on mobile. Default: 2 (optional)

Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
Expand All @@ -31,6 +33,8 @@
if ratio == 0 or ratio == null
assign ratio = 1
endif
assign desktop = columns_desktop | at_least: 1
assign mobile = columns_mobile | at_least: 1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here we could use better descriptive naming I think. Those names don't convey clearly what the value is tied to. Maybe columns_amount_desktop 🤷 or something else

-%}
<div class="card-wrapper product-card-wrapper underline-links-hover">
<div
Expand Down Expand Up @@ -64,7 +68,7 @@
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: desktop }}px, (min-width: 990px) calc((100vw - 130px) / {{ desktop }}), (min-width: 750px) calc((100vw - 120px) / {{ mobile }}), calc((100vw - 35px) / {{ mobile }})"
alt="{{ card_product.featured_media.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
Expand All @@ -87,7 +91,7 @@
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src="{{ card_product.media[1] | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: desktop }}px, (min-width: 990px) calc((100vw - 130px) / {{ desktop }}), (min-width: 750px) calc((100vw - 120px) / {{ mobile }}), calc((100vw - 35px) / {{ mobile }})"
alt=""
class="motion-reduce"
loading="lazy"
Expand Down