Implement picture tags

PrestaShop · Feb 3, 2023 · 2e7e823 · 2e7e823
1 parent cfba333
commit 2e7e823
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 117 deletions.
diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
@@ -32,7 +32,11 @@
                 {/if}
                 {if !empty($category.image.large.url)}
                     <div class="category-cover">
-                        <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="141" height="180">
+                        <picture>
+                            {if !empty($category.image.large.sources.avif)}<source srcset="{$category.image.large.sources.avif}" type="image/avif">{/if}
+                            {if !empty($category.image.large.sources.webp)}<source srcset="{$category.image.large.sources.webp}" type="image/webp">{/if}
+                            <img src="{$category.image.large.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy" width="141" height="180">
+                        </picture>
                     </div>
                 {/if}
             </div>

diff --git a/templates/catalog/_partials/miniatures/category.tpl b/templates/catalog/_partials/miniatures/category.tpl
@@ -25,13 +25,17 @@
 {block name='category_miniature_item'}
   <section class="category-miniature">
     <a href="{$category.url}">
-      <img
-        src="{$category.image.medium.url}"
-        alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}"
-        loading="lazy"
-        width="250"
-        height="250"
-      >
+      <picture>
+        {if !empty($category.image.medium.sources.avif)}<source srcset="{$category.image.medium.sources.avif}" type="image/avif">{/if}
+        {if !empty($category.image.medium.sources.webp)}<source srcset="{$category.image.medium.sources.webp}" type="image/webp">{/if}
+        <img
+          src="{$category.image.medium.url}"
+          alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}"
+          loading="lazy"
+          width="250"
+          height="250"
+        >
+      </picture>
     </a>
 
     <h1 class="h2">

diff --git a/templates/catalog/_partials/miniatures/pack-product.tpl b/templates/catalog/_partials/miniatures/pack-product.tpl
@@ -30,19 +30,27 @@
           <div class="mask">
             <a href="{$product.url}" title="{$product.name}">
               {if !empty($product.default_image.medium)}
-                <img
-                        src="{$product.default_image.medium.url}"
-                        {if !empty($product.default_image.legend)}
-                          alt="{$product.default_image.legend}"
-                          title="{$product.default_image.legend}"
-                        {else}
-                          alt="{$product.name}"
-                        {/if}
-                        loading="lazy"
-                        data-full-size-image-url="{$product.default_image.large.url}"
-                >
+                <picture>
+                  {if !empty($product.default_image.medium.sources.avif)}<source srcset="{$product.default_image.medium.sources.avif}" type="image/avif">{/if}
+                  {if !empty($product.default_image.medium.sources.webp)}<source srcset="{$product.default_image.medium.sources.webp}" type="image/webp">{/if}
+                  <img
+                          src="{$product.default_image.medium.url}"
+                          {if !empty($product.default_image.legend)}
+                            alt="{$product.default_image.legend}"
+                            title="{$product.default_image.legend}"
+                          {else}
+                            alt="{$product.name}"
+                          {/if}
+                          loading="lazy"
+                          data-full-size-image-url="{$product.default_image.large.url}"
+                  >
+                </picture>
               {else}
