Allow custom template file

CHANGELOG.md

@@ -1,6 +1,11 @@
+## 1.0.2
+
+- Allow custom template file
+- Order sources by width desc
+
 ## 1.0.1
 
-- Allow responsive images withe size alternatives
+- Allow responsive images with size alternatives
 
 ## 1.0.0
 

README.md

@@ -57,6 +57,7 @@ Move the downloaded file in the Prestashop **modules** directory and unzip the a
 - **height**: maximum height (optional)
 - **ext**: convert image to jpg, png, gif or webp (optional)
 - **breakpoints**: Alternative widths of responsive images in px (e.g. "500,800,1200") (optional)
+- **template**: custom template file
 
 ### Examples
 
@@ -120,8 +121,26 @@ Result:
 
 ```html
 <picture>
-    <source media="(max-width: 500px)" srcset="https://www.example.com/img/web/image-500x250-90.jpg" />
     <source media="(max-width: 800px)" srcset="https://www.example.com/img/web/image-800x400-90.jpg" />
+    <source media="(max-width: 500px)" srcset="https://www.example.com/img/web/image-500x250-90.jpg" />
     <img src="https://www.example.com/img/web/image-1200x600-90.jpg" loading="lazy" />
 </picture>
+```
+
+### Custom template
+
+You can create your own template to display image.
+
+Create a new template file in the **pixel_image_optimizer** directory for your theme:
+
+*themes/{themeName}/modules/pixel_image_optimizer/custom.tpl*
+
+Add the **template** option in the widget with the template path:
+
+```smarty
+{widget name='pixel_image_optimizer'
+    image_path='img/cms/image.jpg'
+    width=1200
+    template='module:pixel_image_optimizer/custom.tpl'
+}
 ```

pixel_image_optimizer.php

@@ -21,7 +21,7 @@ class Pixel_image_optimizer extends Module implements WidgetInterface
     public function __construct()
     {
         $this->name = 'pixel_image_optimizer';
-        $this->version = '1.0.1';
+        $this->version = '1.0.2';
         $this->author = 'Pixel Open';
         $this->tab = 'front_office_features';
         $this->need_instance = 0;
@@ -108,7 +108,7 @@ public function renderWidget($hookName, array $configuration): string
                     if (!$width) {
                         continue;
                     }
-                    $configuration['sources'][] = $this->imageResize(
+                    $configuration['sources'][$width] = $this->imageResize(
                         $imagePath,
                         $width,
                         $config['height'],
@@ -118,11 +118,15 @@ public function renderWidget($hookName, array $configuration): string
                     );
                 }
             }
+
+            krsort($configuration['sources']);
         }
 
+        $template = $configuration['template'] ?? $this->templateFile;
+
         $this->smarty->assign($this->getWidgetVariables($hookName, $configuration));
 
-        return $this->fetch($this->templateFile);
+        return $this->fetch($template);
     }
 
     /**