Update sizes attribute for each usage of responsive-img

bookernath · bookernath · commit cfb75d21280e · 2021-12-15T16:55:47.000-06:00
diff --git a/templates/components/account/order-contents.html b/templates/components/account/order-contents.html
@@ -33,6 +33,7 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
                         fallback_size=../theme_settings.productthumb_size
                         lazyload=../theme_settings.lazyload_mode
                         default_image=../theme_settings.default_image_product
+                        sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                     }}
                 {{/if}}
                 {{#unless refunded}}
diff --git a/templates/components/account/orders-list.html b/templates/components/account/orders-list.html
@@ -17,6 +17,7 @@ <h3 class="account-heading">{{lang 'account.orders.heading' }}</h3>
                         fallback_size=../theme_settings.productthumb_size
                         lazyload=../theme_settings.lazyload_mode
                         default_image=../theme_settings.default_image_product
+                        sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                     }}
                 {{/if}}
             </div>
diff --git a/templates/components/account/returns-list.html b/templates/components/account/returns-list.html
@@ -9,6 +9,7 @@ <h3 class="account-heading">{{lang 'account.returns.heading' }}</h3>
                     image=product.image
                     fallback_size=../theme_settings.productthumb_size
                     lazyload=../theme_settings.lazyload_mode
+                    sizes=(concat (first (split ../theme_settings.productthumb_size 'x')) 'px')
                 }}
             </div>
             <div class="account-product-body">
diff --git a/templates/components/blog/post.html b/templates/components/blog/post.html
@@ -7,6 +7,7 @@
                         image=post.thumbnail
                         fallback_size=theme_settings.blog_size
                         lazyload=theme_settings.lazyload_mode
+                        sizes=(concat (first (split theme_settings.blog_size 'x')) 'px')
                     }}
                 </a>
             </figure>
diff --git a/templates/components/carousel.html b/templates/components/carousel.html
@@ -27,13 +27,15 @@
                     class="heroCarousel-image"
                     fallback_size='1280w'
                     lazyload='disabled'
+                    sizes='(max-width: 640px) 640px, (max-width: 1280px) 1280px, (max-width: 1920px) 1920px, 2560px'
                 }}
             {{else}}
                 {{> components/common/responsive-img
                     image=stencil_image
                     class="heroCarousel-image"
                     fallback_size='1280w'
                     lazyload='lazyload'
+                    sizes='(max-width: 640px) 640px, (max-width: 1280px) 1280px, (max-width: 1920px) 1920px, 2560px'
                 }}
             {{/if}}
             {{#if button_text}}
diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
@@ -25,6 +25,7 @@
                             fallback_size=../theme_settings.productthumb_size
                             lazyload="lazyload"
                             default_image=../theme_settings.default_image_product
+                            sizes='80px'
                         }}
                     {{/if}}
                 </td>
diff --git a/templates/components/cart/preview.html b/templates/components/cart/preview.html
@@ -61,6 +61,7 @@ <h1 class="modal-header-title">
                             fallback_size=../theme_settings.product_size
                             lazyload=../theme_settings.lazyload_mode
                             default_image=../theme_settings.default_image_product
+                            sizes='(min-width: 800px) 80px, 640px'
                         }}
                     </div>
                 </figure>
diff --git a/templates/components/common/cart-preview.html b/templates/components/common/cart-preview.html
@@ -17,6 +17,7 @@
                                 fallback_size=../theme_settings.productthumb_size
                                 lazyload=../theme_settings.lazyload_mode
                                 default_image=../theme_settings.default_image_product
+                                sizes="160px"
                             }}
                         {{/if}}
                     </div>
diff --git a/templates/components/common/responsive-img.html b/templates/components/common/responsive-img.html
@@ -31,6 +31,7 @@
        srcset="{{getImageSrcset image use_default_sizes=true }}"
      {{else if default_image}}src="{{cdn default_image}}" alt="{{lang 'products.card_default_image_alt'}}"
      {{/if}}