-                <img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" />
+                <picture>
+                  {if !empty($urls.no_picture_image.bySize.medium_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.medium_default.sources.avif}" type="image/avif">{/if}
+                  {if !empty($urls.no_picture_image.bySize.medium_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.medium_default.sources.webp}" type="image/webp">{/if}
+                  <img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" />
+                </picture>
               {/if}
             </a>
           </div>

diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
@@ -30,23 +30,31 @@
         {block name='product_thumbnail'}
           {if $product.cover}
             <a href="{$product.url}" class="thumbnail product-thumbnail">
-              <img
-                src="{$product.cover.bySize.home_default.url}"
-                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
-                loading="lazy"
-                data-full-size-image-url="{$product.cover.large.url}"
-                width="{$product.cover.bySize.home_default.width}"
-                height="{$product.cover.bySize.home_default.height}"
-              />
+              <picture>
+                {if !empty($product.cover.bySize.home_default.sources.avif)}<source srcset="{$product.cover.bySize.home_default.sources.avif}" type="image/avif">{/if}
+                {if !empty($product.cover.bySize.home_default.sources.webp)}<source srcset="{$product.cover.bySize.home_default.sources.webp}" type="image/webp">{/if}
+                <img
+                  src="{$product.cover.bySize.home_default.url}"
+                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
+                  loading="lazy"
+                  data-full-size-image-url="{$product.cover.large.url}"
+                  width="{$product.cover.bySize.home_default.width}"
+                  height="{$product.cover.bySize.home_default.height}"
+                />
+              </picture>
             </a>
           {else}
             <a href="{$product.url}" class="thumbnail product-thumbnail">
-              <img
-                src="{$urls.no_picture_image.bySize.home_default.url}"
-                loading="lazy"
-                width="{$urls.no_picture_image.bySize.home_default.width}"
-                height="{$urls.no_picture_image.bySize.home_default.height}"
-              />
+              <picture>
+                {if !empty($urls.no_picture_image.bySize.home_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.avif}" type="image/avif">{/if}
+                {if !empty($urls.no_picture_image.bySize.home_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.home_default.sources.webp}" type="image/webp">{/if}
+                <img
+                  src="{$urls.no_picture_image.bySize.home_default.url}"
+                  loading="lazy"
+                  width="{$urls.no_picture_image.bySize.home_default.width}"
+                  height="{$urls.no_picture_image.bySize.home_default.height}"
+                />
+              </picture>
             </a>
           {/if}
         {/block}

diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -26,30 +26,38 @@
   {block name='product_cover'}
     <div class="product-cover">
       {if $product.default_image}
-        <img
-          class="js-qv-product-cover img-fluid"
-          src="{$product.default_image.bySize.large_default.url}"
-          {if !empty($product.default_image.legend)}
-            alt="{$product.default_image.legend}"
-            title="{$product.default_image.legend}"
-          {else}
-            alt="{$product.name}"
-          {/if}
-          loading="lazy"
-          width="{$product.default_image.bySize.large_default.width}"
-          height="{$product.default_image.bySize.large_default.height}"
-        >
+        <picture>
+          {if !empty($product.default_image.bySize.large_default.sources.avif)}<source srcset="{$product.default_image.bySize.large_default.sources.avif}" type="image/avif">{/if}
+          {if !empty($product.default_image.bySize.large_default.sources.webp)}<source srcset="{$product.default_image.bySize.large_default.sources.webp}" type="image/webp">{/if}
+          <img
+            class="js-qv-product-cover img-fluid"
+            src="{$product.default_image.bySize.large_default.url}"
+            {if !empty($product.default_image.legend)}
+              alt="{$product.default_image.legend}"
+              title="{$product.default_image.legend}"
+            {else}
+              alt="{$product.name}"
+            {/if}
+            loading="lazy"
+            width="{$product.default_image.bySize.large_default.width}"
+            height="{$product.default_image.bySize.large_default.height}"
+          >
+        </picture>
         <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
           <i class="material-icons zoom-in">search</i>
         </div>
       {else}
-        <img
-          class="img-fluid"
-          src="{$urls.no_picture_image.bySize.medium_default.url}"
-          loading="lazy"
-          width="{$urls.no_picture_image.bySize.medium_default.width}"
-          height="{$urls.no_picture_image.bySize.medium_default.height}"
-        >
+        <picture>
+          {if !empty($urls.no_picture_image.bySize.large_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.large_default.sources.avif}" type="image/avif">{/if}
+          {if !empty($urls.no_picture_image.bySize.large_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.large_default.sources.webp}" type="image/webp">{/if}
+          <img
+            class="img-fluid"
+            src="{$urls.no_picture_image.bySize.large_default.url}"
+            loading="lazy"
+            width="{$urls.no_picture_image.bySize.large_default.width}"
+            height="{$urls.no_picture_image.bySize.large_default.height}"
+          >
+        </picture>
       {/if}
     </div>
   {/block}
@@ -59,21 +67,25 @@
       <ul class="product-images js-qv-product-images">
         {foreach from=$product.images item=image}
           <li class="thumb-container js-thumb-container">
-            <img
-              class="thumb js-thumb {if $image.id_image == $product.default_image.id_image} selected 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.small_default.url}"
-              {if !empty($image.legend)}
-                alt="{$image.legend}"
-                title="{$image.legend}"
-              {else}
-                alt="{$product.name}"
-              {/if}
-              loading="lazy"
-              width="{$product.default_image.bySize.small_default.width}"
-              height="{$product.default_image.bySize.small_default.height}"
-            >
+            <picture>
+              {if !empty($image.bySize.small_default.sources.avif)}<source srcset="{$image.bySize.small_default.sources.avif}" type="image/avif">{/if}
+              {if !empty($image.bySize.small_default.sources.webp)}<source srcset="{$image.bySize.small_default.sources.webp}" type="image/webp">{/if}
+              <img
+                class="thumb js-thumb {if $image.id_image == $product.default_image.id_image} selected 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.small_default.url}"
+                {if !empty($image.legend)}
+                  alt="{$image.legend}"
+                  title="{$image.legend}"
+                {else}
+                  alt="{$product.name}"
+                {/if}
+                loading="lazy"
+                width="{$product.default_image.bySize.small_default.width}"
+                height="{$product.default_image.bySize.small_default.height}"
+              >
+            </picture>
           </li>
         {/foreach}
       </ul>

diff --git a/templates/catalog/_partials/product-images-modal.tpl b/templates/catalog/_partials/product-images-modal.tpl
@@ -29,20 +29,28 @@
         {assign var=imagesCount value=$product.images|count}
         <figure>
           {if $product.default_image}
-            <img
-              class="js-modal-product-cover product-cover-modal"
-              width="{$product.default_image.bySize.large_default.width}"
-              src="{$product.default_image.bySize.large_default.url}"
-              {if !empty($product.default_image.legend)}
-                alt="{$product.default_image.legend}"
-                title="{$product.default_image.legend}"
-              {else}
-                alt="{$product.name}"
-              {/if}
-              height="{$product.default_image.bySize.large_default.height}"
-            >
+            <picture>
+              {if !empty($product.default_image.bySize.large_default.sources.avif)}<source srcset="{$product.default_image.bySize.large_default.sources.avif}" type="image/avif">{/if}
+              {if !empty($product.default_image.bySize.large_default.sources.webp)}<source srcset="{$product.default_image.bySize.large_default.sources.webp}" type="image/webp">{/if}
+              <img
+                class="js-modal-product-cover product-cover-modal"
+                width="{$product.default_image.bySize.large_default.width}"
+                src="{$product.default_image.bySize.large_default.url}"
+                {if !empty($product.default_image.legend)}
+                  alt="{$product.default_image.legend}"
+                  title="{$product.default_image.legend}"
+                {else}
+                  alt="{$product.name}"
+                {/if}
+                height="{$product.default_image.bySize.large_default.height}"
+              >
+            </picture>
           {else}
-            <img src="{$urls.no_picture_image.bySize.large_default.url}" loading="lazy" width="{$urls.no_picture_image.bySize.large_default.width}" height="{$urls.no_picture_image.bySize.large_default.height}" />
+            <picture>
+              {if !empty($urls.no_picture_image.bySize.large_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.large_default.sources.avif}" type="image/avif">{/if}
+              {if !empty($urls.no_picture_image.bySize.large_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.large_default.sources.webp}" type="image/webp">{/if}
+              <img src="{$urls.no_picture_image.bySize.large_default.url}" loading="lazy" width="{$urls.no_picture_image.bySize.large_default.width}" height="{$urls.no_picture_image.bySize.large_default.height}" />
+            </picture>
           {/if}
           <figcaption class="image-caption">
           {block name='product_description_short'}
@@ -56,19 +64,23 @@
               <ul class="product-images js-modal-product-images">
                 {foreach from=$product.images item=image}
                   <li class="thumb-container js-thumb-container">
-                    <img
-                      data-image-large-src="{$image.large.url}"
-                      class="thumb js-modal-thumb"
-                      src="{$image.medium.url}"
-                      {if !empty($image.legend)}
-                        alt="{$image.legend}"
-                        title="{$image.legend}"
-                      {else}
-                        alt="{$product.name}"
-                      {/if}
-                      width="{$image.medium.width}"
-                      height="148"
-                    >
+                    <picture>
+                      {if !empty($image.medium.sources.avif)}<source srcset="{$image.medium.sources.avif}" type="image/avif">{/if}
+                      {if !empty($image.medium.sources.webp)}<source srcset="{$image.medium.sources.webp}" type="image/webp">{/if}
+                      <img
+                        data-image-large-src="{$image.large.url}"
+                        class="thumb js-modal-thumb"
+                        src="{$image.medium.url}"
+                        {if !empty($image.legend)}
+                          alt="{$image.legend}"
+                          title="{$image.legend}"
+                        {else}
+                          alt="{$product.name}"
+                        {/if}
+                        width="{$image.medium.width}"
+                        height="148"
+                      >
+                    </picture>
                   </li>
                 {/foreach}
               </ul>

diff --git a/templates/catalog/_partials/subcategories.tpl b/templates/catalog/_partials/subcategories.tpl
@@ -33,13 +33,17 @@
             <div class="subcategory-image">
               <a href="{$subcategory.url}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
                 {if !empty($subcategory.image.large.url)}
-                  <img
-                    class="img-fluid"
-                    src="{$subcategory.image.large.url}"
-                    alt="{$subcategory.name|escape:'html':'UTF-8'}"
-                    loading="lazy"
-                    width="{$subcategory.image.large.width}"
-                    height="{$subcategory.image.large.height}"/>
+                  <picture>
+                    {if !empty($subcategory.image.large.sources.avif)}<source srcset="{$subcategory.image.large.sources.avif}" type="image/avif">{/if}
+                    {if !empty($subcategory.image.large.sources.webp)}<source srcset="{$subcategory.image.large.sources.webp}" type="image/webp">{/if}
+                    <img
+                      class="img-fluid"
+                      src="{$subcategory.image.large.url}"
+                      alt="{$subcategory.name|escape:'html':'UTF-8'}"
+                      loading="lazy"
+                      width="{$subcategory.image.large.width}"
+                      height="{$subcategory.image.large.height}"/>
+                  </picture>
                 {/if}
               </a>
             </div>

diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -27,9 +27,17 @@
   <div class="product-line-grid-left col-md-3 col-xs-4">
     <span class="product-image media-middle">
       {if $product.default_image}
-        <img src="{$product.default_image.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}" loading="lazy">
+        <picture>
+          {if !empty($product.default_image.bySize.cart_default.sources.avif)}<source srcset="{$product.default_image.bySize.cart_default.sources.avif}" type="image/avif">{/if}
+          {if !empty($product.default_image.bySize.cart_default.sources.webp)}<source srcset="{$product.default_image.bySize.cart_default.sources.webp}" type="image/webp">{/if}
+          <img src="{$product.default_image.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}" loading="lazy">
+        </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.cart_default.url}" loading="lazy" />
+        <picture>
+          {if !empty($urls.no_picture_image.bySize.cart_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.cart_default.sources.avif}" type="image/avif">{/if}
+          {if !empty($urls.no_picture_image.bySize.cart_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.cart_default.sources.webp}" type="image/webp">{/if}
+          <img src="{$urls.no_picture_image.bySize.cart_default.url}" loading="lazy" />
+        </picture>
       {/if}
     </span>
   </div>