FIX: mobile CLS problem fixed

Oksydan · Oct 17, 2021 · 165c9ab · 165c9ab
1 parent 5f2d429
commit 165c9ab
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git a/is_imageslider.php b/is_imageslider.php
@@ -53,7 +53,7 @@ public function __construct()
     {
         $this->name = 'is_imageslider';
         $this->tab = 'front_office_features';
-        $this->version = '1.0.0';
+        $this->version = '1.0.1';
         $this->author = 'Prestashop - modified by Igor Stępień';
         $this->need_instance = 0;
         $this->bootstrap = true;

diff --git a/views/templates/hook/slider.tpl b/views/templates/hook/slider.tpl
@@ -36,24 +36,34 @@
         <li class="swiper-slide homeslider__slide">
           <a href="{$slide.url}">
             {if $slide@first}
-              <picture>
-                <source srcset="{$slide.image_url}" media="(min-width: 768px)">
-                <img class="img-fluid homeslider__img" src="{$slide.image_mobile_url}" alt="{$slide.title}" loading="lazy" {$slide.size nofilter}>
-              </picture>
-            {else}
-              <picture>
-                <source
-                  data-srcset="{$slide.image_url}"
-                  media="(min-width: 768px)">
+              {if $slide.image_url && $slide.image_mobile_url}
+                <img
+                  class="img-fluid d-block d-lg-none"
+                  src="{$slide.image_mobile_url}"
+                  {$slide.size_mobile nofilter}>
                 <img
-                  class="img-fluid lazyload homeslider__img"
-                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' {$slide.size|replace:'"':"'"} viewBox='0 0 1 1'%3E%3C/svg%3E"
-                  data-src="{$slide.image_mobile_url}"
-                  alt="{$slide.title}"
-                  loading="lazy"
-                  {$slide.size  nofilter}
-                  >
-              </picture>
+                  class="img-fluid d-none d-lg-block lazyload"
+                  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='{$slide.sizes[0]}' height='{$slide.sizes[1]}' viewBox='0 0 1 1'%3E%3C/svg%3E"
+                  data-src="{$slide.image_url}"
+                  lt="{$slide.title}"
+                  {$slide.size nofilter}>
+              {/if}
+            {else}
+              {if $slide.image_url && $slide.image_mobile_url}
+                <picture>
+                    <source
+                      data-srcset="{$slide.image_url}"
+                      media="(min-width: 768px)">
+                  <img
+                    class="img-fluid lazyload homeslider__img"
+                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' {$slide.size|replace:'"':"'"} viewBox='0 0 1 1'%3E%3C/svg%3E"
+                    data-src="{$slide.image_mobile_url}"
+                    alt="{$slide.title}"
+                    loading="lazy"
+                    {$slide.size  nofilter}
+                    >
+                </picture>
+              {/if}
             {/if}
 
             {if $slide.title || $slide.description }