From a61462c73a2045b865de84c0c0f1c2d61a2fa868 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Mon, 17 Oct 2022 11:51:01 +0200
Subject: [PATCH 01/16] [POC] Images picture tag

---
 config/theme.yml                              | 45 +++++++++++
 .../catalog/_partials/miniatures/brand.tpl    |  6 +-
 .../catalog/_partials/miniatures/product.tpl  | 41 +++++++---
 .../_partials/product-cover-thumbnails.tpl    | 75 +++++++++++++------
 .../_partials/cart-detailed-product-line.tpl  | 27 ++++++-
 .../_partials/cart-summary-product-line.tpl   | 26 ++++++-
 templates/cms/stores.tpl                      | 32 +++++---
 7 files changed, 201 insertions(+), 51 deletions(-)

diff --git a/config/theme.yml b/config/theme.yml
index 5a967e9e7..a12ab211c 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -135,6 +135,51 @@ global_settings:
       width: 170
       height: 115
       scope: [stores]
+    default_80:
+      width: 80
+      height: 80
+      scope: [categories, products]
+    default_100:
+      width: 100
+      height: 100
+      scope: [manufacturers, suppliers]
+    default_120:
+      width: 120
+      height: 120
+      scope: [products]
+    default_160:
+      width: 160
+      height: 160
+      scope: [categories, products]
+    default_200:
+      width: 200
+      height: 200
+      scope: [stores, manufacturers, suppliers, products]
+    default_320:
+      width: 320
+      height: 320
+      scope: [categories, products]
+    default_400:
+      width: 400
+      height: 400
+      scope: [stores, products]
+    default_720:
+      width: 720
+      height: 720
+      scope: [products]
+    default_1000:
+      width: 1000
+      height: 1000
+      scope: [categories]
+    default_1440:
+      width: 1440
+      height: 1440
+      scope: [products]
+    default_2000:
+      width: 2000
+      height: 2000
+      scope: [categories]
+
 
 theme_settings:
   rtl_generation: false
diff --git a/templates/catalog/_partials/miniatures/brand.tpl b/templates/catalog/_partials/miniatures/brand.tpl
index abbb910cb..084f2b798 100644
--- a/templates/catalog/_partials/miniatures/brand.tpl
+++ b/templates/catalog/_partials/miniatures/brand.tpl
@@ -4,7 +4,11 @@
  *}
 {block name='brand_miniature_item'}
   <li class="brand card col-6 col-md-4 col-lg-3">
-    <div class="brand__img"><a href="{$brand.url}"><img src="{$brand.image}" alt="{$brand.name}" loading="lazy"></a></div>
+    <div class="brand__img">
+      <a href="{$brand.url}">
+        <img src="{$brand.image}" alt="{$brand.name}" loading="lazy">
+      </a>
+    </div>
     <div class="brand__infos">
       <p><a class="brand__link" href="{$brand.url}">{$brand.name}</a></p>
       {$brand.text nofilter}
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 88fb6ebed..9ed19a561 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -13,21 +13,38 @@
         {block name='product_miniature_image'}
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
-              <img
-                src="{$product.cover.bySize.home_default.url}"
-                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
-                loading="lazy"
-                data-full-size-image-url="{$product.cover.bySize.home_default.url}"
-                width="{$product.cover.bySize.home_default.width}"
-                height="{$product.cover.bySize.home_default.height}"
-                class="{$componentName}__image card-img-top"
-              />
+              <picture>
+                <!-- <source 
+                  srcset="
+                  {$product.cover.bySize.home_default.sources.webp} 250w" 
+                  type="image/webp"> -->
+
+                <source 
+                  srcset="
+                    {$product.cover.bySize.default_120.sources.jpg} 250w,
+                    {$product.cover.bySize.default_200.sources.jpg} 2x
+                  "
+                  type="image/jpeg"
+                  media="(max-width: 600px)"
+                />
+
+                <img
+                  class="{$componentName}__image card-img-top"
+                  srcset="
+                    {$product.cover.bySize.default_320.sources.jpg} 250w,
+                    {$product.cover.bySize.default_720.sources.jpg} 2x"
+                  src="{$product.cover.bySize.default_720.sources.jpg}" 
+                  loading="lazy"
+                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+              </picture>
             {else}
               <img
-                src="{$urls.no_picture_image.bySize.home_default.url}"
+                src="{$urls.no_picture_image.bySize.default_320.url}"
                 loading="lazy"
-                width="{$urls.no_picture_image.bySize.home_default.width}"
-                height="{$urls.no_picture_image.bySize.home_default.height}"
+                width="{$urls.no_picture_image.bySize.default_320.width}"
+                height="{$urls.no_picture_image.bySize.default_320.height}"
                 class="{$componentName}__image card-img-top"
               />
             {/if}
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 59dd3ebc9..761bd6d44 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -25,16 +25,32 @@
         {block name='product_cover'}
           {foreach from=$product.images item=image key=key}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
-              <img
-                class="img-fluid"
-                src="{$image.bySize.large_default.url}"
-                {if !empty($image.legend)}
-                  alt="{$image.legend}"
-                  title="{$image.legend}"
-                {else}
-                  alt="{$product.name}"
-                {/if}
-                loading="lazy">
+              <picture>
+                <!-- <source 
+                  srcset="
+                  {$image.bySize.home_default.sources.webp} 250w" 
+                  type="image/webp"> -->
+
+                <source 
+                  srcset="
+                    {$image.bySize.default_320.sources.jpg} 320w,
+                    {$image.bySize.default_720.sources.jpg} 2x
+                  "
+                  type="image/jpeg"
+                  media="(max-width: 600px)"
+                />
+
+                <img
+                  class="img-fluid"
+                  srcset="
+                    {$image.bySize.default_720.sources.jpg} 720w,
+                    {$image.bySize.default_1440.sources.jpg} 2x"
+                  src="{$image.bySize.default_1440.sources.jpg}" 
+                  loading="lazy"
+                  alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
+                  title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
+                  data-full-size-image-url="{$image.bySize.home_default.url}"
+              </picture>
             </div>
           {/foreach}
         {/block}
@@ -54,19 +70,32 @@
               {/if}
               aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
           >
-              <img
-                class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
-                data-image-medium-src="{$image.bySize.medium_default.url}"
-                data-image-large-src="{$image.bySize.large_default.url}"
-                src="{$image.bySize.home_default.url}"
-                {if !empty($image.legend)}
-                  alt="{$image.legend}"
-                  title="{$image.legend}"
-                {else}
-                  alt="{$product.name}"
-                {/if}
-                loading="lazy"
-            >
+              <picture>
+                <!-- <source 
+                  srcset="
+                  {$image.bySize.home_default.sources.webp} 250w" 
+                  type="image/webp"> -->
+
+                <source 
+                  srcset="
+                    {$image.bySize.default_100.sources.jpg} 100w,
+                    {$image.bySize.default_200.sources.jpg} 2x
+                  "
+                  type="image/jpeg"
+                  media="(max-width: 600px)"
+                />
+
+                <img
+                  class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
+                  srcset="
+                    {$image.bySize.default_100.sources.jpg} 100w,
+                    {$image.bySize.default_200.sources.jpg} 2x"
+                  src="{$image.bySize.default_200.sources.jpg}" 
+                  loading="lazy"
+                  alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
+                  title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
+                  data-full-size-image-url="{$image.bySize.home_default.url}"
+              </picture>
             </li>
           {/foreach}
         </ul>
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 861193e42..c23fcf285 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -10,8 +10,31 @@
     <a class="product-line__title product-line__item" href="{$product.url}"
       data-id_customization="{$product.id_customization|intval}">
       {if $product.default_image}
-        <img src="{$product.default_image.bySize.cart_default.url}" class="img-fluid" alt="{$product.name|escape:'quotes'}"
-          loading="lazy">
+        <picture>
+          <!-- <source 
+            srcset="
+            {$product.default_image.bySize.home_default.sources.webp} 250w" 
+            type="image/webp"> -->
+
+          <source 
+            srcset="
+              {$product.default_image.bySize.default_120.sources.jpg} 120w,
+              {$product.default_image.bySize.default_200.sources.jpg} 2x
+            "
+            type="image/jpeg"
+            media="(max-width: 600px)"
+          />
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$product.default_image.bySize.default_120.sources.jpg} 120w,
+              {$product.default_image.bySize.default_200.sources.jpg} 2x"
+            src="{$product.default_image.bySize.default_200.sources.jpg}" 
+            loading="lazy"
+            alt="{$product.name|escape:'quotes'}"
+            title="{$product.name|escape:'quotes'}"
+        </picture>
       {else}
         <img src="{$urls.no_picture_image.bySize.cart_default.url}" class="img-fluid" loading="lazy" />
       {/if}
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index b211ecdac..dfb633a5d 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -6,7 +6,31 @@
   <div class="cart-summary__product__image col-md-2">
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
-        <img src="{$product.default_image.small.url}" alt="{$product.name}" class="img-fluid rounded" loading="lazy">
+        <picture>
+          <!-- <source 
+            srcset="
+            {$product.default_image.bySize.home_default.sources.webp} 250w" 
+            type="image/webp"> -->
+
+          <source 
+            srcset="
+              {$product.default_image.bySize.default_80.sources.jpg} 80w,
+              {$product.default_image.bySize.default_160.sources.jpg} 2x
+            "
+            type="image/jpeg"
+            media="(max-width: 600px)"
+          />
+
+          <img
+            class="img-fluid rounded"
+            srcset="
+              {$product.default_image.default_80.sources.jpg} 80w,
+              {$product.default_image.bySize.default_160.sources.jpg} 2x"
+            src="{$product.default_image.bySize.default_200.sources.jpg}" 
+            loading="lazy"
+            alt="{$product.name}"
+            title="{$product.name}"
+        </picture>
       {else}
         <img src="{$urls.no_picture_image.bySize.small_default.url}" class="img-fluid" loading="lazy" />
       {/if}
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index d9fc334b6..739e1e172 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -16,18 +16,26 @@
           <div class="card-body">
             <div class="row">
               <div class="col-xl-6 store__picture">
-                <img
-                  src="{$store.image.bySize.stores_default.url}"
-                  width="{$store.image.bySize.stores_default.width}"
-                  height="{$store.image.bySize.stores_default.height}"
-                  class="img-fluid"
-                  {if !empty($store.image.legend)}
-                    alt="{$store.image.legend}"
-                    title="{$store.image.legend}"
-                  {else}
-                    alt="{$store.name}"
-                  {/if}
-              >
+                <picture>
+                  <!-- <source 
+                    srcset="
+                    {$store.image.bySize.home_default.sources.webp} 250w" 
+                    type="image/webp"> -->
+
+                  <img
+                    class="img-fluid rounded"
+                    srcset="
+                      {$store.image.bySize.default_200.sources.jpg} 200w,
+                      {$store.image.bySize.default_400.sources.jpg} 2x"
+                    src="{$store.image.bySize.default_200.sources.jpg}" 
+                    loading="lazy"
+                    {if !empty($store.image.legend)}
+                      alt="{$store.image.legend}"
+                      title="{$store.image.legend}"
+                    {else}
+                      alt="{$store.name}"
+                    {/if}
+                </picture>
               </div>
               <div class="col-xl-6 store__description d-none d-md-block">
                 <h2 class="h6 store__name">{$store.name}</h2>

From 68d4f6ae5ee49823fbdcb4de8886d04a1575a684 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Mon, 17 Oct 2022 13:40:08 +0200
Subject: [PATCH 02/16] Refactor

