From 2e7e823fe5e88eddf15b75f9c87f851a3b0a01c1 Mon Sep 17 00:00:00 2001
From: Hlavtox <daniel.hlavacek@hotmail.cz>
Date: Thu, 2 Feb 2023 22:18:41 +0100
Subject: [PATCH] Implement picture tags

---
 .../catalog/_partials/category-header.tpl     |  6 +-
 .../catalog/_partials/miniatures/category.tpl | 18 ++--
 .../_partials/miniatures/pack-product.tpl     | 32 +++++---
 .../catalog/_partials/miniatures/product.tpl  | 36 ++++----
 .../_partials/product-cover-thumbnails.tpl    | 82 +++++++++++--------
 .../_partials/product-images-modal.tpl        | 64 +++++++++------
 templates/catalog/_partials/subcategories.tpl | 18 ++--
 .../_partials/cart-detailed-product-line.tpl  | 12 ++-
 .../_partials/cart-summary-product-line.tpl   | 12 ++-
 .../_partials/order-confirmation-table.tpl    | 12 ++-
 templates/cms/stores.tpl                      | 22 +++--
 11 files changed, 197 insertions(+), 117 deletions(-)

diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
index 3a85aa81..e37056f4 100644
--- 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
index f9dfe509..ffefa43f 100644
--- 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
index 7ddae4fb..9967546e 100644
--- 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
index faf86109..234fda9f 100644
--- 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
index 1dcccca9..f9b20f60 100644
--- 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
index 26a951a4..84666969 100644
--- 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
index 3f241848..25f4a9e6 100644
--- 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
index a0b3a1f7..b21ea037 100644
--- 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>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index 2eabef29..8d7fe333 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -26,9 +26,17 @@
   <div class="media-left">
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
-        <img class="media-object" src="{$product.default_image.small.url}" alt="{$product.name}" loading="lazy">
+        <picture>
+          {if !empty($product.default_image.small.sources.avif)}<source srcset="{$product.default_image.small.sources.avif}" type="image/avif">{/if}
+          {if !empty($product.default_image.small.sources.webp)}<source srcset="{$product.default_image.small.sources.webp}" type="image/webp">{/if}
+          <img class="media-object" src="{$product.default_image.small.url}" alt="{$product.name}" loading="lazy">
+        </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" />
+        <picture>
+          {if !empty($urls.no_picture_image.bySize.small_default.sources.avif)}<source srcset="{$urls.no_picture_image.bySize.small_default.sources.avif}" type="image/avif">{/if}
+          {if !empty($urls.no_picture_image.bySize.small_default.sources.webp)}<source srcset="{$urls.no_picture_image.bySize.small_default.sources.webp}" type="image/webp">{/if}
+          <img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" />
+        </picture>
       {/if}
     </a>
   </div>
diff --git a/templates/checkout/_partials/order-confirmation-table.tpl b/templates/checkout/_partials/order-confirmation-table.tpl
index ce705869..79dadb46 100644
--- a/templates/checkout/_partials/order-confirmation-table.tpl
+++ b/templates/checkout/_partials/order-confirmation-table.tpl
@@ -40,9 +40,17 @@
           <div class="col-sm-2 col-xs-3">
             <span class="image">
               {if !empty($product.default_image)}
-                <img src="{$product.default_image.medium.url}" loading="lazy" />
+                <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}" loading="lazy" />
+                </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}
             </span>
           </div>
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index 5dca39d8..f63fcaa9 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -35,15 +35,19 @@
       <article id="store-{$store.id}" class="store-item card">
         <div class="store-item-container clearfix">
           <div class="col-md-3 store-picture hidden-sm-down">
-            <img
-              src="{$store.image.bySize.stores_default.url}"
-              {if !empty($store.image.legend)}
-                alt="{$store.image.legend}"
-                title="{$store.image.legend}"
-              {else}
-                alt="{$store.name}"
-              {/if}
-            >
+            <picture>
+              {if !empty($store.image.bySize.stores_default.sources.avif)}<source srcset="{$store.image.bySize.stores_default.sources.avif}" type="image/avif">{/if}
+              {if !empty($store.image.bySize.stores_default.sources.webp)}<source srcset="{$store.image.bySize.stores_default.sources.webp}" type="image/webp">{/if}
+              <img
+                src="{$store.image.bySize.stores_default.url}"
+                {if !empty($store.image.legend)}
+                  alt="{$store.image.legend}"
+                  title="{$store.image.legend}"
+                {else}
+                  alt="{$store.name}"
+                {/if}
+              >
+            </picture>
           </div>
           <div class="col-md-5 col-sm-7 col-xs-12 store-description">
             <p class="h3 card-title">{$store.name}</p>