Craft Theme Blurry Collage Image Main Page

[beckybee]

SOLVED: I was looking under Sections > collage.liquid. when in fact the solution was under Snippets > card-product.liquid lines 66 and 89:

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px, (min-width: 990px) calc((100vw - 130px) / 4)…etc, etc.

Where is says “DIVIDED_BY: 1” …this was originally set to 4, so for lines 66 and 89 I changed the 4 to a 1 and it’s all good.

---

Hey, I’m using the Craft theme and have blurry collage images on the main page.

I’ve tried 1000 x 1000 JPG at 72, 150, 300 resolution, I’ve tried a 500 x 500 image at 72, 150, 300 …nothing works. Every upload looks the same on the front end.

I found a link to a question with the same problemhttps://community.shopify.com/c/shopify-design/craft-theme-main-product-blurry/m-p/1561729 and they said they solved it by going to this thread: (https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/m-p/1439751/highl…).

I went to that link but I can’t find the link of code I need to amend (very amateur here). I think this is the code I need here, but I don’t know what the actually issue is. Help would be appreciated:

{%- when ‘image’ -%}

{%- if block.settings.image != blank -%} {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%}

{{ block.settings.image | image_url: width: 3000 | image_tag:
loading: ‘lazy’,
sizes: sizes,
widths: ‘550, 720, 990, 1100, 1500, 2200, 3000’
}}
{%- else -%}
{{ ‘image’ | placeholder_svg_tag: ‘placeholder-svg placeholder’ }}
{%- endif -%}