---
 .../catalog/_partials/miniatures/product.tpl  | 16 ++++-------
 .../_partials/product-cover-thumbnails.tpl    | 28 ++++---------------
 .../_partials/cart-detailed-product-line.tpl  | 13 ++-------
 .../_partials/cart-summary-product-line.tpl   | 13 ++-------
 templates/cms/stores.tpl                      |  2 +-
 5 files changed, 16 insertions(+), 56 deletions(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 9ed19a561..20bad8587 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -19,20 +19,14 @@
                   {$product.cover.bySize.home_default.sources.webp} 250w" 
                   type="image/webp"> -->
 
-                <source 
-                  srcset="
-                    {$product.cover.bySize.default_120.sources.jpg} 250w,
-                    {$product.cover.bySize.default_200.sources.jpg} 2x
-                  "
-                  type="image/jpeg"
-                  media="(max-width: 600px)"
-                />
-
                 <img
                   class="{$componentName}__image card-img-top"
                   srcset="
-                    {$product.cover.bySize.default_320.sources.jpg} 250w,
-                    {$product.cover.bySize.default_720.sources.jpg} 2x"
+                    {$product.cover.bySize.default_120.sources.jpg} 120w,
+                    {$product.cover.bySize.default_200.sources.jpg} 200w,
+                    {$product.cover.bySize.default_320.sources.jpg} 320w,
+                    {$product.cover.bySize.default_720.sources.jpg} 720w"
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                   src="{$product.cover.bySize.default_720.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 761bd6d44..58d712834 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -31,21 +31,14 @@
                   {$image.bySize.home_default.sources.webp} 250w" 
                   type="image/webp"> -->
 
-                <source 
-                  srcset="
-                    {$image.bySize.default_320.sources.jpg} 320w,
-                    {$image.bySize.default_720.sources.jpg} 2x
-                  "
-                  type="image/jpeg"
-                  media="(max-width: 600px)"
-                />
-
                 <img
                   class="img-fluid"
                   srcset="
+                    {$image.bySize.default_320.sources.jpg} 320w,
                     {$image.bySize.default_720.sources.jpg} 720w,
-                    {$image.bySize.default_1440.sources.jpg} 2x"
-                  src="{$image.bySize.default_1440.sources.jpg}" 
+                    {$image.bySize.default_1440.sources.jpg} 1440w"
+                  sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                  src="{$image.bySize.default_720.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
@@ -76,21 +69,12 @@
                   {$image.bySize.home_default.sources.webp} 250w" 
                   type="image/webp"> -->
 
-                <source 
-                  srcset="
-                    {$image.bySize.default_100.sources.jpg} 100w,
-                    {$image.bySize.default_200.sources.jpg} 2x
-                  "
-                  type="image/jpeg"
-                  media="(max-width: 600px)"
-                />
-
                 <img
                   class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
                   srcset="
                     {$image.bySize.default_100.sources.jpg} 100w,
-                    {$image.bySize.default_200.sources.jpg} 2x"
-                  src="{$image.bySize.default_200.sources.jpg}" 
+                    {$image.bySize.default_200.sources.jpg} 200w"
+                  src="{$image.bySize.default_100.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index c23fcf285..42a43b249 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -16,21 +16,12 @@
             {$product.default_image.bySize.home_default.sources.webp} 250w" 
             type="image/webp"> -->
 
-          <source 
-            srcset="
-              {$product.default_image.bySize.default_120.sources.jpg} 120w,
-              {$product.default_image.bySize.default_200.sources.jpg} 2x
-            "
-            type="image/jpeg"
-            media="(max-width: 600px)"
-          />
-
           <img
             class="img-fluid"
             srcset="
               {$product.default_image.bySize.default_120.sources.jpg} 120w,
-              {$product.default_image.bySize.default_200.sources.jpg} 2x"
-            src="{$product.default_image.bySize.default_200.sources.jpg}" 
+              {$product.default_image.bySize.default_200.sources.jpg} 200w"
+            src="{$product.default_image.bySize.default_120.sources.jpg}" 
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
             title="{$product.name|escape:'quotes'}"
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index dfb633a5d..0ca470b92 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -12,21 +12,12 @@
             {$product.default_image.bySize.home_default.sources.webp} 250w" 
             type="image/webp"> -->
 
-          <source 
-            srcset="
-              {$product.default_image.bySize.default_80.sources.jpg} 80w,
-              {$product.default_image.bySize.default_160.sources.jpg} 2x
-            "
-            type="image/jpeg"
-            media="(max-width: 600px)"
-          />
-
           <img
             class="img-fluid rounded"
             srcset="
               {$product.default_image.default_80.sources.jpg} 80w,
-              {$product.default_image.bySize.default_160.sources.jpg} 2x"
-            src="{$product.default_image.bySize.default_200.sources.jpg}" 
+              {$product.default_image.bySize.default_160.sources.jpg} 160w"
+            src="{$product.default_image.bySize.default_80.sources.jpg}" 
             loading="lazy"
             alt="{$product.name}"
             title="{$product.name}"
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index 739e1e172..309902bc9 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -26,7 +26,7 @@
                     class="img-fluid rounded"
                     srcset="
                       {$store.image.bySize.default_200.sources.jpg} 200w,
-                      {$store.image.bySize.default_400.sources.jpg} 2x"
+                      {$store.image.bySize.default_400.sources.jpg} 400w"
                     src="{$store.image.bySize.default_200.sources.jpg}" 
                     loading="lazy"
                     {if !empty($store.image.legend)}

From c87f022ecf37f11537ed2a52cc3ac0c5540572e8 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Mon, 17 Oct 2022 14:58:34 +0200
Subject: [PATCH 03/16] Refactor to 2x

---
 templates/catalog/_partials/product-cover-thumbnails.tpl    | 2 +-
 templates/checkout/_partials/cart-detailed-product-line.tpl | 2 +-
 templates/checkout/_partials/cart-summary-product-line.tpl  | 2 +-
 templates/cms/stores.tpl                                    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 58d712834..45b1ec31e 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -73,7 +73,7 @@
                   class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
                   srcset="
                     {$image.bySize.default_100.sources.jpg} 100w,
-                    {$image.bySize.default_200.sources.jpg} 200w"
+                    {$image.bySize.default_200.sources.jpg} 2x"
                   src="{$image.bySize.default_100.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 42a43b249..04f0ecd5a 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -20,7 +20,7 @@
             class="img-fluid"
             srcset="
               {$product.default_image.bySize.default_120.sources.jpg} 120w,
-              {$product.default_image.bySize.default_200.sources.jpg} 200w"
+              {$product.default_image.bySize.default_200.sources.jpg} 2x"
             src="{$product.default_image.bySize.default_120.sources.jpg}" 
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 0ca470b92..8fb08c98b 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -16,7 +16,7 @@
             class="img-fluid rounded"
             srcset="
               {$product.default_image.default_80.sources.jpg} 80w,
-              {$product.default_image.bySize.default_160.sources.jpg} 160w"
+              {$product.default_image.bySize.default_160.sources.jpg} 2x"
             src="{$product.default_image.bySize.default_80.sources.jpg}" 
             loading="lazy"
             alt="{$product.name}"
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index 309902bc9..739e1e172 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -26,7 +26,7 @@
                     class="img-fluid rounded"
                     srcset="
                       {$store.image.bySize.default_200.sources.jpg} 200w,
-                      {$store.image.bySize.default_400.sources.jpg} 400w"
+                      {$store.image.bySize.default_400.sources.jpg} 2x"
                     src="{$store.image.bySize.default_200.sources.jpg}" 
                     loading="lazy"
                     {if !empty($store.image.legend)}

From 751f4439cf7939b483917e48d802ec95b3bc8d2e Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Tue, 18 Oct 2022 15:14:39 +0200
Subject: [PATCH 04/16] Add avif, webp and fallback

---
 .../catalog/_partials/miniatures/product.tpl  | 35 ++++++++---
 .../_partials/product-cover-thumbnails.tpl    | 59 ++++++++++++++-----
 .../_partials/cart-detailed-product-line.tpl  | 26 +++++---
 .../_partials/cart-summary-product-line.tpl   | 26 +++++---
 templates/cms/stores.tpl                      | 26 +++++---
 5 files changed, 128 insertions(+), 44 deletions(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 20bad8587..28c29f66f 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -14,18 +14,37 @@
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
               <picture>
-                <!-- <source 
-                  srcset="
-                  {$product.cover.bySize.home_default.sources.webp} 250w" 
-                  type="image/webp"> -->
+                {if isset($product.cover.bySize.default_320.sources.avif)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_120.sources.avif} 120w,
+                      {$product.cover.bySize.default_200.sources.avif} 200w,
+                      {$product.cover.bySize.default_320.sources.avif} 320w,
+                      {$product.cover.bySize.default_720.sources.avif} 720w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($product.cover.bySize.default_320.sources.webp)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_120.sources.webp} 120w,
+                      {$product.cover.bySize.default_200.sources.webp} 200w,
+                      {$product.cover.bySize.default_320.sources.webp} 320w,
+                      {$product.cover.bySize.default_720.sources.webp} 720w"
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                    type="image/webp"
+                  >
+                {/if}
 
                 <img
                   class="{$componentName}__image card-img-top"
                   srcset="
-                    {$product.cover.bySize.default_120.sources.jpg} 120w,
-                    {$product.cover.bySize.default_200.sources.jpg} 200w,
-                    {$product.cover.bySize.default_320.sources.jpg} 320w,
-                    {$product.cover.bySize.default_720.sources.jpg} 720w"
+                    {$product.cover.bySize.default_120.url} 120w,
+                    {$product.cover.bySize.default_200.url} 200w,
+                    {$product.cover.bySize.default_320.url} 320w,
+                    {$product.cover.bySize.default_720.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                   src="{$product.cover.bySize.default_720.sources.jpg}" 
                   loading="lazy"
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 45b1ec31e..7492d72ac 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -26,17 +26,34 @@
           {foreach from=$product.images item=image key=key}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
               <picture>
-                <!-- <source 
-                  srcset="
-                  {$image.bySize.home_default.sources.webp} 250w" 
-                  type="image/webp"> -->
+                {if isset($image.bySize.default_320.sources.avif)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_320.sources.avif} 320w,
+                      {$image.bySize.default_720.sources.avif} 720w,
+                      {$image.bySize.default_1440.sources.avif} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($image.bySize.default_320.sources.webp)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_320.sources.webp} 320w,
+                      {$image.bySize.default_720.sources.webp} 720w,
+                      {$image.bySize.default_1440.sources.webp} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/webp"
+                  >
+                {/if}
 
                 <img
                   class="img-fluid"
                   srcset="
-                    {$image.bySize.default_320.sources.jpg} 320w,
-                    {$image.bySize.default_720.sources.jpg} 720w,
-                    {$image.bySize.default_1440.sources.jpg} 1440w"
+                    {$image.bySize.default_320.url} 320w,
+                    {$image.bySize.default_720.url} 720w,
+                    {$image.bySize.default_1440.url} 1440w"
                   sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                   src="{$image.bySize.default_720.sources.jpg}" 
                   loading="lazy"
@@ -64,21 +81,33 @@
               aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
           >
               <picture>
-                <!-- <source 
-                  srcset="
-                  {$image.bySize.home_default.sources.webp} 250w" 
-                  type="image/webp"> -->
+                {if isset($image.bySize.default_120.sources.avif)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_120.sources.avif} 120w,
+                      {$image.bySize.default_200.sources.avif} 2x"
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($image.bySize.default_120.sources.webp)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_120.sources.webp} 120w,
+                      {$image.bySize.default_200.sources.webp} 2x"
+                    type="image/webp"
+                  >
+                {/if}
 
                 <img
                   class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
                   srcset="
-                    {$image.bySize.default_100.sources.jpg} 100w,
-                    {$image.bySize.default_200.sources.jpg} 2x"
-                  src="{$image.bySize.default_100.sources.jpg}" 
+                    {$image.bySize.default_120.url} 120w,
+                    {$image.bySize.default_200.url} 2x"
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
-                  data-full-size-image-url="{$image.bySize.home_default.url}"
+                  data-full-size-image-url="{$image.bySize.home_default.url}">
               </picture>
             </li>
           {/foreach}
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 04f0ecd5a..4846f1a66 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -11,17 +11,29 @@
       data-id_customization="{$product.id_customization|intval}">
       {if $product.default_image}
         <picture>
