Posts Shopify Img Srcset
Post
Cancel

Shopify Img Srcset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{%- comment -%}
Set up helper variables for the currently defined product image object ("img").
{%- endcomment -%}

{%- comment -%}
fallback image urls, for use when srcset isn't supported
{%- endcomment -%}
{%- assign img_url = img | img_url : product_img_size_main, format: settings.product_img_fmt -%}
{%- assign img_url_collection = img | img_url : product_img_size_collection, format: settings.product_img_fmt -%}

{%- comment -%}
Predefined set of image sources that can be provided via Shopify's img_url.
Note the bounding box issue as described below.
{%- endcomment -%}
{% capture img_srcset %}
{{ img | img_url: 600,  format: settings.product_img_fmt }} 600w,
{{ img | img_url: 800,  format: settings.product_img_fmt }} 800w,
{{ img | img_url: 1200, format: settings.product_img_fmt }} 1200w,
{{ img | img_url: 2400, format: settings.product_img_fmt }} 2400w,
{{ img | img_url: 4472, format: settings.product_img_fmt }} 4472w
{%- endcapture -%}
{% comment %}
Previously I used the below to programmatically assign img_srcset, but I
couldn't figure out how to get rid of that last trailing comma with liquid.
{%- assign widths = "600,800,1200,2400,4472" | split: ',' -%}
{% for width in widths %}  {{ img | img_url: width, format: settings.product_img_fmt }} {{ width }}w,
{% endfor -%}
{% endcomment %}

{%- comment -%}
Default value for img "sizes" attribute: 100% of the viewport width by default,
with more specific cases covered below.
{%- endcomment -%}
{%- assign img_sizes = "100vw" -%}

{%- comment -%}
If a variable "product_context" is set we'll use that for specific cases.
For the collection view, different viewport widths will give different numbers
of product images tiled horizontally due to the minimum image size.
NOTE: the shopify image size request syntax assumes a bounding box that will
contain the image within the requested size.  That means that if from this list
the browser selects 25vw, it's assuming an image 25% of the viewport width.
But we need more pixels than that vertically if we're using portrait images.
We'll just double the requested width here to account for any probable aspect
ratio.
{%- endcomment -%}

{%- comment -%}
For the math below, the only case where we won't need up to 25vw*2 = 50vw
pixels across either image dimension (i.e., where we don't have four images
across) is when the viewport becomes narrow enough that we hit the minimum
image size, or wide enough that we hit the maximum.  I won't worry about the
maximum case becuase it'll need about 2300px across the viewport before we
start wasting bandwidth.  With a min-width set to 300px we'll need to reduce to
300*4 + 180 + 56 = 1436px viewport width before we have fewer than four across,
and 300*3 + 180 + 56 = 1136 before  we have fewer than three, and so on.  If we
set thresholds slightly above those values in img_sizes we'll be sure to always
load a large enough image to cover all cases.
1500px on up: 4 across: ~ 25%
1200px on up: 3 across: ~ 35%
800px on up:  2 across: ~ 50%
otherwise:    1 across: ~ 100%
...and then double below due to aspect ratio. Whew.
TODO maybe template out this math based on a shopify variable instead of
hardcoding here.  Until that, see the max-width and min-width on '.products
[typeof="Product"]' in assets/layout.css.liquid.
{%- endcomment -%}
{%- if product_context == "collection" -%}
  {%- assign img_sizes = "(min-width: 1500px) 50vw, (min-width: 1200px) 70vw, (min-width: 800px) 100vw, 200vw" -%}
{%- endif -%}

{%- comment -%}
The cart product image is at most 15% of the viewport wide, so we can just
assume a 30% bounding box for all cases.
{%- endcomment -%}
{%- if product_context == "cart" -%}
  {%- assign img_sizes = "30vw" -%}
{%- endif -%}
Trending Tags

Trending Tags