-     class="{{#if class}}{{class}}{{/if}}"
+     {{#if class}}class="{{class}}"{{/if}}
+     {{#if sizes}}sizes="{{sizes}}"{{/if}}
 {{#unless lazyload '==' 'disabled'}}loading="lazy"{{/unless}}
 {{otherAttributes}} />
diff --git a/templates/components/products/card.html b/templates/components/products/card.html
@@ -72,6 +72,7 @@
                     fallback_size=theme_settings.productgallery_size
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
+                    sizes='320px'
                 }}
             </div>
         </a>
diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -57,6 +57,7 @@
             fallback_size=theme_settings.productgallery_size
             lazyload=theme_settings.lazyload_mode
             default_image=theme_settings.default_image_product
+            sizes='320px'
         }}
         </a>
         {{#unless hide_product_quick_view}}
diff --git a/templates/components/products/modals/writeReview.html b/templates/components/products/modals/writeReview.html
@@ -15,6 +15,7 @@ <h2 class="modal-header-title">{{lang 'products.reviews.write_a_review'}}</h2>
                     fallback_size=theme_settings.product_size
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
+                    sizes=(concat (first (split theme_settings.product_size 'x')) 'px')
                 }}
             </div>
             <h6 class="product-brand">{{ product.brand.name }}</h6>
diff --git a/templates/components/products/options/product-list.html b/templates/components/products/options/product-list.html
@@ -26,7 +26,8 @@
                             {{> components/common/responsive-img
                                 image=image
                                 class="productOptions-list-item-image"
-                                lazyload='lazyload+lqip'
+                                lazyload='lazyload'
+                                sizes='80px'
                             }}
                         </figure>
                     {{/if}}
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -56,6 +56,7 @@
                     lazyload=theme_settings.lazyload_mode
                     default_image=theme_settings.default_image_product
                     otherAttributes="data-main-image"
+                    sizes=(concat (first (split theme_settings.product_size 'x')) 'px')
                 }}
                 {{!-- Remove the surrounding a-element if there is no main image. --}}
                 {{#if product.main_image}}
@@ -85,7 +86,8 @@
                         image=this
                         fallback_size=../theme_settings.productview_thumb_size
                         lazyload=../theme_settings.lazyload_mode
-                    }}
+                        sizes=(concat (first (split ../theme_settings.productview_thumb_size 'x')) 'px')
+                        }}
                     </a>
                 </li>
             {{/each}}
diff --git a/templates/pages/brand.html b/templates/pages/brand.html
@@ -21,6 +21,7 @@
             image=brand.image
             fallback_size=theme_settings.thumb_size
             lazyload='disabled'
+            sizes=(concat (first (split theme_settings.thumb_size 'x')) 'px')
         }}
     </div>
 {{/if}}
diff --git a/templates/pages/brands.html b/templates/pages/brands.html
@@ -22,6 +22,8 @@ <h1 class="page-heading">{{lang 'brand.label'}}</h1>
                                     fallback_size=../theme_settings.brand_size
                                     lazyload=../theme_settings.lazyload_mode
                                     default_image=../theme_settings.default_image_brand
+                                    sizes='320px'
+                                    sizes=(concat (first (split ../theme_settings.brand_size 'x')) 'px')
                                 }}
                             </div>
                         </a>
diff --git a/templates/pages/category.html b/templates/pages/category.html
@@ -24,6 +24,7 @@
         fallback_size=theme_settings.zoom_size
         lazyload=theme_settings.lazyload_mode
         class="category-header-image"
+        sizes=(concat (first (split ../theme_settings.zoom_size 'x')) 'px')
     }}
 {{/if}}
 {{#unless theme_settings.hide_category_page_heading }}
diff --git a/templates/pages/compare.html b/templates/pages/compare.html
@@ -21,6 +21,7 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                                         fallback_size=../theme_settings.product_size
                                         lazyload=../theme_settings.lazyload_mode
                                         default_image=../theme_settings.default_image_product
+                                        sizes=(concat (first (split ../theme_settings.product_size 'x')) 'px')
                                     }}
                                 </div>
                             </a>