-          <!-- <source 
-            srcset="
-            {$product.default_image.bySize.home_default.sources.webp} 250w" 
-            type="image/webp"> -->
+          {if isset($product.default_image.bySize.default_120.sources.avif)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_120.sources.avif} 120w,
+                {$product.default_image.bySize.default_200.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($product.default_image.bySize.default_120.sources.webp)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_120.sources.webp} 120w,
+                {$product.default_image.bySize.default_200.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
 
           <img
             class="img-fluid"
             srcset="
-              {$product.default_image.bySize.default_120.sources.jpg} 120w,
-              {$product.default_image.bySize.default_200.sources.jpg} 2x"
-            src="{$product.default_image.bySize.default_120.sources.jpg}" 
+              {$product.default_image.bySize.default_120.url} 120w,
+              {$product.default_image.bySize.default_200.url} 2x"
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
             title="{$product.name|escape:'quotes'}"
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 8fb08c98b..7261bb5b0 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -7,17 +7,29 @@
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
         <picture>
-          <!-- <source 
-            srcset="
-            {$product.default_image.bySize.home_default.sources.webp} 250w" 
-            type="image/webp"> -->
+          {if isset($product.default_image.bySize.default_80.sources.avif)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_80.sources.avif} 80w,
+                {$product.default_image.bySize.default_160.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($product.default_image.bySize.default_80.sources.webp)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_80.sources.webp} 80w,
+                {$product.default_image.bySize.default_160.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
 
           <img
             class="img-fluid rounded"
             srcset="
-              {$product.default_image.default_80.sources.jpg} 80w,
-              {$product.default_image.bySize.default_160.sources.jpg} 2x"
-            src="{$product.default_image.bySize.default_80.sources.jpg}" 
+              {$product.default_image.bySize.default_80.url} 80w,
+              {$product.default_image.bySize.default_160.url} 2x"
             loading="lazy"
             alt="{$product.name}"
             title="{$product.name}"
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index 739e1e172..16b4ae303 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -17,17 +17,29 @@
             <div class="row">
               <div class="col-xl-6 store__picture">
                 <picture>
-                  <!-- <source 
-                    srcset="
-                    {$store.image.bySize.home_default.sources.webp} 250w" 
-                    type="image/webp"> -->
+                  {if isset($store.image.bySize.default_200.sources.avif)}
+                    <source 
+                      srcset="
+                        {$store.image.bySize.default_200.sources.avif} 200w,
+                        {$store.image.bySize.default_400.sources.avif} 2x"
+                      type="image/avif"
+                    >
+                  {/if}
+
+                  {if isset($store.image.bySize.default_200.sources.webp)}
+                    <source 
+                      srcset="
+                        {$store.image.bySize.default_200.sources.webp} 200w,
+                        {$store.image.bySize.default_400.sources.webp} 2x"
+                      type="image/webp"
+                    >
+                  {/if}
 
                   <img
                     class="img-fluid rounded"
                     srcset="
-                      {$store.image.bySize.default_200.sources.jpg} 200w,
-                      {$store.image.bySize.default_400.sources.jpg} 2x"
-                    src="{$store.image.bySize.default_200.sources.jpg}" 
+                      {$store.image.bySize.default_200.url} 200w,
+                      {$store.image.bySize.default_400.url} 2x"
                     loading="lazy"
                     {if !empty($store.image.legend)}
                       alt="{$store.image.legend}"

From 0ff130314dfe991f385bd1f363ec996402d22360 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Tue, 18 Oct 2022 15:23:34 +0200
Subject: [PATCH 05/16] Fix some mistakes

---
 .../catalog/_partials/miniatures/product.tpl  | 46 ++++++++++++++++---
 .../_partials/product-cover-thumbnails.tpl    |  2 +-
 .../_partials/cart-detailed-product-line.tpl  | 28 ++++++++++-
 .../_partials/cart-summary-product-line.tpl   | 28 ++++++++++-
 4 files changed, 94 insertions(+), 10 deletions(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 28c29f66f..75006439c 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -53,13 +53,45 @@
                   data-full-size-image-url="{$product.cover.bySize.home_default.url}"
               </picture>
             {else}
-              <img
-                src="{$urls.no_picture_image.bySize.default_320.url}"
-                loading="lazy"
-                width="{$urls.no_picture_image.bySize.default_320.width}"
-                height="{$urls.no_picture_image.bySize.default_320.height}"
-                class="{$componentName}__image card-img-top"
-              />
+              <picture>
+                {if isset($urls.no_picture_image.bySize.default_320.sources.avif)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_120.sources.avif} 120w,
+                      {$urls.no_picture_image.bySize.default_200.sources.avif} 200w,
+                      {$urls.no_picture_image.bySize.default_320.sources.avif} 320w,
+                      {$urls.no_picture_image.bySize.default_720.sources.avif} 720w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($urls.no_picture_image.bySize.default_320.sources.webp)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_120.sources.webp} 120w,
+                      {$urls.no_picture_image.bySize.default_200.sources.webp} 200w,
+                      {$urls.no_picture_image.bySize.default_320.sources.webp} 320w,
+                      {$urls.no_picture_image.bySize.default_720.sources.webp} 720w"
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="{$componentName}__image card-img-top"
+                  srcset="
+                    {$urls.no_picture_image.bySize.default_120.url} 120w,
+                    {$urls.no_picture_image.bySize.default_200.url} 200w,
+                    {$urls.no_picture_image.bySize.default_320.url} 320w,
+                    {$urls.no_picture_image.bySize.default_720.url} 720w"
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                  src="{$urls.no_picture_image.bySize.default_720.sources.jpg}" 
+                  loading="lazy"
+                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+              </picture>
             {/if}
 
             {block name='quick_view_touch'}
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 7492d72ac..9ed5ccb82 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -107,7 +107,7 @@
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
-                  data-full-size-image-url="{$image.bySize.home_default.url}">
+                >
               </picture>
             </li>
           {/foreach}
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 4846f1a66..ee165d011 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -39,7 +39,33 @@
             title="{$product.name|escape:'quotes'}"
         </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.cart_default.url}" class="img-fluid" loading="lazy" />
+        <picture>
+          {if isset($urls.no_picture_image.bySize.default_120.sources.avif)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_120.sources.avif} 120w,
+                {$urls.no_picture_image.bySize.default_200.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($urls.no_picture_image.bySize.default_120.sources.webp)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_120.sources.webp} 120w,
+                {$urls.no_picture_image.bySize.default_200.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$urls.no_picture_image.bySize.default_120.url} 120w,
+              {$urls.no_picture_image.bySize.default_200.url} 200w"
+            loading="lazy"
+          >
+        </picture>
       {/if}
     </a>
   </div>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 7261bb5b0..3d87d1f77 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -35,7 +35,33 @@
             title="{$product.name}"
         </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.small_default.url}" class="img-fluid" loading="lazy" />
+        <picture>
+          {if isset($urls.no_picture_image.bySize.default_80.sources.avif)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_80.sources.avif} 80w,
+                {$urls.no_picture_image.bySize.default_160.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($urls.no_picture_image.bySize.default_80.sources.webp)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_80.sources.webp} 80w,
+                {$urls.no_picture_image.bySize.default_160.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$urls.no_picture_image.bySize.default_80.url} 80w,
+              {$urls.no_picture_image.bySize.default_160.url} 2x"
+            loading="lazy"
+          >
+        </picture>
       {/if}
     </a>
   </div>

From 93f170ac720f7ea581944d91755ecdc97baf7ed7 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Tue, 18 Oct 2022 15:54:31 +0200
Subject: [PATCH 06/16] Set default height and width

---
 templates/catalog/_partials/miniatures/product.tpl          | 6 +++++-
 templates/catalog/_partials/product-cover-thumbnails.tpl    | 4 ++++
 templates/checkout/_partials/cart-detailed-product-line.tpl | 4 ++++
 templates/checkout/_partials/cart-summary-product-line.tpl  | 4 ++++
 templates/cms/stores.tpl                                    | 2 ++
 5 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 75006439c..cc2d7b97e 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -13,7 +13,7 @@
         {block name='product_miniature_image'}
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
-              <picture>
+              
                 {if isset($product.cover.bySize.default_320.sources.avif)}
                   <source 
                     srcset="
