From 1e1118187067eaf7fd73e2c2edb6516327342582 Mon Sep 17 00:00:00 2001
From: magentix <mvion@magentix.fr>
Date: Fri, 20 Oct 2023 15:32:04 +0200
Subject: [PATCH] Allow custom template file

---
 CHANGELOG.md              |  7 ++++++-
 README.md                 | 21 ++++++++++++++++++++-
 pixel_image_optimizer.php | 10 +++++++---
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74461de..9672fc2 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/README.md b/README.md
index 9cec6ff..4f8d06c 100644
--- a/README.md
+++ b/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'
+}
 ```
\ No newline at end of file
diff --git a/pixel_image_optimizer.php b/pixel_image_optimizer.php
index 647d123..f7937f0 100644
--- a/pixel_image_optimizer.php
+++ b/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);
     }
 
     /**