@@ -47,6 +47,8 @@
                     {$product.cover.bySize.default_720.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                   src="{$product.cover.bySize.default_720.sources.jpg}" 
+                  width="{$product.cover.bySize.default_720.width}"
+                  height="{$product.cover.bySize.default_720.height}"
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
@@ -86,6 +88,8 @@
                     {$urls.no_picture_image.bySize.default_320.url} 320w,
                     {$urls.no_picture_image.bySize.default_720.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                  width="{$urls.no_picture_image.bySize.default_720.width}"
+                  height="{$urls.no_picture_image.bySize.default_720.height}"
                   src="{$urls.no_picture_image.bySize.default_720.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 9ed5ccb82..e01b10b8e 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -56,6 +56,8 @@
                     {$image.bySize.default_1440.url} 1440w"
                   sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                   src="{$image.bySize.default_720.sources.jpg}" 
+                  width="{$image.bySize.default_720.width}"
+                  height="{$image.bySize.default_720.height}"
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
@@ -104,6 +106,8 @@
                   srcset="
                     {$image.bySize.default_120.url} 120w,
                     {$image.bySize.default_200.url} 2x"
+                  width="{$image.bySize.default_120.width}"
+                  height="{$image.bySize.default_120.height}"
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index ee165d011..f78d08d76 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -34,6 +34,8 @@
             srcset="
               {$product.default_image.bySize.default_120.url} 120w,
               {$product.default_image.bySize.default_200.url} 2x"
+            width="{$product.default_image.bySize.default_120.width}"
+            height="{$product.default_image.bySize.default_120.height}"
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
             title="{$product.name|escape:'quotes'}"
@@ -63,6 +65,8 @@
             srcset="
               {$urls.no_picture_image.bySize.default_120.url} 120w,
               {$urls.no_picture_image.bySize.default_200.url} 200w"
+            width="{$urls.no_picture_image.bySize.default_120.width}"
+            height="{$urls.no_picture_image.bySize.default_120.height}"
             loading="lazy"
           >
         </picture>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 3d87d1f77..12af97604 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -30,6 +30,8 @@
             srcset="
               {$product.default_image.bySize.default_80.url} 80w,
               {$product.default_image.bySize.default_160.url} 2x"
+            width="{$product.default_image.bySize.default_80.width}"
+            height="{$product.default_image.bySize.default_80.height}"
             loading="lazy"
             alt="{$product.name}"
             title="{$product.name}"
@@ -59,6 +61,8 @@
             srcset="
               {$urls.no_picture_image.bySize.default_80.url} 80w,
               {$urls.no_picture_image.bySize.default_160.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_80.width}"
+            height="{$urls.no_picture_image.bySize.default_80.height}"
             loading="lazy"
           >
         </picture>
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index 16b4ae303..b3820976b 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -41,6 +41,8 @@
                       {$store.image.bySize.default_200.url} 200w,
                       {$store.image.bySize.default_400.url} 2x"
                     loading="lazy"
+                    width="{$store.image.bySize.default_200.width}"
+                    height="{$store.image.bySize.default_200.height}"
                     {if !empty($store.image.legend)}
                       alt="{$store.image.legend}"
                       title="{$store.image.legend}"

From 8b5185edb6d5b0ba5b22aa324dd03d86da79bae2 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 19 Oct 2022 15:23:15 +0200
Subject: [PATCH 07/16] Review feedbacks

---
 .../catalog/_partials/miniatures/product.tpl  | 16 +++---
 .../_partials/product-cover-thumbnails.tpl    | 54 +++++++++++++++----
 .../_partials/cart-detailed-product-line.tpl  | 14 ++---
 .../_partials/cart-summary-product-line.tpl   | 12 ++---
 templates/cms/stores.tpl                      |  6 +--
 5 files changed, 68 insertions(+), 34 deletions(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index cc2d7b97e..9c147a924 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -13,7 +13,7 @@
         {block name='product_miniature_image'}
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
-              
+              <picture>
                 {if isset($product.cover.bySize.default_320.sources.avif)}
                   <source 
                     srcset="
@@ -46,13 +46,14 @@
                     {$product.cover.bySize.default_320.url} 320w,
                     {$product.cover.bySize.default_720.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  src="{$product.cover.bySize.default_720.sources.jpg}" 
-                  width="{$product.cover.bySize.default_720.width}"
-                  height="{$product.cover.bySize.default_720.height}"
+                  src="{$product.cover.bySize.default_320.sources.jpg}" 
+                  width="{$product.cover.bySize.default_320.width}"
+                  height="{$product.cover.bySize.default_320.height}"
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+                >
               </picture>
             {else}
               <picture>
@@ -88,13 +89,14 @@
                     {$urls.no_picture_image.bySize.default_320.url} 320w,
                     {$urls.no_picture_image.bySize.default_720.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  width="{$urls.no_picture_image.bySize.default_720.width}"
-                  height="{$urls.no_picture_image.bySize.default_720.height}"
-                  src="{$urls.no_picture_image.bySize.default_720.sources.jpg}" 
+                  width="{$urls.no_picture_image.bySize.default_320.width}"
+                  height="{$urls.no_picture_image.bySize.default_320.height}"
+                  src="{$urls.no_picture_image.bySize.default_320.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+                >
               </picture>
             {/if}
 
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index e01b10b8e..8d15b7b99 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -58,7 +58,7 @@
                   src="{$image.bySize.default_720.sources.jpg}" 
                   width="{$image.bySize.default_720.width}"
                   height="{$image.bySize.default_720.height}"
-                  loading="lazy"
+                  loading="eager"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
                   data-full-size-image-url="{$image.bySize.home_default.url}"
@@ -86,16 +86,16 @@
                 {if isset($image.bySize.default_120.sources.avif)}
                   <source 
                     srcset="
-                      {$image.bySize.default_120.sources.avif} 120w,
-                      {$image.bySize.default_200.sources.avif} 2x"
-                    type="image/avif"
+                      {$image.bySize.default_120.sources.avif},
+                      {$image.bySize.default_200.sources.avif} 2x",
+                  type="image/avif"
                   >
                 {/if}
 
                 {if isset($image.bySize.default_120.sources.webp)}
                   <source 
                     srcset="
-                      {$image.bySize.default_120.sources.webp} 120w,
+                      {$image.bySize.default_120.sources.webp},
                       {$image.bySize.default_200.sources.webp} 2x"
                     type="image/webp"
                   >
@@ -104,7 +104,7 @@
                 <img
                   class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
                   srcset="
-                    {$image.bySize.default_120.url} 120w,
+                    {$image.bySize.default_120.url},
                     {$image.bySize.default_200.url} 2x"
                   width="{$image.bySize.default_120.width}"
                   height="{$image.bySize.default_120.height}"
@@ -121,12 +121,44 @@
 
     {hook h='displayAfterProductThumbs' product=$product}
   {else}
-      <img 
-        class="img-fluid" 
-        src="{$urls.no_picture_image.bySize.large_default.url}" 
-        width="{$urls.no_picture_image.bySize.large_default.width}"
-        height="{$urls.no_picture_image.bySize.large_default.height}"
+    <picture>
+      {if isset($urls.no_picture_image.bySize.default_320.sources.avif)}
+        <source 
+          srcset="
+            {$urls.no_picture_image.bySize.default_320.sources.avif} 320w,
+            {$urls.no_picture_image.bySize.default_720.sources.avif} 720w,
+            {$urls.no_picture_image.bySize.default_1440.sources.avif} 1440w"
+          sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+          type="image/avif"
+        >
+      {/if}
+
+      {if isset($urls.no_picture_image.bySize.default_320.sources.webp)}
+        <source 
+          srcset="
+            {$urls.no_picture_image.bySize.default_320.sources.webp} 320w,
+            {$urls.no_picture_image.bySize.default_720.sources.webp} 720w,
+            {$urls.no_picture_image.bySize.default_1440.sources.webp} 1440w"
+          sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+          type="image/webp"
+        >
+      {/if}
+
+      <img
+        class="img-fluid"
+        srcset="
+          {$urls.no_picture_image.bySize.default_320.url} 320w,
+          {$urls.no_picture_image.bySize.default_720.url} 720w,
+          {$urls.no_picture_image.bySize.default_1440.url} 1440w"
+        sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+        width="{$urls.no_picture_image.bySize.default_120.width}"
+        height="{$urls.no_picture_image.bySize.default_120.height}"
+        src="{$urls.no_picture_image.bySize.default_320.sources.jpg}" 
         loading="lazy"
+        alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+        title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+        data-full-size-image-url="{$product.cover.bySize.home_default.url}"
       >
+    </picture>
   {/if}
 </div>
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index f78d08d76..4bc7f6960 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -14,7 +14,7 @@
           {if isset($product.default_image.bySize.default_120.sources.avif)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_120.sources.avif} 120w,
+                {$product.default_image.bySize.default_120.sources.avif},
                 {$product.default_image.bySize.default_200.sources.avif} 2x"
               type="image/avif"
             >
@@ -23,7 +23,7 @@
           {if isset($product.default_image.bySize.default_120.sources.webp)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_120.sources.webp} 120w,
+                {$product.default_image.bySize.default_120.sources.webp},
                 {$product.default_image.bySize.default_200.sources.webp} 2x"
               type="image/webp"
             >
@@ -32,7 +32,7 @@
           <img
             class="img-fluid"
             srcset="
-              {$product.default_image.bySize.default_120.url} 120w,
+              {$product.default_image.bySize.default_120.url},
               {$product.default_image.bySize.default_200.url} 2x"
             width="{$product.default_image.bySize.default_120.width}"
             height="{$product.default_image.bySize.default_120.height}"
@@ -45,7 +45,7 @@
           {if isset($urls.no_picture_image.bySize.default_120.sources.avif)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_120.sources.avif} 120w,
+                {$urls.no_picture_image.bySize.default_120.sources.avif},
                 {$urls.no_picture_image.bySize.default_200.sources.avif} 2x"
               type="image/avif"
             >
@@ -54,7 +54,7 @@
           {if isset($urls.no_picture_image.bySize.default_120.sources.webp)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_120.sources.webp} 120w,
+                {$urls.no_picture_image.bySize.default_120.sources.webp},
                 {$urls.no_picture_image.bySize.default_200.sources.webp} 2x"
               type="image/webp"
             >
@@ -63,8 +63,8 @@
           <img
             class="img-fluid"
             srcset="
-              {$urls.no_picture_image.bySize.default_120.url} 120w,
-              {$urls.no_picture_image.bySize.default_200.url} 200w"
+              {$urls.no_picture_image.bySize.default_120.url},
+              {$urls.no_picture_image.bySize.default_200.url} 2x"
             width="{$urls.no_picture_image.bySize.default_120.width}"
             height="{$urls.no_picture_image.bySize.default_120.height}"
             loading="lazy"
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 12af97604..d2c784f5c 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -10,7 +10,7 @@
           {if isset($product.default_image.bySize.default_80.sources.avif)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_80.sources.avif} 80w,
+                {$product.default_image.bySize.default_80.sources.avif},
                 {$product.default_image.bySize.default_160.sources.avif} 2x"
               type="image/avif"
             >
@@ -19,7 +19,7 @@
           {if isset($product.default_image.bySize.default_80.sources.webp)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_80.sources.webp} 80w,
+                {$product.default_image.bySize.default_80.sources.webp},
                 {$product.default_image.bySize.default_160.sources.webp} 2x"
               type="image/webp"
             >
@@ -28,7 +28,7 @@
           <img
             class="img-fluid rounded"
             srcset="
-              {$product.default_image.bySize.default_80.url} 80w,
+              {$product.default_image.bySize.default_80.url},
               {$product.default_image.bySize.default_160.url} 2x"
             width="{$product.default_image.bySize.default_80.width}"
             height="{$product.default_image.bySize.default_80.height}"
@@ -41,7 +41,7 @@
           {if isset($urls.no_picture_image.bySize.default_80.sources.avif)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_80.sources.avif} 80w,
+                {$urls.no_picture_image.bySize.default_80.sources.avif},
                 {$urls.no_picture_image.bySize.default_160.sources.avif} 2x"
               type="image/avif"
             >
@@ -50,7 +50,7 @@
           {if isset($urls.no_picture_image.bySize.default_80.sources.webp)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_80.sources.webp} 80w,
+                {$urls.no_picture_image.bySize.default_80.sources.webp},
                 {$urls.no_picture_image.bySize.default_160.sources.webp} 2x"
               type="image/webp"
             >
@@ -59,7 +59,7 @@
           <img
             class="img-fluid"
             srcset="
-              {$urls.no_picture_image.bySize.default_80.url} 80w,
+              {$urls.no_picture_image.bySize.default_80.url},
               {$urls.no_picture_image.bySize.default_160.url} 2x"
             width="{$urls.no_picture_image.bySize.default_80.width}"
             height="{$urls.no_picture_image.bySize.default_80.height}"
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index b3820976b..b905e5663 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -20,7 +20,7 @@
                   {if isset($store.image.bySize.default_200.sources.avif)}
                     <source 
                       srcset="
-                        {$store.image.bySize.default_200.sources.avif} 200w,
+                        {$store.image.bySize.default_200.sources.avif},
                         {$store.image.bySize.default_400.sources.avif} 2x"
                       type="image/avif"
                     >
@@ -29,7 +29,7 @@
                   {if isset($store.image.bySize.default_200.sources.webp)}
                     <source 
                       srcset="
-                        {$store.image.bySize.default_200.sources.webp} 200w,
+                        {$store.image.bySize.default_200.sources.webp},
                         {$store.image.bySize.default_400.sources.webp} 2x"
                       type="image/webp"
                     >
@@ -38,7 +38,7 @@
                   <img
                     class="img-fluid rounded"
                     srcset="
-                      {$store.image.bySize.default_200.url} 200w,
+                      {$store.image.bySize.default_200.url},
                       {$store.image.bySize.default_400.url} 2x"
                     loading="lazy"
                     width="{$store.image.bySize.default_200.width}"

From 9cf363c7a4ce4c9dd825632ee243a8e8843c8fb5 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 26 Oct 2022 14:34:59 +0200
Subject: [PATCH 08/16] Category size fix

---
 config/theme.yml                                | 4 ++--
 templates/catalog/_partials/category-header.tpl | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/config/theme.yml b/config/theme.yml
index a12ab211c..cbc806408 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -169,7 +169,7 @@ global_settings:
       scope: [products]
     default_1000:
       width: 1000
-      height: 1000
+      height: 200
       scope: [categories]
     default_1440:
       width: 1440
@@ -177,7 +177,7 @@ global_settings:
       scope: [products]
     default_2000:
       width: 2000
-      height: 2000
+      height: 400
       scope: [categories]
 
 
diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
index 6106947e4..d256412f0 100644
--- a/templates/catalog/_partials/category-header.tpl
+++ b/templates/catalog/_partials/category-header.tpl
@@ -24,5 +24,3 @@
       {include file='catalog/_partials/subcategories.tpl' subcategories=$subcategories}
     {/if}
 </div>
-
-

From ee1709aa37056306e2f12f48215b9434d53c4df9 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Fri, 28 Oct 2022 15:49:59 +0200
Subject: [PATCH 09/16] Make sizes more generic

---
 config/theme.yml                              | 28 +++----
 .../catalog/_partials/miniatures/product.tpl  | 68 ++++++++---------
 .../_partials/product-cover-thumbnails.tpl    | 76 +++++++++----------
 .../_partials/cart-detailed-product-line.tpl  | 40 +++++-----
 .../_partials/cart-summary-product-line.tpl   | 40 +++++-----
 templates/cms/stores.tpl                      | 20 ++---
 6 files changed, 132 insertions(+), 140 deletions(-)

diff --git a/config/theme.yml b/config/theme.yml
index cbc806408..def7d742d 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -135,47 +135,39 @@ global_settings:
       width: 170
       height: 115
       scope: [stores]
-    default_80:
-      width: 80
-      height: 80
-      scope: [categories, products]
-    default_100:
-      width: 100
-      height: 100
-      scope: [manufacturers, suppliers]
-    default_120:
+    square_xs:
       width: 120
       height: 120
-      scope: [products]
-    default_160:
+      scope: [products, manufacturers, suppliers, categories]
+    square_s:
       width: 160
       height: 160
       scope: [categories, products]
-    default_200:
+    square_sm:
       width: 200
       height: 200
       scope: [stores, manufacturers, suppliers, products]
-    default_320:
+    square_md:
       width: 320
       height: 320
       scope: [categories, products]
-    default_400:
+    square_xl:
       width: 400
       height: 400
       scope: [stores, products]
-    default_720:
+    product_main:
       width: 720
       height: 720
       scope: [products]
-    default_1000:
+    category_cover:
       width: 1000
       height: 200
       scope: [categories]
-    default_1440:
+    product_main_2x:
       width: 1440
       height: 1440
       scope: [products]
-    default_2000:
+    category_cover_2x:
       width: 2000
       height: 400
       scope: [categories]
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 9c147a924..b879efa7d 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -14,25 +14,25 @@
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
               <picture>
-                {if isset($product.cover.bySize.default_320.sources.avif)}
+                {if isset($product.cover.bySize.square_md.sources.avif)}
                   <source 
                     srcset="
-                      {$product.cover.bySize.default_120.sources.avif} 120w,
-                      {$product.cover.bySize.default_200.sources.avif} 200w,
-                      {$product.cover.bySize.default_320.sources.avif} 320w,
-                      {$product.cover.bySize.default_720.sources.avif} 720w"
+                      {$product.cover.bySize.square_xs.sources.avif} 120w,
+                      {$product.cover.bySize.square_sm.sources.avif} 200w,
+                      {$product.cover.bySize.square_md.sources.avif} 320w,
+                      {$product.cover.bySize.product_main.sources.avif} 720w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                     type="image/avif"
                   >
                 {/if}
 
-                {if isset($product.cover.bySize.default_320.sources.webp)}
+                {if isset($product.cover.bySize.square_md.sources.webp)}
                   <source 
                     srcset="
-                      {$product.cover.bySize.default_120.sources.webp} 120w,
-                      {$product.cover.bySize.default_200.sources.webp} 200w,
-                      {$product.cover.bySize.default_320.sources.webp} 320w,
-                      {$product.cover.bySize.default_720.sources.webp} 720w"
+                      {$product.cover.bySize.square_xs.sources.webp} 120w,
+                      {$product.cover.bySize.square_sm.sources.webp} 200w,
+                      {$product.cover.bySize.square_md.sources.webp} 320w,
+                      {$product.cover.bySize.product_main.sources.webp} 720w"
                     sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                     type="image/webp"
                   >
@@ -41,14 +41,14 @@
                 <img
                   class="{$componentName}__image card-img-top"
                   srcset="
-                    {$product.cover.bySize.default_120.url} 120w,
-                    {$product.cover.bySize.default_200.url} 200w,
-                    {$product.cover.bySize.default_320.url} 320w,
-                    {$product.cover.bySize.default_720.url} 720w"
+                    {$product.cover.bySize.square_xs.url} 120w,
+                    {$product.cover.bySize.square_sm.url} 200w,
+                    {$product.cover.bySize.square_md.url} 320w,
+                    {$product.cover.bySize.product_main.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  src="{$product.cover.bySize.default_320.sources.jpg}" 
-                  width="{$product.cover.bySize.default_320.width}"
-                  height="{$product.cover.bySize.default_320.height}"
+                  src="{$product.cover.bySize.square_md.sources.jpg}" 
+                  width="{$product.cover.bySize.square_md.width}"
+                  height="{$product.cover.bySize.square_md.height}"
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
@@ -57,25 +57,25 @@
               </picture>
             {else}
               <picture>
-                {if isset($urls.no_picture_image.bySize.default_320.sources.avif)}
+                {if isset($urls.no_picture_image.bySize.square_md.sources.avif)}
                   <source 
                     srcset="
-                      {$urls.no_picture_image.bySize.default_120.sources.avif} 120w,
-                      {$urls.no_picture_image.bySize.default_200.sources.avif} 200w,
-                      {$urls.no_picture_image.bySize.default_320.sources.avif} 320w,
-                      {$urls.no_picture_image.bySize.default_720.sources.avif} 720w"
+                      {$urls.no_picture_image.bySize.square_xs.sources.avif} 120w,
+                      {$urls.no_picture_image.bySize.square_sm.sources.avif} 200w,
+                      {$urls.no_picture_image.bySize.square_md.sources.avif} 320w,
+                      {$urls.no_picture_image.bySize.product_main.sources.avif} 720w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                     type="image/avif"
                   >
                 {/if}
 
-                {if isset($urls.no_picture_image.bySize.default_320.sources.webp)}
+                {if isset($urls.no_picture_image.bySize.square_md.sources.webp)}
                   <source 
                     srcset="
-                      {$urls.no_picture_image.bySize.default_120.sources.webp} 120w,
-                      {$urls.no_picture_image.bySize.default_200.sources.webp} 200w,
-                      {$urls.no_picture_image.bySize.default_320.sources.webp} 320w,
-                      {$urls.no_picture_image.bySize.default_720.sources.webp} 720w"
+                      {$urls.no_picture_image.bySize.square_xs.sources.webp} 120w,
+                      {$urls.no_picture_image.bySize.square_sm.sources.webp} 200w,
+                      {$urls.no_picture_image.bySize.square_md.sources.webp} 320w,
+                      {$urls.no_picture_image.bySize.product_main.sources.webp} 720w"
                     sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                     type="image/webp"
                   >
@@ -84,14 +84,14 @@
                 <img
                   class="{$componentName}__image card-img-top"
                   srcset="
-                    {$urls.no_picture_image.bySize.default_120.url} 120w,
-                    {$urls.no_picture_image.bySize.default_200.url} 200w,
-                    {$urls.no_picture_image.bySize.default_320.url} 320w,
-                    {$urls.no_picture_image.bySize.default_720.url} 720w"
+                    {$urls.no_picture_image.bySize.square_xs.url} 120w,
+                    {$urls.no_picture_image.bySize.square_sm.url} 200w,
+                    {$urls.no_picture_image.bySize.square_md.url} 320w,
+                    {$urls.no_picture_image.bySize.product_main.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  width="{$urls.no_picture_image.bySize.default_320.width}"
-                  height="{$urls.no_picture_image.bySize.default_320.height}"
-                  src="{$urls.no_picture_image.bySize.default_320.sources.jpg}" 
+                  width="{$urls.no_picture_image.bySize.square_md.width}"
+                  height="{$urls.no_picture_image.bySize.square_md.height}"
+                  src="{$urls.no_picture_image.bySize.square_md.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 8d15b7b99..1d4a30232 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -26,23 +26,23 @@
           {foreach from=$product.images item=image key=key}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
               <picture>
-                {if isset($image.bySize.default_320.sources.avif)}
+                {if isset($image.bySize.square_md.sources.avif)}
                   <source 
                     srcset="
-                      {$image.bySize.default_320.sources.avif} 320w,
-                      {$image.bySize.default_720.sources.avif} 720w,
-                      {$image.bySize.default_1440.sources.avif} 1440w"
+                      {$image.bySize.square_md.sources.avif} 320w,
+                      {$image.bySize.product_main.sources.avif} 720w,
+                      {$image.bySize.product_main_2x.sources.avif} 1440w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                     type="image/avif"
                   >
                 {/if}
 
-                {if isset($image.bySize.default_320.sources.webp)}
+                {if isset($image.bySize.square_md.sources.webp)}
                   <source 
                     srcset="
-                      {$image.bySize.default_320.sources.webp} 320w,
-                      {$image.bySize.default_720.sources.webp} 720w,
-                      {$image.bySize.default_1440.sources.webp} 1440w"
+                      {$image.bySize.square_md.sources.webp} 320w,
+                      {$image.bySize.product_main.sources.webp} 720w,
+                      {$image.bySize.product_main_2x.sources.webp} 1440w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                     type="image/webp"
                   >
@@ -51,13 +51,13 @@
                 <img
                   class="img-fluid"
                   srcset="
-                    {$image.bySize.default_320.url} 320w,
-                    {$image.bySize.default_720.url} 720w,
-                    {$image.bySize.default_1440.url} 1440w"
+                    {$image.bySize.square_md.url} 320w,
+                    {$image.bySize.product_main.url} 720w,
+                    {$image.bySize.product_main_2x.url} 1440w"
                   sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
-                  src="{$image.bySize.default_720.sources.jpg}" 
-                  width="{$image.bySize.default_720.width}"
-                  height="{$image.bySize.default_720.height}"
+                  src="{$image.bySize.product_main.sources.jpg}" 
+                  width="{$image.bySize.product_main.width}"
+                  height="{$image.bySize.product_main.height}"
                   loading="eager"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
@@ -83,20 +83,20 @@
               aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
           >
               <picture>
-                {if isset($image.bySize.default_120.sources.avif)}
+                {if isset($image.bySize.square_xs.sources.avif)}
                   <source 
                     srcset="
-                      {$image.bySize.default_120.sources.avif},
-                      {$image.bySize.default_200.sources.avif} 2x",
+                      {$image.bySize.square_xs.sources.avif},
+                      {$image.bySize.square_sm.sources.avif} 2x",
                   type="image/avif"
                   >
                 {/if}
 
-                {if isset($image.bySize.default_120.sources.webp)}
+                {if isset($image.bySize.square_xs.sources.webp)}
                   <source 
                     srcset="
-                      {$image.bySize.default_120.sources.webp},
-                      {$image.bySize.default_200.sources.webp} 2x"
+                      {$image.bySize.square_xs.sources.webp},
+                      {$image.bySize.square_sm.sources.webp} 2x"
                     type="image/webp"
                   >
                 {/if}
@@ -104,10 +104,10 @@
                 <img
                   class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
                   srcset="
-                    {$image.bySize.default_120.url},
-                    {$image.bySize.default_200.url} 2x"
-                  width="{$image.bySize.default_120.width}"
-                  height="{$image.bySize.default_120.height}"
+                    {$image.bySize.square_xs.url},
+                    {$image.bySize.square_sm.url} 2x"
+                  width="{$image.bySize.square_xs.width}"
+                  height="{$image.bySize.square_xs.height}"
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
@@ -122,23 +122,23 @@
     {hook h='displayAfterProductThumbs' product=$product}
   {else}
     <picture>
-      {if isset($urls.no_picture_image.bySize.default_320.sources.avif)}
+      {if isset($urls.no_picture_image.bySize.square_md.sources.avif)}
         <source 
           srcset="
-            {$urls.no_picture_image.bySize.default_320.sources.avif} 320w,
-            {$urls.no_picture_image.bySize.default_720.sources.avif} 720w,
-            {$urls.no_picture_image.bySize.default_1440.sources.avif} 1440w"
+            {$urls.no_picture_image.bySize.square_md.sources.avif} 320w,
+            {$urls.no_picture_image.bySize.product_main.sources.avif} 720w,
+            {$urls.no_picture_image.bySize.product_main_2x.sources.avif} 1440w"
           sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
           type="image/avif"
         >
       {/if}
 
-      {if isset($urls.no_picture_image.bySize.default_320.sources.webp)}
+      {if isset($urls.no_picture_image.bySize.square_md.sources.webp)}
         <source 
           srcset="
-            {$urls.no_picture_image.bySize.default_320.sources.webp} 320w,
-            {$urls.no_picture_image.bySize.default_720.sources.webp} 720w,
-            {$urls.no_picture_image.bySize.default_1440.sources.webp} 1440w"
+            {$urls.no_picture_image.bySize.square_md.sources.webp} 320w,
+            {$urls.no_picture_image.bySize.product_main.sources.webp} 720w,
+            {$urls.no_picture_image.bySize.product_main_2x.sources.webp} 1440w"
           sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
           type="image/webp"
         >
@@ -147,13 +147,13 @@
       <img
         class="img-fluid"
         srcset="
-          {$urls.no_picture_image.bySize.default_320.url} 320w,
-          {$urls.no_picture_image.bySize.default_720.url} 720w,
-          {$urls.no_picture_image.bySize.default_1440.url} 1440w"
+          {$urls.no_picture_image.bySize.square_md.url} 320w,
+          {$urls.no_picture_image.bySize.product_main.url} 720w,
+          {$urls.no_picture_image.bySize.product_main_2x.url} 1440w"
         sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
-        width="{$urls.no_picture_image.bySize.default_120.width}"
-        height="{$urls.no_picture_image.bySize.default_120.height}"
-        src="{$urls.no_picture_image.bySize.default_320.sources.jpg}" 
+        width="{$urls.no_picture_image.bySize.square_xs.width}"
+        height="{$urls.no_picture_image.bySize.square_xs.height}"
+        src="{$urls.no_picture_image.bySize.square_md.sources.jpg}" 
         loading="lazy"
         alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
         title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 4bc7f6960..04ff5e104 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -11,20 +11,20 @@
       data-id_customization="{$product.id_customization|intval}">
       {if $product.default_image}
         <picture>
-          {if isset($product.default_image.bySize.default_120.sources.avif)}
+          {if isset($product.default_image.bySize.square_xs.sources.avif)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_120.sources.avif},
-                {$product.default_image.bySize.default_200.sources.avif} 2x"
+                {$product.default_image.bySize.square_xs.sources.avif},
+                {$product.default_image.bySize.square_sm.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($product.default_image.bySize.default_120.sources.webp)}
+          {if isset($product.default_image.bySize.square_xs.sources.webp)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_120.sources.webp},
-                {$product.default_image.bySize.default_200.sources.webp} 2x"
+                {$product.default_image.bySize.square_xs.sources.webp},
+                {$product.default_image.bySize.square_sm.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -32,30 +32,30 @@
           <img
             class="img-fluid"
             srcset="
-              {$product.default_image.bySize.default_120.url},
-              {$product.default_image.bySize.default_200.url} 2x"
-            width="{$product.default_image.bySize.default_120.width}"
-            height="{$product.default_image.bySize.default_120.height}"
+              {$product.default_image.bySize.square_xs.url},
+              {$product.default_image.bySize.square_sm.url} 2x"
+            width="{$product.default_image.bySize.square_xs.width}"
+            height="{$product.default_image.bySize.square_xs.height}"
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
             title="{$product.name|escape:'quotes'}"
         </picture>
       {else}
         <picture>
-          {if isset($urls.no_picture_image.bySize.default_120.sources.avif)}
+          {if isset($urls.no_picture_image.bySize.square_xs.sources.avif)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_120.sources.avif},
-                {$urls.no_picture_image.bySize.default_200.sources.avif} 2x"
+                {$urls.no_picture_image.bySize.square_xs.sources.avif},
+                {$urls.no_picture_image.bySize.square_sm.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($urls.no_picture_image.bySize.default_120.sources.webp)}
+          {if isset($urls.no_picture_image.bySize.square_xs.sources.webp)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_120.sources.webp},
-                {$urls.no_picture_image.bySize.default_200.sources.webp} 2x"
+                {$urls.no_picture_image.bySize.square_xs.sources.webp},
+                {$urls.no_picture_image.bySize.square_sm.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -63,10 +63,10 @@
           <img
             class="img-fluid"
             srcset="
-              {$urls.no_picture_image.bySize.default_120.url},
-              {$urls.no_picture_image.bySize.default_200.url} 2x"
-            width="{$urls.no_picture_image.bySize.default_120.width}"
-            height="{$urls.no_picture_image.bySize.default_120.height}"
+              {$urls.no_picture_image.bySize.square_xs.url},
+              {$urls.no_picture_image.bySize.square_sm.url} 2x"
+            width="{$urls.no_picture_image.bySize.square_xs.width}"
+            height="{$urls.no_picture_image.bySize.square_xs.height}"
             loading="lazy"
           >
         </picture>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index d2c784f5c..8a378fa6d 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -7,20 +7,20 @@
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
         <picture>
-          {if isset($product.default_image.bySize.default_80.sources.avif)}
+          {if isset($product.default_image.bySize.square_xs.sources.avif)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_80.sources.avif},
-                {$product.default_image.bySize.default_160.sources.avif} 2x"
+                {$product.default_image.bySize.square_xs.sources.avif},
+                {$product.default_image.bySize.square_s.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($product.default_image.bySize.default_80.sources.webp)}
+          {if isset($product.default_image.bySize.square_xs.sources.webp)}
             <source 
               srcset="
-                {$product.default_image.bySize.default_80.sources.webp},
-                {$product.default_image.bySize.default_160.sources.webp} 2x"
+                {$product.default_image.bySize.square_xs.sources.webp},
+                {$product.default_image.bySize.square_s.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -28,30 +28,30 @@
           <img
             class="img-fluid rounded"
             srcset="
-              {$product.default_image.bySize.default_80.url},
-              {$product.default_image.bySize.default_160.url} 2x"
-            width="{$product.default_image.bySize.default_80.width}"
-            height="{$product.default_image.bySize.default_80.height}"
+              {$product.default_image.bySize.square_xs.url},
+              {$product.default_image.bySize.square_s.url} 2x"
+            width="{$product.default_image.bySize.square_xs.width}"
+            height="{$product.default_image.bySize.square_xs.height}"
             loading="lazy"
             alt="{$product.name}"
             title="{$product.name}"
         </picture>
       {else}
         <picture>
-          {if isset($urls.no_picture_image.bySize.default_80.sources.avif)}
+          {if isset($urls.no_picture_image.bySize.square_xs.sources.avif)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_80.sources.avif},
-                {$urls.no_picture_image.bySize.default_160.sources.avif} 2x"
+                {$urls.no_picture_image.bySize.square_xs.sources.avif},
+                {$urls.no_picture_image.bySize.square_s.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($urls.no_picture_image.bySize.default_80.sources.webp)}
+          {if isset($urls.no_picture_image.bySize.square_xs.sources.webp)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.default_80.sources.webp},
-                {$urls.no_picture_image.bySize.default_160.sources.webp} 2x"
+                {$urls.no_picture_image.bySize.square_xs.sources.webp},
+                {$urls.no_picture_image.bySize.square_s.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -59,10 +59,10 @@
           <img
             class="img-fluid"
             srcset="
-              {$urls.no_picture_image.bySize.default_80.url},
-              {$urls.no_picture_image.bySize.default_160.url} 2x"
-            width="{$urls.no_picture_image.bySize.default_80.width}"
-            height="{$urls.no_picture_image.bySize.default_80.height}"
+              {$urls.no_picture_image.bySize.square_xs.url},
+              {$urls.no_picture_image.bySize.square_s.url} 2x"
+            width="{$urls.no_picture_image.bySize.square_xs.width}"
+            height="{$urls.no_picture_image.bySize.square_xs.height}"
             loading="lazy"
           >
         </picture>
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index b905e5663..b823f2ffa 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -17,20 +17,20 @@
             <div class="row">
               <div class="col-xl-6 store__picture">
                 <picture>
-                  {if isset($store.image.bySize.default_200.sources.avif)}
+                  {if isset($store.image.bySize.square_sm.sources.avif)}
                     <source 
                       srcset="
-                        {$store.image.bySize.default_200.sources.avif},
-                        {$store.image.bySize.default_400.sources.avif} 2x"
+                        {$store.image.bySize.square_sm.sources.avif},
+                        {$store.image.bySize.square_xl.sources.avif} 2x"
                       type="image/avif"
                     >
                   {/if}
 
-                  {if isset($store.image.bySize.default_200.sources.webp)}
+                  {if isset($store.image.bySize.square_sm.sources.webp)}
                     <source 
                       srcset="
-                        {$store.image.bySize.default_200.sources.webp},
-                        {$store.image.bySize.default_400.sources.webp} 2x"
+                        {$store.image.bySize.square_sm.sources.webp},
+                        {$store.image.bySize.square_xl.sources.webp} 2x"
                       type="image/webp"
                     >
                   {/if}
@@ -38,11 +38,11 @@
                   <img
                     class="img-fluid rounded"
                     srcset="
-                      {$store.image.bySize.default_200.url},
-                      {$store.image.bySize.default_400.url} 2x"
+                      {$store.image.bySize.square_sm.url},
+                      {$store.image.bySize.square_xl.url} 2x"
                     loading="lazy"
-                    width="{$store.image.bySize.default_200.width}"
-                    height="{$store.image.bySize.default_200.height}"
+                    width="{$store.image.bySize.square_sm.width}"
+                    height="{$store.image.bySize.square_sm.height}"
                     {if !empty($store.image.legend)}
                       alt="{$store.image.legend}"
                       title="{$store.image.legend}"

From f27be95edf756aa602901ea9ec32bb9f39538748 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 2 Nov 2022 14:04:25 +0100
Subject: [PATCH 10/16] Name to more generic

---
 config/theme.yml                              | 10 ++--
 .../catalog/_partials/miniatures/product.tpl  | 56 +++++++++----------
 .../_partials/product-cover-thumbnails.tpl    | 46 +++++++--------
 .../_partials/cart-detailed-product-line.tpl  | 40 ++++++-------
 .../_partials/cart-summary-product-line.tpl   | 40 ++++++-------
 templates/cms/stores.tpl                      | 20 +++----
 6 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/config/theme.yml b/config/theme.yml
index def7d742d..29918670e 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -135,23 +135,23 @@ global_settings:
       width: 170
       height: 115
       scope: [stores]
-    square_xs:
+    default_xs:
       width: 120
       height: 120
       scope: [products, manufacturers, suppliers, categories]
-    square_s:
+    default_s:
       width: 160
       height: 160
       scope: [categories, products]
-    square_sm:
+    default_m:
       width: 200
       height: 200
       scope: [stores, manufacturers, suppliers, products]
-    square_md:
+    default_md:
       width: 320
       height: 320
       scope: [categories, products]
-    square_xl:
+    default_xl:
       width: 400
       height: 400
       scope: [stores, products]
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index b879efa7d..113a0519c 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -14,24 +14,24 @@
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
               <picture>
-                {if isset($product.cover.bySize.square_md.sources.avif)}
+                {if isset($product.cover.bySize.default_md.sources.avif)}
                   <source 
                     srcset="
-                      {$product.cover.bySize.square_xs.sources.avif} 120w,
-                      {$product.cover.bySize.square_sm.sources.avif} 200w,
-                      {$product.cover.bySize.square_md.sources.avif} 320w,
+                      {$product.cover.bySize.default_xs.sources.avif} 120w,
+                      {$product.cover.bySize.default_m.sources.avif} 200w,
+                      {$product.cover.bySize.default_md.sources.avif} 320w,
                       {$product.cover.bySize.product_main.sources.avif} 720w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                     type="image/avif"
                   >
                 {/if}
 
-                {if isset($product.cover.bySize.square_md.sources.webp)}
+                {if isset($product.cover.bySize.default_md.sources.webp)}
                   <source 
                     srcset="
-                      {$product.cover.bySize.square_xs.sources.webp} 120w,
-                      {$product.cover.bySize.square_sm.sources.webp} 200w,
-                      {$product.cover.bySize.square_md.sources.webp} 320w,
+                      {$product.cover.bySize.default_xs.sources.webp} 120w,
+                      {$product.cover.bySize.default_m.sources.webp} 200w,
+                      {$product.cover.bySize.default_md.sources.webp} 320w,
                       {$product.cover.bySize.product_main.sources.webp} 720w"
                     sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                     type="image/webp"
@@ -41,14 +41,14 @@
                 <img
                   class="{$componentName}__image card-img-top"
                   srcset="
-                    {$product.cover.bySize.square_xs.url} 120w,
-                    {$product.cover.bySize.square_sm.url} 200w,
-                    {$product.cover.bySize.square_md.url} 320w,
+                    {$product.cover.bySize.default_xs.url} 120w,
+                    {$product.cover.bySize.default_m.url} 200w,
+                    {$product.cover.bySize.default_md.url} 320w,
                     {$product.cover.bySize.product_main.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  src="{$product.cover.bySize.square_md.sources.jpg}" 
-                  width="{$product.cover.bySize.square_md.width}"
-                  height="{$product.cover.bySize.square_md.height}"
+                  src="{$product.cover.bySize.default_md.sources.jpg}" 
+                  width="{$product.cover.bySize.default_md.width}"
+                  height="{$product.cover.bySize.default_md.height}"
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
@@ -57,24 +57,24 @@
               </picture>
             {else}
               <picture>
-                {if isset($urls.no_picture_image.bySize.square_md.sources.avif)}
+                {if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
                   <source 
                     srcset="
-                      {$urls.no_picture_image.bySize.square_xs.sources.avif} 120w,
-                      {$urls.no_picture_image.bySize.square_sm.sources.avif} 200w,
-                      {$urls.no_picture_image.bySize.square_md.sources.avif} 320w,
+                      {$urls.no_picture_image.bySize.default_xs.sources.avif} 120w,
+                      {$urls.no_picture_image.bySize.default_m.sources.avif} 200w,
+                      {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
                       {$urls.no_picture_image.bySize.product_main.sources.avif} 720w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
                     type="image/avif"
                   >
                 {/if}
 
-                {if isset($urls.no_picture_image.bySize.square_md.sources.webp)}
+                {if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
                   <source 
                     srcset="
-                      {$urls.no_picture_image.bySize.square_xs.sources.webp} 120w,
-                      {$urls.no_picture_image.bySize.square_sm.sources.webp} 200w,
-                      {$urls.no_picture_image.bySize.square_md.sources.webp} 320w,
+                      {$urls.no_picture_image.bySize.default_xs.sources.webp} 120w,
+                      {$urls.no_picture_image.bySize.default_m.sources.webp} 200w,
+                      {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
                       {$urls.no_picture_image.bySize.product_main.sources.webp} 720w"
                     sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                     type="image/webp"
@@ -84,14 +84,14 @@
                 <img
                   class="{$componentName}__image card-img-top"
                   srcset="
-                    {$urls.no_picture_image.bySize.square_xs.url} 120w,
-                    {$urls.no_picture_image.bySize.square_sm.url} 200w,
-                    {$urls.no_picture_image.bySize.square_md.url} 320w,
+                    {$urls.no_picture_image.bySize.default_xs.url} 120w,
+                    {$urls.no_picture_image.bySize.default_m.url} 200w,
+                    {$urls.no_picture_image.bySize.default_md.url} 320w,
                     {$urls.no_picture_image.bySize.product_main.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  width="{$urls.no_picture_image.bySize.square_md.width}"
-                  height="{$urls.no_picture_image.bySize.square_md.height}"
-                  src="{$urls.no_picture_image.bySize.square_md.sources.jpg}" 
+                  width="{$urls.no_picture_image.bySize.default_md.width}"
+                  height="{$urls.no_picture_image.bySize.default_md.height}"
+                  src="{$urls.no_picture_image.bySize.default_md.sources.jpg}" 
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 1d4a30232..814726891 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -26,10 +26,10 @@
           {foreach from=$product.images item=image key=key}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
               <picture>
-                {if isset($image.bySize.square_md.sources.avif)}
+                {if isset($image.bySize.default_md.sources.avif)}
                   <source 
                     srcset="
-                      {$image.bySize.square_md.sources.avif} 320w,
+                      {$image.bySize.default_md.sources.avif} 320w,
                       {$image.bySize.product_main.sources.avif} 720w,
                       {$image.bySize.product_main_2x.sources.avif} 1440w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
@@ -37,10 +37,10 @@
                   >
                 {/if}
 
-                {if isset($image.bySize.square_md.sources.webp)}
+                {if isset($image.bySize.default_md.sources.webp)}
                   <source 
                     srcset="
-                      {$image.bySize.square_md.sources.webp} 320w,
+                      {$image.bySize.default_md.sources.webp} 320w,
                       {$image.bySize.product_main.sources.webp} 720w,
                       {$image.bySize.product_main_2x.sources.webp} 1440w"
                     sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
@@ -51,7 +51,7 @@
                 <img
                   class="img-fluid"
                   srcset="
-                    {$image.bySize.square_md.url} 320w,
+                    {$image.bySize.default_md.url} 320w,
                     {$image.bySize.product_main.url} 720w,
                     {$image.bySize.product_main_2x.url} 1440w"
                   sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
@@ -83,20 +83,20 @@
               aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
           >
               <picture>
-                {if isset($image.bySize.square_xs.sources.avif)}
+                {if isset($image.bySize.default_xs.sources.avif)}
                   <source 
                     srcset="
-                      {$image.bySize.square_xs.sources.avif},
-                      {$image.bySize.square_sm.sources.avif} 2x",
+                      {$image.bySize.default_xs.sources.avif},
+                      {$image.bySize.default_m.sources.avif} 2x",
                   type="image/avif"
                   >
                 {/if}
 
-                {if isset($image.bySize.square_xs.sources.webp)}
+                {if isset($image.bySize.default_xs.sources.webp)}
                   <source 
                     srcset="
-                      {$image.bySize.square_xs.sources.webp},
-                      {$image.bySize.square_sm.sources.webp} 2x"
+                      {$image.bySize.default_xs.sources.webp},
+                      {$image.bySize.default_m.sources.webp} 2x"
                     type="image/webp"
                   >
                 {/if}
@@ -104,10 +104,10 @@
                 <img
                   class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
                   srcset="
-                    {$image.bySize.square_xs.url},
-                    {$image.bySize.square_sm.url} 2x"
-                  width="{$image.bySize.square_xs.width}"
-                  height="{$image.bySize.square_xs.height}"
+                    {$image.bySize.default_xs.url},
+                    {$image.bySize.default_m.url} 2x"
+                  width="{$image.bySize.default_xs.width}"
+                  height="{$image.bySize.default_xs.height}"
                   loading="lazy"
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
@@ -122,10 +122,10 @@
     {hook h='displayAfterProductThumbs' product=$product}
   {else}
     <picture>
-      {if isset($urls.no_picture_image.bySize.square_md.sources.avif)}
+      {if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
         <source 
           srcset="
-            {$urls.no_picture_image.bySize.square_md.sources.avif} 320w,
+            {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
             {$urls.no_picture_image.bySize.product_main.sources.avif} 720w,
             {$urls.no_picture_image.bySize.product_main_2x.sources.avif} 1440w"
           sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
@@ -133,10 +133,10 @@
         >
       {/if}
 
-      {if isset($urls.no_picture_image.bySize.square_md.sources.webp)}
+      {if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
         <source 
           srcset="
-            {$urls.no_picture_image.bySize.square_md.sources.webp} 320w,
+            {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
             {$urls.no_picture_image.bySize.product_main.sources.webp} 720w,
             {$urls.no_picture_image.bySize.product_main_2x.sources.webp} 1440w"
           sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
@@ -147,13 +147,13 @@
       <img
         class="img-fluid"
         srcset="
-          {$urls.no_picture_image.bySize.square_md.url} 320w,
+          {$urls.no_picture_image.bySize.default_md.url} 320w,
           {$urls.no_picture_image.bySize.product_main.url} 720w,
           {$urls.no_picture_image.bySize.product_main_2x.url} 1440w"
         sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
-        width="{$urls.no_picture_image.bySize.square_xs.width}"
-        height="{$urls.no_picture_image.bySize.square_xs.height}"
-        src="{$urls.no_picture_image.bySize.square_md.sources.jpg}" 
+        width="{$urls.no_picture_image.bySize.default_xs.width}"
+        height="{$urls.no_picture_image.bySize.default_xs.height}"
+        src="{$urls.no_picture_image.bySize.default_md.sources.jpg}" 
         loading="lazy"
         alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
         title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 04ff5e104..62a23b8d0 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -11,20 +11,20 @@
       data-id_customization="{$product.id_customization|intval}">
       {if $product.default_image}
         <picture>
-          {if isset($product.default_image.bySize.square_xs.sources.avif)}
+          {if isset($product.default_image.bySize.default_xs.sources.avif)}
             <source 
               srcset="
-                {$product.default_image.bySize.square_xs.sources.avif},
-                {$product.default_image.bySize.square_sm.sources.avif} 2x"
+                {$product.default_image.bySize.default_xs.sources.avif},
+                {$product.default_image.bySize.default_m.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($product.default_image.bySize.square_xs.sources.webp)}
+          {if isset($product.default_image.bySize.default_xs.sources.webp)}
             <source 
               srcset="
-                {$product.default_image.bySize.square_xs.sources.webp},
-                {$product.default_image.bySize.square_sm.sources.webp} 2x"
+                {$product.default_image.bySize.default_xs.sources.webp},
+                {$product.default_image.bySize.default_m.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -32,30 +32,30 @@
           <img
             class="img-fluid"
             srcset="
-              {$product.default_image.bySize.square_xs.url},
-              {$product.default_image.bySize.square_sm.url} 2x"
-            width="{$product.default_image.bySize.square_xs.width}"
-            height="{$product.default_image.bySize.square_xs.height}"
+              {$product.default_image.bySize.default_xs.url},
+              {$product.default_image.bySize.default_m.url} 2x"
+            width="{$product.default_image.bySize.default_xs.width}"
+            height="{$product.default_image.bySize.default_xs.height}"
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
             title="{$product.name|escape:'quotes'}"
         </picture>
       {else}
         <picture>
-          {if isset($urls.no_picture_image.bySize.square_xs.sources.avif)}
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.square_xs.sources.avif},
-                {$urls.no_picture_image.bySize.square_sm.sources.avif} 2x"
+                {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($urls.no_picture_image.bySize.square_xs.sources.webp)}
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.square_xs.sources.webp},
-                {$urls.no_picture_image.bySize.square_sm.sources.webp} 2x"
+                {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -63,10 +63,10 @@
           <img
             class="img-fluid"
             srcset="
-              {$urls.no_picture_image.bySize.square_xs.url},
-              {$urls.no_picture_image.bySize.square_sm.url} 2x"
-            width="{$urls.no_picture_image.bySize.square_xs.width}"
-            height="{$urls.no_picture_image.bySize.square_xs.height}"
+              {$urls.no_picture_image.bySize.default_xs.url},
+              {$urls.no_picture_image.bySize.default_m.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_xs.width}"
+            height="{$urls.no_picture_image.bySize.default_xs.height}"
             loading="lazy"
           >
         </picture>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 8a378fa6d..ba57063e1 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -7,20 +7,20 @@
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
         <picture>
-          {if isset($product.default_image.bySize.square_xs.sources.avif)}
+          {if isset($product.default_image.bySize.default_xs.sources.avif)}
             <source 
               srcset="
-                {$product.default_image.bySize.square_xs.sources.avif},
-                {$product.default_image.bySize.square_s.sources.avif} 2x"
+                {$product.default_image.bySize.default_xs.sources.avif},
+                {$product.default_image.bySize.default_s.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($product.default_image.bySize.square_xs.sources.webp)}
+          {if isset($product.default_image.bySize.default_xs.sources.webp)}
             <source 
               srcset="
-                {$product.default_image.bySize.square_xs.sources.webp},
-                {$product.default_image.bySize.square_s.sources.webp} 2x"
+                {$product.default_image.bySize.default_xs.sources.webp},
+                {$product.default_image.bySize.default_s.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -28,30 +28,30 @@
           <img
             class="img-fluid rounded"
             srcset="
-              {$product.default_image.bySize.square_xs.url},
-              {$product.default_image.bySize.square_s.url} 2x"
-            width="{$product.default_image.bySize.square_xs.width}"
-            height="{$product.default_image.bySize.square_xs.height}"
+              {$product.default_image.bySize.default_xs.url},
+              {$product.default_image.bySize.default_s.url} 2x"
+            width="{$product.default_image.bySize.default_xs.width}"
+            height="{$product.default_image.bySize.default_xs.height}"
             loading="lazy"
             alt="{$product.name}"
             title="{$product.name}"
         </picture>
       {else}
         <picture>
-          {if isset($urls.no_picture_image.bySize.square_xs.sources.avif)}
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.square_xs.sources.avif},
-                {$urls.no_picture_image.bySize.square_s.sources.avif} 2x"
+                {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                {$urls.no_picture_image.bySize.default_s.sources.avif} 2x"
               type="image/avif"
             >
           {/if}
 
-          {if isset($urls.no_picture_image.bySize.square_xs.sources.webp)}
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
             <source 
               srcset="
-                {$urls.no_picture_image.bySize.square_xs.sources.webp},
-                {$urls.no_picture_image.bySize.square_s.sources.webp} 2x"
+                {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                {$urls.no_picture_image.bySize.default_s.sources.webp} 2x"
               type="image/webp"
             >
           {/if}
@@ -59,10 +59,10 @@
           <img
             class="img-fluid"
             srcset="
-              {$urls.no_picture_image.bySize.square_xs.url},
-              {$urls.no_picture_image.bySize.square_s.url} 2x"
-            width="{$urls.no_picture_image.bySize.square_xs.width}"
-            height="{$urls.no_picture_image.bySize.square_xs.height}"
+              {$urls.no_picture_image.bySize.default_xs.url},
+              {$urls.no_picture_image.bySize.default_s.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_xs.width}"
+            height="{$urls.no_picture_image.bySize.default_xs.height}"
             loading="lazy"
           >
         </picture>
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index b823f2ffa..7c4796ff1 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -17,20 +17,20 @@
             <div class="row">
               <div class="col-xl-6 store__picture">
                 <picture>
-                  {if isset($store.image.bySize.square_sm.sources.avif)}
+                  {if isset($store.image.bySize.default_m.sources.avif)}
                     <source 
                       srcset="
-                        {$store.image.bySize.square_sm.sources.avif},
-                        {$store.image.bySize.square_xl.sources.avif} 2x"
+                        {$store.image.bySize.default_m.sources.avif},
+                        {$store.image.bySize.default_xl.sources.avif} 2x"
                       type="image/avif"
                     >
                   {/if}
 
-                  {if isset($store.image.bySize.square_sm.sources.webp)}
+                  {if isset($store.image.bySize.default_m.sources.webp)}
                     <source 
                       srcset="
-                        {$store.image.bySize.square_sm.sources.webp},
-                        {$store.image.bySize.square_xl.sources.webp} 2x"
+                        {$store.image.bySize.default_m.sources.webp},
+                        {$store.image.bySize.default_xl.sources.webp} 2x"
                       type="image/webp"
                     >
                   {/if}
@@ -38,11 +38,11 @@
                   <img
                     class="img-fluid rounded"
                     srcset="
-                      {$store.image.bySize.square_sm.url},
-                      {$store.image.bySize.square_xl.url} 2x"
+                      {$store.image.bySize.default_m.url},
+                      {$store.image.bySize.default_xl.url} 2x"
                     loading="lazy"
-                    width="{$store.image.bySize.square_sm.width}"
-                    height="{$store.image.bySize.square_sm.height}"
+                    width="{$store.image.bySize.default_m.width}"
+                    height="{$store.image.bySize.default_m.height}"
                     {if !empty($store.image.legend)}
                       alt="{$store.image.legend}"
                       title="{$store.image.legend}"

From df9a70237964fc36125eb2f9bc3ceae6b9f30279 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 2 Nov 2022 15:26:48 +0100
Subject: [PATCH 11/16] Fix missing end tag

---
 templates/catalog/_partials/product-cover-thumbnails.tpl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 814726891..73ddec585 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -62,6 +62,7 @@
                   alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
                   title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
                   data-full-size-image-url="{$image.bySize.home_default.url}"
+                >
               </picture>
             </div>
           {/foreach}

From b8d1aea3888db7dd4de5d03c08758148b3a0c9b2 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 2 Nov 2022 15:35:13 +0100
Subject: [PATCH 12/16] Fix missing end tag

---
 templates/checkout/_partials/cart-detailed-product-line.tpl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 62a23b8d0..dc79a298e 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -39,6 +39,7 @@
             loading="lazy"
             alt="{$product.name|escape:'quotes'}"
             title="{$product.name|escape:'quotes'}"
+          >
         </picture>
       {else}
         <picture>

From 27ddb1f24ab7fe1c7b65b2e66393928eee6dc08f Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 2 Nov 2022 15:37:17 +0100
Subject: [PATCH 13/16] Fix missing end tag

---
 templates/checkout/_partials/cart-summary-product-line.tpl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index ba57063e1..40ba64089 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -35,6 +35,7 @@
             loading="lazy"
             alt="{$product.name}"
             title="{$product.name}"
+          >
         </picture>
       {else}
         <picture>

From c410d856a30654e505d3a860bb7960d025204b8e Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Wed, 2 Nov 2022 15:54:58 +0100
Subject: [PATCH 14/16] Fix fallbacks urls

---
 templates/catalog/_partials/miniatures/product.tpl       | 4 ++--
 templates/catalog/_partials/product-cover-thumbnails.tpl | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 113a0519c..6c0e958ad 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -46,7 +46,7 @@
                     {$product.cover.bySize.default_md.url} 320w,
                     {$product.cover.bySize.product_main.url} 720w"
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
-                  src="{$product.cover.bySize.default_md.sources.jpg}" 
+                  src="{$product.cover.bySize.default_md.url}" 
                   width="{$product.cover.bySize.default_md.width}"
                   height="{$product.cover.bySize.default_md.height}"
                   loading="lazy"
@@ -91,7 +91,7 @@
                   sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
                   width="{$urls.no_picture_image.bySize.default_md.width}"
                   height="{$urls.no_picture_image.bySize.default_md.height}"
-                  src="{$urls.no_picture_image.bySize.default_md.sources.jpg}" 
+                  src="{$urls.no_picture_image.bySize.default_md.url}" 
                   loading="lazy"
                   alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
                   title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 73ddec585..40c991050 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -55,7 +55,7 @@
                     {$image.bySize.product_main.url} 720w,
                     {$image.bySize.product_main_2x.url} 1440w"
                   sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
-                  src="{$image.bySize.product_main.sources.jpg}" 
+                  src="{$image.bySize.product_main.url}" 
                   width="{$image.bySize.product_main.width}"
                   height="{$image.bySize.product_main.height}"
                   loading="eager"
@@ -154,7 +154,7 @@
         sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
         width="{$urls.no_picture_image.bySize.default_xs.width}"
         height="{$urls.no_picture_image.bySize.default_xs.height}"
-        src="{$urls.no_picture_image.bySize.default_md.sources.jpg}" 
+        src="{$urls.no_picture_image.bySize.default_md.url}" 
         loading="lazy"
         alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
         title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"

From 346b81d2fdfd240cd5c35f1adc66e242fe75ee48 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Thu, 3 Nov 2022 15:14:47 +0100
Subject: [PATCH 15/16] Review feedbacks

---
 .../catalog/_partials/miniatures/product.tpl     | 16 ++++++++--------
 .../_partials/product-cover-thumbnails.tpl       | 12 ++++++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 6c0e958ad..fc2614da5 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -21,7 +21,7 @@
                       {$product.cover.bySize.default_m.sources.avif} 200w,
                       {$product.cover.bySize.default_md.sources.avif} 320w,
                       {$product.cover.bySize.product_main.sources.avif} 720w"
-                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw" 
                     type="image/avif"
                   >
                 {/if}
@@ -33,7 +33,7 @@
                       {$product.cover.bySize.default_m.sources.webp} 200w,
                       {$product.cover.bySize.default_md.sources.webp} 320w,
                       {$product.cover.bySize.product_main.sources.webp} 720w"
-                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
                     type="image/webp"
                   >
                 {/if}
@@ -45,7 +45,7 @@
                     {$product.cover.bySize.default_m.url} 200w,
                     {$product.cover.bySize.default_md.url} 320w,
                     {$product.cover.bySize.product_main.url} 720w"
-                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
                   src="{$product.cover.bySize.default_md.url}" 
                   width="{$product.cover.bySize.default_md.width}"
                   height="{$product.cover.bySize.default_md.height}"
@@ -64,7 +64,7 @@
                       {$urls.no_picture_image.bySize.default_m.sources.avif} 200w,
                       {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
                       {$urls.no_picture_image.bySize.product_main.sources.avif} 720w"
-                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw" 
                     type="image/avif"
                   >
                 {/if}
@@ -76,7 +76,7 @@
                       {$urls.no_picture_image.bySize.default_m.sources.webp} 200w,
                       {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
                       {$urls.no_picture_image.bySize.product_main.sources.webp} 720w"
-                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
                     type="image/webp"
                   >
                 {/if}
@@ -88,13 +88,13 @@
                     {$urls.no_picture_image.bySize.default_m.url} 200w,
                     {$urls.no_picture_image.bySize.default_md.url} 320w,
                     {$urls.no_picture_image.bySize.product_main.url} 720w"
-                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 100vw" 
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
                   width="{$urls.no_picture_image.bySize.default_md.width}"
                   height="{$urls.no_picture_image.bySize.default_md.height}"
                   src="{$urls.no_picture_image.bySize.default_md.url}" 
                   loading="lazy"
-                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
-                  title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+                  alt="{l s='No image available' d='Shop.Theme.Catalog'}"
+                  title="{l s='No image available' d='Shop.Theme.Catalog'}"
                   data-full-size-image-url="{$product.cover.bySize.home_default.url}"
                 >
               </picture>
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 40c991050..0fdd9904f 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -23,7 +23,7 @@
         {/if}
 
         {block name='product_cover'}
-          {foreach from=$product.images item=image key=key}
+          {foreach from=$product.images item=image key=key name=productImages}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
               <picture>
                 {if isset($image.bySize.default_md.sources.avif)}
@@ -58,9 +58,9 @@
                   src="{$image.bySize.product_main.url}" 
                   width="{$image.bySize.product_main.width}"
                   height="{$image.bySize.product_main.height}"
-                  loading="eager"
-                  alt="{if !empty($image)}{$image.legend}{else}{$product.name}{/if}"
-                  title="{if !empty($image.legend)}{$image.legend}{else}{$product.name}{/if}"
+                  loading="{if $smarty.foreach.productImages.first}eager{else}lazy{/if}"
+                  alt="{$image.legend}"
+                  title="{$image.legend}"
                   data-full-size-image-url="{$image.bySize.home_default.url}"
                 >
               </picture>
@@ -156,8 +156,8 @@
         height="{$urls.no_picture_image.bySize.default_xs.height}"
         src="{$urls.no_picture_image.bySize.default_md.url}" 
         loading="lazy"
-        alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
-        title="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
+        alt="{l s='No image available' d='Shop.Theme.Catalog'}"
+        title="{l s='No image available' d='Shop.Theme.Catalog'}"
         data-full-size-image-url="{$product.cover.bySize.home_default.url}"
       >
     </picture>

From 8e06c6bda135501ac50cd6d8d78188663e606714 Mon Sep 17 00:00:00 2001
From: NeOMakinG <valentin.szczupak@prestashop.com>
Date: Fri, 4 Nov 2022 09:50:23 +0100
Subject: [PATCH 16/16] fix sizes mistake

---
 templates/catalog/_partials/product-cover-thumbnails.tpl | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 0fdd9904f..f459644a5 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -152,13 +152,12 @@
           {$urls.no_picture_image.bySize.product_main.url} 720w,
           {$urls.no_picture_image.bySize.product_main_2x.url} 1440w"
         sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
-        width="{$urls.no_picture_image.bySize.default_xs.width}"
-        height="{$urls.no_picture_image.bySize.default_xs.height}"
+        width="{$urls.no_picture_image.bySize.product_main.width}"
+        height="{$urls.no_picture_image.bySize.product_main.height}"
         src="{$urls.no_picture_image.bySize.default_md.url}" 
         loading="lazy"
         alt="{l s='No image available' d='Shop.Theme.Catalog'}"
         title="{l s='No image available' d='Shop.Theme.Catalog'}"
-        data-full-size-image-url="{$product.cover.bySize.home_default.url}"
       >
     </picture>
   {/if}