Add X13 WebP module for image conversion to next-generation formats

- Implemented the X13Webp class with core functionalities for converting images to WebP format. - Added support for different PHP versions and defined constants for versioning. - Included translation strings for various user interface elements and messages. - Created XML file for module versioning.
2025-09-12 00:41:29 +02:00
parent fa0f4b590b
commit 9003eede2d
247 changed files with 55597 additions and 1 deletions
--- a/modules/x13webp/views/css/lightbox.min.css
+++ b/modules/x13webp/views/css/lightbox.min.css
@@ -0,0 +1 @@
+.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
--- a/modules/x13webp/views/css/x13webp.admin.css
+++ b/modules/x13webp/views/css/x13webp.admin.css
@@ -0,0 +1,303 @@
+.preloader, .files-preloader {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  top: 0px;
+  background: #fff;
+  z-index: 10;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  transition: 0.4s;
+}
+.preloader:after, .files-preloader:after {
+  content: '';
+  height: 40px;
+  width: 40px;
+  border: 2px solid #999;
+  border-top-color: #666;
+  border-radius: 50%;
+  animation: 1s spin infinite linear;
+}
+.files-preloader:after{
+  height: 25px;
+  width: 25px;
+}
+.preloader.active, .files-preloader {
+  opacity: 1;
+  visibility: visible;
+}
+#x13webp-products-output {
+  position: relative;
+}
+#x13webp-products-output ul {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 100%;
+  padding: 0px;
+  list-style: none;
+  background: #fff;
+  z-index: 10;
+  box-shadow: 0px 0px 15px -3px rgba(0, 0, 0, 0.1);
+  display: none;
+  max-height: 300px;
+  overflow: hidden scroll;
+}
+#x13webp-products-output ul li {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  font-size: 14px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+#x13webp-products-output ul li img {
+  max-width: 50px;
+  max-height: 50px;
+  margin-right: 10px;
+}
+#x13webp-products-output ul li:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+#x13webp-products-output ul.active {
+  display: block;
+}
+#x13webp-products-search-wrapper {
+  margin-top: 15px;
+}
+#x13webp-test-images-wrapper {
+  padding-top: 15px;
+}
+#x13webp-test-images-wrapper .preloader {
+  top: 50px;
+  bottom: auto;
+  background: none;
+}
+#x13webp-test-images-wrapper .image {
+  height: auto;
+  width: auto;
+  position: relative;
+  max-width: 100% !important;
+}
+#x13webp-test-images-wrapper .image img {
+  max-width: 100%;
+  height: auto;
+  width: auto;
+}
+#conversion-fieldset .tab-pane {
+  position: relative;
+}
+#conversion-fieldset .tab-pane form{
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+#x13webp-convert-image {
+  margin-top: 15px;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.progress-td .progress {
+  margin: 4px 0px;
+}
+.progress {
+  display: none;
+}
+.progress .progress-bar {
+  min-width: auto !important;
+}
+.progress .progress-bar .progress-text {
+  padding: 0px 5px;
+  display: inline-block;
+}
+.progress.is-loaded {
+  display: block;
+}
+.progress.is-done .progress-bar {
+  background: #31ca46;
+}
+.lb-outerContainer {
+  background: none !important;
+}
+.images-done-wrapper {
+  position: relative;
+}
+.images-done-wrapper .preloader {
+  justify-content: right;
+  padding-right: 10px;
+  background: none;
+}
+.images-done-wrapper .preloader:after {
+  height: 12px;
+  width: 12px;
+  border: 1px solid #999;
+  border-top-color: #666;
+}
+.images-done-wrapper .images-done-total {
+  opacity: 0;
+  visibility: hidden;
+  transition: 0.3s;
+}
+.images-done-wrapper .images-done-total.active {
+  opacity: 1;
+  visibility: visible;
+}
+.bottom-button-conversion-progress {
+  text-align: center;
+  margin-top: auto;
+  display: flex;
+  justify-content: center;
+  padding-top:15px;
+}
+.progress-item-table .progress-button {
+  height: 36px;
+}
+.progress-item-table tr.tr-format-jpg [data-format="webp"] {
+  display: none !important;
+}
+.progress-item-table tr.tr-format-jpg[data-image_type="main"] {
+  display: none !important;
+}
+.progress-item-table tr.tr-format-webp [data-format="jpg"] {
+  display: none !important;
+}
+#form-tabs li a.disabled {
+  opacity: 0.3;
+  color: #646464;
+  cursor: no-drop;
+  border-color: #fff !important;
+}
+.x13webp-log-wrapper {
+  margin-top: 30px;
+}
+.x13webp-log-wrapper .button {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+.x13webp-log-wrapper .x13webp-log-info.warnings-only .log-li {
+  display: none;
+}
+.x13webp-log-wrapper .x13webp-log-info.warnings-only .log-li.has-warning {
+  display: block;
+}
+.x13webp-log-info,
+#x13webp-logs-delete-all {
+  background: #eff1f2;
+  padding: 5px;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+  height: 110px;
+  overflow: auto;
+}
+.x13webp-log-info .log-li .log-format,
+#x13webp-logs-delete-all .log-li .log-format {
+  color: #6c868e !important;
+}
+.x13webp-log-info .log-li .log-success,
+#x13webp-logs-delete-all .log-li .log-success {
+  color: #72c279;
+}
+.x13webp-log-info .log-li .log-warning,
+#x13webp-logs-delete-all .log-li .log-warning {
+  color: #e6a304;
+}
+.x13webp-log-info .log-li .log-danger,
+#x13webp-logs-delete-all .log-li .log-danger {
+  color: #d5676f;
+}
+#x13webp-logs-delete-all {
+  min-height: auto;
+  margin-top: 20px;
+}
+.tooltip-wrapper {
+  display: inline-block;
+}
+.progress-button-wrapper {
+  display: inline-block;
+}
+.list-files {
+  max-height: 500px;
+  overflow: auto;
+  margin-bottom: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  position: relative;
+}
+.list-files li.is-closed > ul {
+  display: none;
+}
+.list-files .dir p {
+  cursor: pointer;
+}
+.list-files .dir p:after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  border-top-color: rgba(0, 0, 0, 0.7);
+  border-radius: 50%;
+  margin-left: 5px;
+  animation: 1s spin infinite linear;
+  transition: 0.3s;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+.list-files .dir p i {
+  color: #ffc000;
+}
+.list-files .dir p.loading:after {
+  opacity: 1;
+  visibility: visible;
+}
+.list-files li:not(.dir) p {
+  margin-left: 18px;
+}
+.list-files ul {
+  list-style: none;
+  padding-left: 15px;
+}
+.list-files ul li {
+  padding: 2px 0px;
+}
+.list-files ul p {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0px;
+  display: inline-flex;
+  padding-right: 10px;
+}
+.list-files ul p .state {
+  margin-right: 5px;
+}
+.list-files ul p input {
+  margin: 0px 5px 0px 0px !important;
+  cursor: pointer;
+}
+#x13webp_image_format {
+  margin-bottom: 15px;
+}
+#x13webpTestButton i{
+  margin-right:5px;
+}
+
+.bottom-buttons-wrapper .btn{
+  margin-right:5px;
+}
+
+.x13webp-image a{
+  display: block;
+}
--- a/modules/x13webp/views/images/close.png
+++ b/modules/x13webp/views/images/close.png
--- a/modules/x13webp/views/images/close.webp
+++ b/modules/x13webp/views/images/close.webp
--- a/modules/x13webp/views/images/loading.gif
+++ b/modules/x13webp/views/images/loading.gif
--- a/modules/x13webp/views/images/next.png
+++ b/modules/x13webp/views/images/next.png
--- a/modules/x13webp/views/images/next.webp
+++ b/modules/x13webp/views/images/next.webp
--- a/modules/x13webp/views/images/prev.png
+++ b/modules/x13webp/views/images/prev.png
--- a/modules/x13webp/views/images/prev.webp
+++ b/modules/x13webp/views/images/prev.webp
--- a/modules/x13webp/views/index.php
+++ b/modules/x13webp/views/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2013 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2013 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/js/front/x13webp.front.js
+++ b/modules/x13webp/views/js/front/x13webp.front.js
@@ -0,0 +1,56 @@
+$(document).ready(() => {
+  let x13images = [];
+
+  $("img").each(function () {
+    const imgSrc = $(this).attr("data-src") ?? $(this).attr("data-original") ?? $(this).attr("src");
+
+    if (!imgSrc) return;
+    if (imgSrc.includes(".webp")) return;
+
+    if ($(this).siblings("source").length && $(this).siblings("source").attr("srcset") !== undefined) {
+  if ($(this).siblings("source").attr("srcset").includes(".webp")) {
+    return;
+  }
+}
+
+x13images.push(imgSrc.trim());
+  });
+
+$("[style]").each(function () {
+  const bgImage = $(this).css("background-image");
+
+  if (bgImage.includes(".webp") || (!bgImage.includes(".jpg") && !bgImage.includes(".png"))) {
+    return;
+  }
+
+  let image = $(this)
+    .css("background-image")
+    .replace(/url\("([^"]+)"\)/, "$1");
+  x13images.push(image.trim());
+});
+
+$("#product #thumbs_list a.fancybox").each(function () {
+  const href = $(this).attr("href");
+  if (href.length) {
+    x13images.push(href.trim());
+  }
+});
+$("#product .images-container .thumb").each(function () {
+  const medium = $(this).data("image-medium-src");
+  const large = $(this).data("image-large-src");
+  if (typeof medium !== 'undefined') {
+    x13images.push(medium.trim());
+  }
+  if (typeof large !== 'undefined') {
+    x13images.push(large.trim());
+  }
+});
+
+$.ajax({
+  url: x13webp_ajax_convert_url,
+  method: "POST",
+  data: {
+    x13images,
+  },
+});
+});
--- a/modules/x13webp/views/js/front/x13webp.picture.js
+++ b/modules/x13webp/views/js/front/x13webp.picture.js
@@ -0,0 +1,171 @@
+$(() => {
+  x13webp.fixProductThumbs();
+  if (!x13webpIsPs16) {
+    x13webp.addStylesheet();
+  }
+  x13webp.observe();
+});
+
+$(window).on('hashchange', function () {
+  if (!x13webpIsPs16) return;
+
+  setTimeout(function () {
+    let thumb = $('#thumbs_list_frame li:visible:first');
+    if (thumb.length === 0) return;
+    if (thumb.find('picture').length === 0) return;
+
+    let img = thumb.find('img').attr('data-original') ?? thumb.find('img').attr('src');
+    let source = thumb.find('source').attr('srcset');
+
+    $('#' + x13webp.themeSelectors.jsQvProductCover).attr('src', img.replace('-cart_default', '-large_default'));
+    $('#' + x13webp.themeSelectors.jsQvProductCover).siblings('source').attr('srcset', source.replace('-cart_default', '-large_default'));
+  })
+});
+
+
+const x13webp = {
+  themeSelectors: {
+    jsQvProductCover: x13webpIsPs16 ? "bigpic" : "js-qv-product-cover",
+    jsModalProductCover: "js-modal-product-cover",
+    jsThumb: "js-thumb",
+    jsModalThumb: "js-modal-thumb",
+  },
+
+  addStylesheet: () => {
+    let thumbHover = "." + x13webp.themeSelectors.jsThumb + ":hover";
+    let thumbSelected = "." + x13webp.themeSelectors.jsThumb + ".selected";
+    let thumb = document.querySelector(thumbSelected);
+
+    if (!thumb) return;
+
+    thumb = getComputedStyle(thumb);
+    let thumbBorder = {
+      style: thumb.borderBlockStyle,
+      width: thumb.borderBlockWidth,
+      color: thumb.borderBlockColor,
+    };
+
+    let css =
+        "picture" +
+        thumbSelected +
+        ", picture" +
+        thumbHover +
+        ", " +
+        "picture" +
+        thumbSelected.replace(
+          x13webp.themeSelectors.jsThumb,
+          x13webp.themeSelectors.jsModalThumb
+        ) +
+        ", picture" +
+        thumbHover.replace(
+          x13webp.themeSelectors.jsThumb,
+          x13webp.themeSelectors.jsModalThumb
+        ) +
+        " { border: none !important; outline-style: " +
+        thumbBorder.style +
+        " !important; outline-color: " +
+        thumbBorder.color +
+        " !important; outline-width: " +
+        thumbBorder.width +
+        " !important; outline-offset: -" +
+        thumbBorder.width +
+        " !important;}",
+      head = document.head || document.getElementsByTagName("head")[0],
+      style = document.createElement("style");
+
+    head.appendChild(style);
+
+    style.type = "text/css";
+    if (style.styleSheet) {
+      // This is required for IE8 and below.
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  },
+
+  replacePictureSource: (target, source) => {
+    target.setAttribute("srcset", source);
+  },
+
+  addAttributesToPicture: (target, classArray, dataArray = {}) => {
+    target.style.display = "inline-block";
+    target.classList.add(...classArray);
+
+    Object.entries(dataArray).forEach(([key, value]) => {
+      target.dataset[key] = value;
+    });
+  },
+
+  fixProductThumbs: () => {
+    const body = document.querySelector("body").getAttribute("id");
+
+    if (body !== "product") return;
+
+    const thumbs = [
+      ...document.querySelectorAll("." + x13webp.themeSelectors.jsThumb),
+    ];
+    const modalThumbs = [
+      ...document.querySelectorAll("." + x13webp.themeSelectors.jsModalThumb),
+    ];
+
+    const allThumbs = [...thumbs, ...modalThumbs];
+
+    allThumbs.forEach((thumb) => {
+      if (!thumb.parentElement) return;
+      if (thumb.parentElement.tagName !== "PICTURE") return;
+
+      const target = thumb.parentElement;
+      const classArray = thumb.classList;
+      const isModal = classArray.contains(x13webp.themeSelectors.jsModalThumb);
+      const dataArray = Object.assign({}, thumb.dataset);
+
+      x13webp.addAttributesToPicture(target, classArray, dataArray);
+
+      thumb.className = isModal
+        ? x13webp.themeSelectors.jsModalThumb + "-fix"
+        : x13webp.themeSelectors.jsThumb + "-fix";
+    });
+  },
+
+  observe: () => {
+    const pictureTagObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (!mutation.target.parentElement) return;
+        if (mutation.target.parentElement.tagName !== "PICTURE") return;
+
+        const mutationClass = mutation.target.classList;
+
+        if (
+          mutationClass.contains(x13webp.themeSelectors.jsQvProductCover) ||
+          mutationClass.contains(x13webp.themeSelectors.jsModalProductCover) ||
+          mutation.target.getAttribute("id") ===
+            x13webp.themeSelectors.jsQvProductCover
+        ) {
+          const target = mutation.target.parentElement.querySelector("source");
+          let source =
+            mutation.target.getAttribute("data-original") ??
+            mutation.target.getAttribute("src");
+          source = source.replace(/(\.jpg)|(\.png)/, ".webp");
+
+          x13webp.replacePictureSource(target, source);
+          return;
+        }
+
+        if (mutationClass.contains(x13webp.themeSelectors.jsThumb + "-fix")) {
+          const target = mutation.target.parentElement;
+          const classArray = mutation.target.classList;
+
+          x13webp.addAttributesToPicture(target, classArray);
+          return;
+        }
+      });
+    });
+
+    const allPictureTags = document.querySelectorAll("img");
+
+    allPictureTags.forEach((pictureTag) => {
+      pictureTagObserver.observe(pictureTag, { attributes: true });
+    });
+  },
+};
--- a/modules/x13webp/views/js/lightbox.min.js
+++ b/modules/x13webp/views/js/lightbox.min.js
--- a/modules/x13webp/views/js/x13filemanager.admin.js
+++ b/modules/x13webp/views/js/x13filemanager.admin.js
@@ -0,0 +1,327 @@
+let pause_othres_conversion = true;
+
+$(document).ready(() => {
+
+    $('.list-files:not(.is-loading)').on('click', 'li.dir:not(.is-loaded) p', function (e) {
+
+        if ($(e.target).is('input')) return;
+        $('.list-files').addClass('is-loading');
+        $(this).addClass('loading');
+        ajaxFileManager($(this).parent());
+
+    });
+
+    $('.list-files:not(.is-loading)').on('click', 'li.dir.is-loaded > p', function (e) {
+
+        if ($(e.target).is('input')) return;
+        $(this).parent().toggleClass(['is-open', 'is-closed']);
+        toggleState($(this).find('.state'), $(this).parent().hasClass('is-open'));
+
+    });
+
+    $('.list-files').on('change', 'input[type="checkbox"][name="others_item"]', function () {
+
+        if ($(this).prop('checked')) {
+
+            $('.btn-item-start-others').attr('disabled', false);
+
+        } else {
+
+            $('.btn-item-start-others').attr('disabled', $('input[name="others_item"]:checked:not(:disabled)').length ? false : true);
+            
+        }
+
+        const li = $(this).closest('li');
+        
+        if (li.length && li.hasClass('dir')) {
+
+            li.find('input:not(:disabled)').prop('checked', $(this).prop('checked'));
+
+        } 
+
+    });
+
+    $('.btn-item-start-others').on('click',function(){
+
+        actionStartConversion();
+
+        let items = [];
+
+        $('.list-files').find('input[name="others_item"]:checked:not(:disabled)').each(function(){
+            items.push($(this).val())
+        });
+
+        ajaxGenerateOthersItem(items)
+
+    });
+
+    $('.btn-item-pause-others').on('click', function () {
+
+        actionPauseConversion();
+
+    });
+
+    $('.btn-item-refresh-others').on('click', function(){
+
+        $.ajax({
+            url: x13webp_refresh_others_url,
+            method: 'POST',
+        }).done((resp) => {
+
+            if(resp.length){
+
+                const content = JSON.parse(resp);
+
+                if(content.error){
+
+                    alert(content.error);
+                    actionPauseConversion();
+
+                } else if(content.items.length){
+
+                    resetProgressItem();
+                    actionStartConversion();
+                    
+                    $(content.items).each(function(){
+                        const input = getInputByValue(this)
+
+                        if (input.length) input.attr('disabled', false);
+
+                    });
+
+                    ajaxGenerateOthersItem(content.items);
+
+                } else {
+
+                    alert(x13webp_unexpected_error);
+
+                }
+
+
+            }
+
+        });
+
+    });
+
+});
+
+const getInputByValue = (val) => {
+    return $('.list-files input[value="' + val + '"]');
+}
+
+const resetProgressItem = () => {
+
+    const progress_bar = $('#tab-x13wepb-others').find('.progress-bar');
+    progress_bar.attr('aria-valuenow', 0);
+    const totals = $('#tab-x13wepb-others').find('.images-done-total');
+    totals.find('.done').text(0);
+    progress_bar.parent().removeClass('is-done')
+    progress_bar.find('.progressbar-inner').text(`0%`);
+    progress_bar.css('width', '0%');
+
+}
+
+const actionStartConversion = () => {
+
+    pause_othres_conversion = false;
+    $('#form-tabs').find('li:not(.active)').tooltip('enable').find('a').addClass('disabled');
+    $('.btn-item-start-others').addClass('hidden').attr('disabled', true).parent().tooltip('disable');
+    $('.btn-item-refresh-others').addClass('hidden').attr('disabled', true);
+    $('.btn-item-pause-others').removeClass('hidden').attr('disabled', false);
+
+}
+
+const actionPauseConversion = () => {
+
+    pause_othres_conversion = true;
+    $('#form-tabs').find('li:not(.active)').tooltip('disable').find('a').removeClass('disabled');
+    const disable_button = $('input[name="others_item"]:checked:not(:disabled)').length ? false : true;
+    $('.btn-item-start-others').removeClass('hidden').attr('disabled', disable_button).parent().tooltip(disable_button ? 'enable' : 'disable');
+    $('.btn-item-refresh-others').removeClass('hidden').attr('disabled', false);
+    $('.btn-item-pause-others').addClass('hidden').attr('disabled', true);
+
+}
+
+const ajaxGenerateOthersItem = (items) => {
+
+    if (!pause_othres_conversion && items.length) {
+    
+        $.ajax({
+            url: x13webp_generate_others_item_url,
+            method: 'POST',
+            data: {
+                item: items[0]
+            }
+        }).done((resp) => {
+    
+            if(resp.length){
+                const output = JSON.parse(resp);
+                if(output && !output.error){
+
+                    if (output.dir) {
+
+                        if(output.complete){
+                            
+                            const input = getInputByValue(items[0]);
+                            if (input.length) input.attr('disabled', true).parent().addClass('disabled');
+                            items.splice(0, 1);
+
+                        } else {
+
+                            const input = getInputByValue(output.image);
+                            if (input.length) input.attr('disabled', true).parent().addClass('disabled');
+
+                            const index = items.indexOf(output.image);
+                            if (index !== -1) {
+                                items.splice(index, 1);
+                            }
+
+                        }
+
+                    } else {
+
+                        const input = getInputByValue(items[0]);
+                        if (input.length) input.attr('disabled', true).parent().addClass('disabled');
+        
+                        items.splice(0, 1);
+
+                    }
+
+                    const done = $('#tab-x13wepb-others').find('.images-done-total .done').text();
+                    if(!output.complete){
+                        addOthersLog(`<p class="log-li ${output.warning ? 'has-warning' : ''}">${output.object_name} <strong>#${parseInt(done) + 1}</strong>: <span class="log-format">WebP [${output.image}]</span> <span class="log log-${output.success ? 'success' : 'danger'}">${output.warning ? output.warning : x13webp_success_alert}</span></p>`, output.warning);
+                    }
+
+                    increaseProgressItem()
+
+                    if (items.length) {
+                        ajaxGenerateOthersItem(items)
+                    } else {
+                        actionPauseConversion()
+                    }
+
+                    if ($('#x13webp-delete-all-webp').hasClass('hidden')) {
+
+                        $('#x13webp-delete-all-webp').removeClass('hidden').siblings('.help-block').addClass('hidden');
+
+                    }
+
+                } else {
+                    actionPauseConversion()
+                    addOthersLog(`<p class="log-li"><span class="log log-danger">${output.error}</span></p>`, true);
+                }
+            } else {
+                actionPauseConversion()
+                addOthersLog(`<p class="log-li"><span class="log log-danger">${x13webp_unexpected_error}</span></p>`, true);
+            }
+
+            
+
+        });
+
+    }
+
+}
+
+const addOthersLog = (log, warning = false) => {
+
+    if ($('.x13webp-log-info').parent().hasClass('hidden')) $('.x13webp-log-info').parent().removeClass('hidden')
+    if (log) $('.x13webp-log-info').prepend(log);
+    if (warning && $('#x13webp-log-warning').hasClass('hidden')) $('#x13webp-log-warning').removeClass('hidden');
+
+}
+
+const increaseProgressItem = () => {
+
+    const progress_bar = $('#tab-x13wepb-others').find('.progress-bar');
+    progress_bar.attr('aria-valuenow', parseInt(progress_bar.attr('aria-valuenow')) + 1);
+    const percent = parseFloat(progress_bar.attr('aria-valuenow') * 100 / progress_bar.attr('aria-valuemax')).toFixed(2);
+
+    const totals = $('#tab-x13wepb-others').find('.images-done-total');
+
+    totals.find('.done').text(progress_bar.attr('aria-valuenow'));
+
+    if (totals.find('.total').text() == totals.find('.done').text() && !progress_bar.parent().hasClass('is-done')) {
+
+        progress_bar.parent().addClass('is-done')
+
+    }
+    progress_bar.find('.progressbar-inner').text(`${percent}%`);
+    progress_bar.css('width', percent + '%');
+
+}
+
+const toggleState = (state, open) => $(state).find('i').toggleClass('icon-folder').toggleClass('icon-folder-open');
+
+const ajaxFileManager = (li) => {
+
+    li.addClass(['is-open', 'is-loaded']);
+
+    $.ajax({
+        url: x13webp_file_manager_url,
+        method: 'POST',
+        data: {
+            file: li.data('file')
+        }
+    }).done((resp) => {
+
+        if (resp.length) {
+
+            const content = JSON.parse(resp);
+
+            if (content.error) {
+
+                alert(content.error);
+
+            } else if (content.tree.length) {
+
+                toggleState(li.find('.state'), false);
+
+                let ul = '<ul>';
+
+                $(content.tree).each(function(){
+                    ul += `<li data-file="${li.data('file')}/${this.name}" ${this.type == 'dir' ? 'class="dir"' : ''}>`;
+                    ul += `<p ${this.exists && this.type == 'dir' ? 'data-toggle="tooltip" title="'+x13webp_empty_folder+'"' : ''}>`;
+                    
+                    if(this.type == 'dir'){
+                        ul += `<span class="state"><i class="icon-folder"></i></span>`;
+                    }
+                    if (li.find('p input').prop('checked') && $('.btn-item-start-others').attr('disabled') == true) {
+                        $('.btn-item-start-others').attr('disabled', false);
+                    }
+                    const props = this.exists ?
+                        this.type == 'dir' ?
+                            'disabled' :
+                            'checked disabled':
+                                li.find('p input').prop('checked') ?
+                                    'checked' :
+                                    '';
+
+                    ul += `<input type="checkbox" name="others_item" value="${li.data('file')}/${this.name}" ${props}>`;
+                    ul += this.name;
+                    ul += `</p>`;
+                    ul += `</li>`;
+                                
+                })
+
+                ul += '</ul>';
+
+                li.append(ul);
+
+                li.find('.dir p').tooltip('enable');
+
+                $('.list-files').removeClass('is-loading');
+
+            } else {
+
+                li.append('<ul class="empty"><li>..</li></ul>');
+
+            }
+
+        }
+        
+        li.find('.loading').removeClass('loading');
+    });
+
+}
--- a/modules/x13webp/views/js/x13webp.admin.js
+++ b/modules/x13webp/views/js/x13webp.admin.js
--- a/modules/x13webp/views/templates/admin/_configure/helpers/form/conversion_test.tpl
+++ b/modules/x13webp/views/templates/admin/_configure/helpers/form/conversion_test.tpl
@@ -0,0 +1,240 @@
+<button id="x13webpTestButton" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseTestCompression" aria-expanded="false" aria-controls="collapseTestCompression">
+<i class="icon icon-photo" aria-hidden="true"></i> {l s='Test conversion' mod='x13webp'}
+</button>
+<div class="collapse" id="collapseTestCompression">
+    <div class="card" id="x13webp-products-search-wrapper">
+        <label class="control-label">{l s='Search product' mod='x13webp'}</label>
+        <input type="text" class="form-control" name="x13webp-search-product" id="x13webp-search-product" autocomplete="off">
+        <div id="x13webp-products-output">
+            <ul></ul>
+        </div>
+    </div>
+    <div id="x13webp-test-images-wrapper">
+        <div class="row hidden">
+            <div class="col-lg-6">
+                <div class="x13webp-image image-before">
+                    <h4 class="title">{l s='Original images (before)' mod='x13webp'}</h4>
+                    <h5 class="size"><strong><span class="kb">XXX KB</span> ({l s='image quality' mod='x13webp'}: <span class="percent"></span>%)</strong></h5>
+                    <div class="image"></div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="x13webp-image image-after">
+                    <h4 class="title">{l s='After compressed' mod='x13webp'}</h4>
+                    <h5 class="size"><strong><span class="kb">KB</span> ({l s='image quality' mod='x13webp'}: <span class="percent"></span>%)</strong></h5>
+                    <div class="image">
+                        <div class="preloader"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-12">
+                <button type="button" class="btn btn-default" id="x13webp-convert-image">{l s='Reconvert image' mod='x13webp'}</button>
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    $(document).ready(() => {
+
+        $('#x13webp-search-product').on('input', function(e){
+
+            if(e.keyCode == 13) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+
+            doX13AjaxSearch(this);
+
+        });
+
+        $(document).bind('click', function (e) {
+            if (!$(e.target).parents('#x13webp-products-search-wrapper').length && $('#x13webp-products-output ul').hasClass('active')) {
+                $('#x13webp-products-output ul').removeClass('active');
+            }
+        });
+
+        $('#x13webp-search-product').on('click', function () {
+
+            if ($('#x13webp-products-output ul').html() != '' && !$('#x13webp-products-output ul').hasClass('active')) {
+
+                $('#x13webp-products-output ul').addClass('active');
+
+            } else if($(this).val().length){
+
+                doX13AjaxSearch(this);
+
+            }
+
+        });
+
+        $('#x13webp-convert-image').on('click', function(){
+            if(!$(this).hasClass('disabled')){
+                $(this).addClass('disabled');
+                tryX13ConvertImage();
+            }
+        });
+
+    });
+
+    const doX13AjaxSearch = (input) => {
+
+        $.ajax({
+            url: "{$params.search_products_url}",
+            method: 'POST',
+            data: {
+                q: $(input).val(),
+                limit: 15
+            }
+
+        }).done((resp) => {
+
+            if(resp.length){
+
+                let row = '';
+            
+                const products = JSON.parse(resp);
+
+                $(products).each(function(){
+
+                    let ref = this.ref ? ' (ref: '+this.ref+')' : '';
+
+                    row += '<li data-id_product="'+this.id+'">';
+                    row += '<img src="'+this.image+'"><span>'+this.name+ref+'</span>';
+                    row += '</li>';
+
+                });
+
+                $('#x13webp-products-output ul').html(row);
+
+                if (!$('#x13webp-products-output ul').hasClass('active')) {
+                    $('#x13webp-products-output ul').addClass('active');
+                } 
+
+                initX13ProductsClick();
+                
+            } else {
+
+                $('#x13webp-products-output ul').removeClass('active')
+
+
+            }
+
+        });
+
+    };
+
+    const ajaxGetProductImage = (id_product) => {
+
+        let image = false;
+
+        $.ajax({
+            url: '{$params.product_image_url}',
+            method: 'POST',
+            async: false,
+            data: {
+                id_product
+            }
+        }).done((resp) => {
+
+            if(resp.length){
+
+                image = JSON.parse(resp);
+
+            } 
+
+        });
+
+        return image;
+
+    }
+
+    const initX13ProductsClick = () => {
+
+        $('#x13webp-products-output ul li').on('click', function(){
+
+            $('#x13webp-test-images-wrapper .alert').remove();
+            $('#x13webp-test-images-wrapper .row').addClass('hidden');
+            $('#x13webp-test-images-wrapper .image-after .image a').remove();
+            $('#x13webp-test-images-wrapper .image-before .image a').remove();
+
+            $('#x13webp-products-output ul').html('').removeClass('active');
+
+            const img = ajaxGetProductImage($(this).data('id_product'));
+
+            const img_wrapper = $('#x13webp-test-images-wrapper .image-before .image');
+
+            if(!img.error){
+
+                img_wrapper
+                    .data('id_product', $(this).data('id_product'))
+                    .html('<a data-lightbox="conversion-test" href="'+img.url+'"><img src="'+img.url+'"/></a>');
+                    
+                img_wrapper.siblings('.size').find('.kb').text(img.size).siblings('.percent').text('100');
+
+                $('#x13webp-test-images-wrapper .row').removeClass('hidden');
+
+                tryX13ConvertImage();
+
+            } else {
+
+                $('#x13webp-test-images-wrapper').prepend('<div class="alert alert-danger">'+img.error+'</div>');
+
+            }
+
+        });
+
+    };
+
+    const tryX13ConvertImage = () => {
+
+        const form  = $('#x13webp-test-images-wrapper').closest('form').get(0);
+        let data = new FormData(form);
+        data.append('test_conversion', 1);
+        data.append('id_product', $('#x13webp-test-images-wrapper .image-before .image').data('id_product'));
+
+        $.ajax({
+            url: '{$params.convert_image_url}', 
+            method: 'POST',
+            data,
+            processData: false,
+            contentType: false,
+            beforeSend: function(){
+                $('#x13webp-test-images-wrapper .image-after .preloader').addClass('active');
+                $('#x13webp-test-images-wrapper .image-after a').remove();
+                $('#x13webp-test-images-wrapper').find('.alert').remove();
+            }
+        }).done((resp) => {
+
+            if(resp.length){
+
+                const output = JSON.parse(resp);
+
+                if(output.success && output.image_url.length){
+
+                    $('#x13webp-test-images-wrapper .image-after .image')
+                        .append('<a data-lightbox="conversion-test" href="'+output.image_url+'"><img src="'+output.image_url+'"></a>')
+                        .siblings('.size')
+                        .find('.kb')
+                        .text(output.image_size)
+                        .siblings('.percent')
+                        .text(output.image_quality);       
+
+                } else {
+
+                    const error = output.error.length ? output.error : "{l s='A problem occured...' mod='x13webp'}";
+
+                    $('#x13webp-test-images-wrapper').prepend('<div class="alert alert-danger">'+error+'</div>');
+
+                }
+
+            }
+
+            $('#x13webp-convert-image').removeClass('disabled');
+
+            $('#x13webp-test-images-wrapper .image-after .preloader').removeClass('active');
+
+        });
+
+    }
+</script>
--- a/modules/x13webp/views/templates/admin/_configure/helpers/form/form.tpl
+++ b/modules/x13webp/views/templates/admin/_configure/helpers/form/form.tpl
@@ -0,0 +1,281 @@
+{extends file="helpers/form/form.tpl"}
+{block name="script"}
+$(document).ready(function() {
+
+    $('.rangeslider').each(function(){
+
+        const rangeslider_input = $(this).closest('.row').find('.rangeslider-input');
+        const rangeslider = $(this).slider({
+            value: rangeslider_input.val()
+        }).on('slide', function(event, ui){
+            rangeslider_input.val(ui.value);
+        });
+        $(rangeslider_input).on("input", function() {
+            this.value = this.value.replace(/\D/g,'');
+            if (this.value < 0) this.value = 0;
+            if (this.value > 100) this.value = 100;
+            rangeslider.slider( "option", "value", this.value);
+        });
+    });
+
+    $('.iframe-upload').fancybox({
+        'width'     : 900,
+        'height'    : 600,
+        'type'      : 'iframe',
+        'autoScale' : false,
+        'autoDimensions': false,
+        'fitToView' : false,
+        'autoSize' : false,
+        onUpdate : function() {
+            $('.fancybox-iframe').contents().find('a.link').data('field_id', $(this.element).data("input-name"));
+            $('.fancybox-iframe').contents().find('a.link').attr('data-field_id', $(this.element).data("input-name"));
+        },
+        afterShow: function() {
+            $('.fancybox-iframe').contents().find('a.link').data('field_id', $(this.element).data("input-name"));
+            $('.fancybox-iframe').contents().find('a.link').attr('data-field_id', $(this.element).data("input-name"));
+        },
+        helpers: {
+            overlay: {
+                locked: false
+            }
+        }
+    });
+    handleFieldDependencies();
+    let $fieldDependencies = getFieldDependencies();
+    for (let i = 0; i < $fieldDependencies.length; i++) {
+        $(document).off($fieldDependencies[i]).on('change', '[name="'+ $fieldDependencies[i] +'"]', function () {
+            handleFieldDependencies($fieldDependencies[i]);
+        }).bind(i);
+    }
+    function getFieldDependencies()
+    {
+        let fieldDependencies = [];
+        $('.depends-on').each(function (index, node) {
+            var $element = $(node);
+            var $classes = $element.prop('class').split(/\s+/);
+            for (var i = 0; i < $classes.length; i++) {
+                let current = $classes[i];
+                if (current.includes('depends-field')) {
+                    let parts = current.replace('depends-field-', '').split(':');
+                    fieldDependencies.push(parts[0]);
+                }
+            }
+        });
+
+        return fieldDependencies;
+    }
+
+    function inArray(needle, haystack) {
+        var length = haystack.length;
+        for(var i = 0; i < length; i++) {
+            if(haystack[i] == needle) return true;
+        }
+        return false;
+    }
+
+    function handleFieldDependencies(specificFieldName)
+    {
+        let specificField = specificFieldName || false;
+        $('.depends-on').each(function (index, node) {
+            var $element = $(node);
+            var $classes = $element.prop('class').split(/\s+/);
+            let $method = 'match';
+            let $fieldName = false,
+                $fieldValue = false,
+                $fieldType = false,
+                $currentValue;
+
+            if ($element.hasClass('depends-on-multiple')) {
+                $fieldValue = [];
+                $fieldName = [];
+                $fieldType = [];
+            }
+
+            for (var i = 0; i < $classes.length; i++) {
+                let current = $classes[i];
+                if (current.includes('depends-where')) {
+                    if (current == 'depends-where-is-not') {
+                        $method = 'not_match';
+                    }
+                }
+                if (current.includes('depends-field')) {
+                    let parts = current.replace('depends-field-', '').split(':');
+                    let $nameOfTheField = parts[0];
+                    let $valueOfTheField = parts[1].split('--');
+
+                    if ($element.hasClass('depends-on-multiple')) {
+                        $fieldName.push($nameOfTheField);
+                        $fieldValue.push($valueOfTheField);
+                    } else {
+                        $fieldName = $nameOfTheField;
+                        $fieldValue = $valueOfTheField;
+                    }
+
+                    if($('input[name="'+ $nameOfTheField +'"]').length > 0){
+                        $typeOfTheField = $('input[name="'+ $nameOfTheField +'"]').attr('type');
+                    }else if($('textarea[name="'+ $nameOfTheField +'"]').length == 1){
+                        $typeOfTheField = 'textarea';
+                    }else if($('select[name="'+ $nameOfTheField +'"]').length == 1){
+                        $typeOfTheField = 'select';
+                    }
+
+                    if ($element.hasClass('depends-on-multiple')) {
+                        $fieldType.push($typeOfTheField);
+                    } else {
+                        $fieldType = $typeOfTheField;
+                    }
+                }
+            }
+
+            if ($element.hasClass('depends-on-multiple')) {
+                var showBasedOnMultiple = true;
+                for (var i = 0; i < $fieldName.length; i++) {
+                    if ($fieldType[i] == 'checkbox' || $fieldType[i] == 'radio'){
+                        $currentValue = $('[name="'+ $fieldName[i] +'"]:checked').val();
+                    } else {
+                        $currentValue = $('[name="'+ $fieldName[i] +'"]').val();
+                    }
+
+                    $searchedValues = $fieldValue[i];
+                    if ($method == 'match') {
+                        if (!inArray($currentValue, $searchedValues)) {
+                            showBasedOnMultiple = false;
+                        }
+                    }
+                    if ($method == 'not_match') {
+                        if (inArray($currentValue, $searchedValues)) {
+                            showBasedOnMultiple = false;
+                        }
+                    }
+                }
+
+                if (showBasedOnMultiple) {
+                    $element.show();
+                } else {
+                    $element.hide();
+                }
+            } else {
+                if (specificField && specificField != $fieldName) {
+                    return;
+                }
+
+                if ($fieldType == 'checkbox' || $fieldType == 'radio'){
+                    $currentValue = $('[name="'+ $fieldName +'"]:checked').val();
+                } else {
+                    $currentValue = $('[name="'+ $fieldName +'"]').val();
+                }
+
+                if ($method == 'not_match' && $fieldName && $fieldValue) {
+                    if ($fieldValue.includes($currentValue)) {
+                        $element.hide();
+                    } else {
+                        $element.show();
+                    }
+                }
+                if ($method == 'match' && $fieldName && $fieldValue) {
+                    if ($fieldValue.includes($currentValue)) {
+                        $element.show();
+                    } else {
+                        $element.hide();
+                    }
+                }
+            }
+        });
+    }
+});
+{/block}
+{* {block name="label"}
+    {if isset($input.errors) && !empty($input.errors)}
+        <div class="col-lg-12">
+            <div class="alert alert-danger">{$input.errors}</div>
+        </div>
+    {/if}
+    {$smarty.block.parent}
+{/block} *}
+{block name="input"}
+    {if $input.type == 'file_lang'}
+        <div class="row">
+            {foreach from=$languages item=language}
+                {if $languages|count > 1}
+                    <div class="translatable-field lang-{$language.id_lang|escape:'UTF-8'}" {if $language.id_lang != $defaultFormLanguage}style="display:none"{/if}>
+                    {/if}
+                    <div class="col-lg-9">
+                        {*$fields_value|d*}
+                        {if isset($fields_value['image']) && $fields_value['image'][$language.id_lang] != ''}
+                            <img src="{$image_baseurl|escape:'UTF-8'}{$language.iso_code|escape:'UTF-8'}/{$fields_value['image'][$language.id_lang]|escape:'UTF-8'}" class="img-thumbnail" /><br><br>
+                        {/if}
+                        <input id="{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}" type="file" name="{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}" class="hide" />
+                        <div class="dummyfile input-group">
+                            <span class="input-group-addon"><i class="icon-file"></i></span>
+                            <input id="{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}-name" type="text" class="disabled" name="filename" readonly />
+                            <span class="input-group-btn">
+                                <button id="{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}-selectbutton" type="button" name="submitAddAttachments" class="btn btn-default">
+                                    <i class="icon-folder-open"></i> {l s='Choose a file' mod='X13Webp'}
+                                </button>
+                            </span>
+                        </div>
+                    </div>
+                    {if $languages|count > 1}
+                        <div class="col-lg-2">
+                            <button type="button" class="btn btn-default dropdown-toggle" tabindex="-1" data-toggle="dropdown">
+                                {$language.iso_code|escape:'UTF-8'}
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu">
+                                {foreach from=$languages item=lang}
+                                    <li><a href="javascript:hideOtherLanguage({$lang.id_lang|escape:'UTF-8'});" tabindex="-1">{$lang.name}</a></li>
+                                {/foreach}
+                            </ul>
+                        </div>
+                    {/if}
+                    {if $languages|count > 1}
+                    </div>
+                {/if}
+                <script>
+                $(document).ready(function() {
+                    $('#{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}-selectbutton').click(function(e) {
+                        $('#{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}').trigger('click');
+                    });
+                    $('#{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}').change(function(e) {
+                        var val = $(this).val();
+                        var file = val.split(/[\\/]/);
+                        $('#{$input.name|escape:'UTF-8'}_{$language.id_lang|escape:'UTF-8'}-name').val(file[file.length - 1]);
+                    });
+                });
+                </script>
+            {/foreach}
+        </div>
+    {elseif $input.type == 'selectImage'}
+        <input name="{$input.name|escape:'html':'UTF-8'}" id="{$input.name|escape:'html':'UTF-8'}" value="{$fields_value[$input.name]|escape:'html':'UTF-8'}" type="text" />
+        <p>
+            <a href="filemanager/dialog.php?type=1&amp;field_id={$input.name|escape:'html':'UTF-8'}" class="btn btn-default iframe-upload" data-input-name="{$input.name|escape:'html':'UTF-8'}" type="button">{l s='Image selector' mod='X13Webp'} <i class="icon-angle-right"></i></a>
+        </p>
+    {elseif $input.type == 'rangeSlider'}
+    <div class="row" class="rangeslider-row">
+        <div class="col-lg-1">
+            <input class="rangeslider-input" type="text" name="{$input.name|escape:'html':'UTF-8'}" value="{$fields_value[$input.name]|escape:'html':'UTF-8'}">
+        </div>
+        <div class="col-lg-6">
+            <div class="rangeslider" style="margin-top:12px;"></div>
+        </div>
+    </div>
+    {elseif $input.type == 'radio'}
+        {foreach $input.values as $value}
+            <div class="radio {if isset($input.class)}{$input.class}{/if}">
+                {strip}
+                <label>
+                <input type="radio"	name="{$input.name}" id="{$value.id}" value="{$value.value|escape:'html':'UTF-8'}"{if $fields_value[$input.name] == $value.value} checked="checked"{/if}{if (isset($input.disabled) && $input.disabled) or (isset($value.disabled) && $value.disabled)} disabled="disabled"{/if}/>
+                    {$value.label}
+                </label>
+                {/strip}
+            </div>
+            {if isset($value.p) && $value.p}<p class="help-block">{$value.p}</p>{/if}
+        {/foreach}
+    {elseif $input.type == 'converTest'}
+        {include file='./conversion_test.tpl' params=$input.vars}
+    {elseif $input.type == 'readonly'}
+        <input class="form-control" type="text" value="{$input.default}" readonly>
+    {else}
+        {$smarty.block.parent}
+    {/if}
+{/block}
--- a/modules/x13webp/views/templates/admin/_configure/helpers/form/index.php
+++ b/modules/x13webp/views/templates/admin/_configure/helpers/form/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2014 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2014 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/templates/admin/_configure/helpers/index.php
+++ b/modules/x13webp/views/templates/admin/_configure/helpers/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2014 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2014 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/templates/admin/_configure/index.php
+++ b/modules/x13webp/views/templates/admin/_configure/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2014 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2014 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/templates/admin/cleaner.tpl
+++ b/modules/x13webp/views/templates/admin/cleaner.tpl
@@ -0,0 +1,92 @@
+<div class="panel" id="conversion-fieldset">
+
+    <div class="panel-heading">
+        <i class="icon-cogs"></i> {l s='Delete unnecessary photos' mod='x13webp'}
+    </div>
+
+    <div class="form-horizontal">
+        <div class="form-wrapper">
+            <div class="form-group">
+                <label class="control-label col-lg-4">{l s='Delete product images that are not correctly assigned to products' mod='x13webp'}</label>
+                <div class="col-lg-8">
+                    <a 
+                        href="{$x13webp_clean_product_images_url}" 
+                        class="x13webp-button-confirm btn btn-danger" 
+                        id="x13webp-clean-product-images"
+                        data-confirm="{l s='Are you sure you want to clean product images?' mod='x13webp'}"
+                        >
+                        <i class="icon-trash"></i> 
+                        {l s='Delete' mod='x13webp'}
+                    </a>
+                    <p class="help-block">{l s='Removes invalid photos from the img/p/ folder - those that are not assigned to products in the database' mod='x13webp'}</p>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-lg-4">{l s='Delete images from the img/tmp/ folder' mod='x13webp'}</label>
+                <div class="col-lg-8">
+                    <a 
+                        href="{$x13webp_clean_tmp_url}" 
+                        class="x13webp-button-confirm btn btn-danger" 
+                        id="x13webp-clean-tmp-folder"
+                        data-confirm="{l s='Are you sure you want to clean tmp folder?' mod='x13webp'}"
+                        >
+                        <i class="icon-trash"></i> 
+                        {l s='Delete' mod='x13webp'}
+                    </a>
+                    <p class="help-block">{l s='Deletes photos from the temporary folder, which PrestaShop will regenerate if needed' mod='x13webp'}</p>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-lg-4">{l s='Delete images that are not correctly assigned to image types' mod='x13webp'}</label>
+                <div class="col-lg-8">
+                    <form action="{$x13webp_clean_image_types_url}" method="POST">
+                        <select name="type" class="fixed-width-xl">
+                            <option value="products">{l s='Products' mod='x13webp'}</option>
+                            <option value="categories">{l s='Categories' mod='x13webp'}</option>
+                            <option value="manufacturers">{l s='Manufacturers' mod='x13webp'}</option>
+                            <option value="suppliers">{l s='Suppliers' mod='x13webp'}</option>
+                            <option value="stores">{l s='Stores' mod='x13webp'}</option>
+                        </select>
+                        <br>
+                        <button 
+                            type="submit" 
+                            class="x13webp-button-confirm btn btn-danger"
+                            id="x13webp-submit-unnecessary-images"
+                            data-confirm="{l s='Are you sure you want to delete unnecessary images?' mod='x13webp'}"
+                            >
+                            <i class="icon-trash"></i> 
+                            {l s='Delete' mod='x13webp'}
+                        </button>
+                    </form>
+                    <p class="help-block">{l s='Delete images whose format has been removed from the database' mod='x13webp'}</p>
+                </div>
+            </div>
+            <div class="form-group">
+                <label class="control-label col-lg-4">{l s='Delete all WebP images' mod='x13webp'}</label>
+                <div class="col-lg-8">
+                    <div id="x13webp-delete-all-wrapper">
+                        <p class="help-block {if $x13webp_images_exists}hidden{/if}">{l s='There are no images to delete' mod='x13webp'}</p>
+                        <button 
+                            type="button" 
+                            class="x13webp-button-confirm btn btn-danger {if !$x13webp_images_exists}hidden{/if}" 
+                            id="x13webp-delete-all-webp"
+                            data-confirm="{l s='Are you sure you want to delete all WebP images?' mod='x13webp'}"
+                            >
+                            <i class="icon-trash"></i> {l s='Delete' mod='x13webp'}
+                        </button>
+                        <p class="help-block">{l s='Delete all images WebP that have been generated in this module' mod='x13webp'}</p>
+                    </div>
+                </div>
+                <div class="col-lg-12">
+                    <div id="x13webp-logs-delete-all" class="hidden"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+
+    
+
+</script>
--- a/modules/x13webp/views/templates/admin/conversion_form.tpl
+++ b/modules/x13webp/views/templates/admin/conversion_form.tpl
@@ -0,0 +1,68 @@
+<div class="panel" id="conversion-fieldset">
+
+    <div class="panel-heading">
+        <i class="icon-cogs"></i> {l s='Conversion process' mod='x13webp'}
+    </div>
+
+    <div class="row">
+        <div class="col-lg-3"></div>
+        <div class="col-lg-6">
+            <select name="{$x13webp_select.name}" class="form-control" id="x13webp_image_format">
+                <option value="webp" {if $x13webp_select.value == 'webp'}selected{/if}>{l s='Generate only WebP' mod='x13webp'}</option>
+                <option value="jpg" {if $x13webp_select.value == 'jpg'}selected{/if}>{l s='Generate only JPG' mod='x13webp'}</option>
+                <option value="all" {if $x13webp_select.value == 'all'}selected{/if}>{l s='Generate WebP and JPG' mod='x13webp'}</option>
+            </select>
+        </div>
+        <div class="col-lg-3"></div>
+    </div>
+    {if $types}
+        <ul class="nav nav-tabs" id="form-tabs">
+        {foreach from=$types item=item name=type}
+            <li class="{if $smarty.foreach.type.first}active{/if}" data-toggle="tooltip" data-original-title="{l s='The tab has been locked until the photos were generated' mod='x13webp'}">
+                <a 
+                    data-toggle="tab"
+                    href="#tab-x13wepb-{$item.val}"
+                    data-fieldset="{$item.val}"
+                    data-toggle="tab"
+                    class="{if $item.has_types}has_types{/if} {if $x13webp_select.value == 'jpg' && !$item.has_types}disabled{/if}"
+                >{$item.name}</a>
+            </li>
+        {/foreach}
+        </ul>
+        <div class="tab-content panel">
+        {foreach from=$types item=item name=types}
+            <div class="tab-pane {if $smarty.foreach.types.first}active{/if}" id="tab-x13wepb-{$item.val}">
+                {if $item.val == 'others'}
+                    {if $is_ps_176}
+                        {include file="module:x13webp/views/templates/admin/file_manager.tpl" progress_item=$item}
+                    {else}
+                        {include file="./file_manager.tpl" progress_item=$item}
+                    {/if}
+                {else}
+                    {if $is_ps_176}
+                        {include file="module:x13webp/views/templates/admin/conversion_progress.tpl" progress_item=$item}
+                    {else}
+                        {include file="./conversion_progress.tpl" progress_item=$item}
+                    {/if}
+                {/if}
+            </div>
+        {/foreach}
+
+        </div>
+
+        {if $warning_exists}
+            <div class="text-center">
+                <button class="btn btn-warning" id="regenerate-warnings">{l s='Re-generate images that have an error' mod='x13webp'}</button>
+            </div>
+        {/if}
+
+        <div class="x13webp-log-wrapper hidden">
+            <div class="button">
+                <button type="button" class="btn btn-warning hidden" id="x13webp-log-warning" data-toggle="warnings" data-text="{l s='Show all logs' mod='x13webp'}">{l s='Show warnings only' mod='x13webp'}</button>
+            </div>
+            <div class="x13webp-log-info"></div>
+        </div>
+
+    {/if}
+    
+</div>
--- a/modules/x13webp/views/templates/admin/conversion_progress.tpl
+++ b/modules/x13webp/views/templates/admin/conversion_progress.tpl
@@ -0,0 +1,55 @@
+<form>
+    <table class="table progress-item-table">
+        <thead>
+            <tr>
+                <th width="15%">{l s='Image type' mod='x13webp'}</th>
+                <th width="15%">{l s='Actions' mod='x13webp'}</th>
+                <th width="15%" class="text-right">{l s='Status' mod='x13webp'}</th>
+                <th width="55%">{l s='Progress' mod='x13webp'}</th>
+            </tr> 
+        </thead>
+        <tbody>
+
+        {if $progress_item.types}
+        {foreach from=$progress_item.types item=type}
+            {if $is_ps_176}
+                {include file="module:x13webp/views/templates/admin/progress_item.tpl" progress_item=$progress_item image_type=$type.name image_name=$type.name}
+            {else}
+                {include file="./progress_item.tpl" progress_item=$progress_item image_type=$type.name image_name=$type.name}
+            {/if}
+        {/foreach}
+        {else}
+            {if $is_ps_176}
+                {include file="module:x13webp/views/templates/admin/progress_item.tpl" progress_item=$progress_item image_type='all' image_name=$progress_item.types_info}
+            {else}
+                {include file="./progress_item.tpl" progress_item=$progress_item image_type='all' image_name=$progress_item.types_info}
+            {/if}
+        {/if}
+
+        </tbody>
+    </table>
+
+        
+    {if $progress_item.allowed}
+        {if $progress_item.types}
+            <div class="bottom-button-conversion-progress" data-type="{$progress_item.val}">
+                <div class="bottom-buttons-wrapper" data-toggle="tooltip" data-original-title="{l s='Buttons were disabled during the conversion process' mod='x13webp'}">
+                    <div class="tooltip-wrapper" data-toggle="tooltip" data-original-title="{l s='Button has been disabled as all images have already been generated' mod='x13webp'}">
+                        <button type="button" class="btn btn-success btn-start-conversion" disabled>
+                            <i class="icon icon-play" aria-hidden="true"></i> {l s='Generate all images' mod='x13webp'}
+                        </button>
+                    </div>
+                    <button type="button" class="btn btn-warning btn-pause-conversion hidden" disabled>
+                        <i class="icon icon-pause" aria-hidden="true"></i> {l s='Stop generating images' mod='x13webp'}
+                    </button>
+                    <button type="button" class="btn btn-secondary btn-refresh-conversion" disabled>
+                        <i class="icon icon-refresh" aria-hidden="true"></i> {l s='Re-generate all images' mod='x13webp'}
+                    </button>
+                </div>
+            </div>
+        {/if}
+    {else}
+        <div class="alert alert-warning" style="margin-top:15px;">{l s='This item is not allowed to generate' mod='x13webp'}</div>
+    {/if}
+
+</form>
--- a/modules/x13webp/views/templates/admin/file_manager.tpl
+++ b/modules/x13webp/views/templates/admin/file_manager.tpl
@@ -0,0 +1,93 @@
+<div class="list-files">
+    <div class="files-preloader"></div>
+</div>
+{* {if $tree}
+
+    <div class="list-files hidden">
+        <ul>
+            {foreach from=$tree item=file}
+                <li data-file="{$file.name}" {if $file.type == 'dir'}class="dir" {/if}>
+                    <p {if $file.exists && $file.type == 'dir'}data-toggle="tooltip" title="{l s='No image in this folder' mod='x13webp'}"{/if}>
+                        {if $file.type == 'dir'}
+                            <span class="state"><i class="icon-folder"></i></span>
+                        {/if} 
+                        <input type="checkbox" name="others_item" value="{$file.name}" {if $file.exists}disabled {if $file.type != 'dir'}checked{/if}{/if}>
+                        {$file.name}
+                    </p>
+                </li>
+            {/foreach}
+        </ul>
+    </div>
+
+{/if} *}
+
+<form>
+
+    <table class="table progress-item-table">
+        <thead>
+            <tr>
+                <th width="15%">{l s='Image type' mod='x13webp'}</th>
+                <th width="15%">{l s='Actions' mod='x13webp'}</th>
+                <th width="15%" class="text-right">{l s='Status' mod='x13webp'}</th>
+                <th width="55%">{l s='Progress' mod='x13webp'}</th>
+            </tr> 
+        </thead>
+        <tbody>
+
+        {if !$progress_item.types}
+            <tr data-image_type="all">
+                <td>
+                    <strong>{$progress_item.types_info}</strong>
+                </td>
+                <td class="progress-button" data-image_type="all" data-type="{$progress_item.val}">
+                    {if $progress_item.allowed}
+                    <div class="tooltip-wrapper" data-toggle="tooltip" data-original-title="{l s='You have to select an image if you want to generate images' mod='x13webp'}">
+                        <button type="button" class="btn btn-success btn-sm btn-item-start-others" disabled><i class="icon icon-play" aria-hidden="true"></i></button>
+                    </div>
+                    <button type="button" class="btn btn-warning btn-sm hidden btn-item-pause-others" disabled><i class="icon icon-pause" aria-hidden="true"></i></button>
+                    <button type="button" class="btn btn-secondary btn-sm btn-item-refresh-others" disabled><i class="icon icon-refresh" aria-hidden="true"></i></button>
+                    {/if}
+                </td>
+                <td class="text-right images-done-wrapper">
+                    <div class="preloader active"></div>
+                    <div class="images-done-total" data-format="webp">
+                        <span class="done">0</span>
+                        /
+                        <span class="total">0</span>
+                    </div>
+                </td>
+                <td class="progress-td">
+                    <div class="progress" data-image_type="all" data-format="webp">
+                        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0">
+                            <span class="progress-text">WebP</span>
+                            <span class="progressbar-inner hidden-sm-down">0%</span>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        {/if}
+
+        </tbody>
+    </table>
+
+        
+    {if $progress_item.allowed}
+        {if $progress_item.types}
+            <div class="bottom-button-conversion-progress" data-type="{$progress_item.val}">
+                <button type="button" class="btn btn-success btn-start-conversion" disabled>
+                    <i class="icon icon-play" aria-hidden="true"></i> {l s='Generate all images' mod='x13webp'}
+                </button>
+                <button type="button" class="btn btn-warning btn-pause-conversion hidden" disabled>
+                    <i class="icon icon-pause" aria-hidden="true"></i> {l s='Stop generating images' mod='x13webp'}
+                </button>
+                <button type="button" class="btn btn-secondary btn-refresh-conversion" disabled>
+                    <i class="icon icon-refresh" aria-hidden="true"></i> {l s='Re-generate all images' mod='x13webp'}
+                </button>
+            </div>
+        {/if}
+    {else}
+        <div class="alert alert-warning" style="margin-top:15px;">{l s='This item is not allowed to generate' mod='x13webp'}</div>
+    {/if}
+
+</form>
+
--- a/modules/x13webp/views/templates/admin/index.php
+++ b/modules/x13webp/views/templates/admin/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2014 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2014 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/templates/admin/module_toolbar.tpl
+++ b/modules/x13webp/views/templates/admin/module_toolbar.tpl
@@ -0,0 +1,20 @@
+<ul id="module_x13lookbook_toolbar" class="hidden">
+{foreach from=$module_toolbar_buttons item=btn key=k}
+    <li>
+        <a id="module-header-desc-{$module_name}-{if isset($btn.imgclass)}{$btn.imgclass|escape}{else}{$k}{/if}"
+            class="toolbar_btn {if isset($btn.target) && $btn.target} _blank{/if} pointer"{if isset($btn.href)} href="{$btn.href|escape}"{/if}
+            title="{if isset($btn.help)}{$btn.help}{else}{$btn.desc|escape}{/if}"{if isset($btn.js) && $btn.js} onclick="{$btn.js}"{/if}{if isset($btn.modal_target) && $btn.modal_target} data-target="{$btn.modal_target}" data-toggle="modal"{/if}{if isset($btn.help)} data-toggle="tooltip" data-placement="bottom"{/if}>
+            <i
+            class="{if isset($btn.icon)}{$btn.icon|escape}{else}process-icon-{if isset($btn.imgclass)}{$btn.imgclass|escape}{else}{$k}{/if}{/if}{if isset($btn.class)} {$btn.class|escape}{/if}"></i>
+            <div{if isset($btn.force_desc) && $btn.force_desc == true } class="locked"{/if}>{$btn.desc|escape}</div>
+        </a>
+    </li>
+{/foreach}
+</ul>
+<script>
+$( document ).ready(function() {
+  $('#module_x13lookbook_toolbar li').prependTo('.toolbarBox .btn-toolbar .nav');
+  $('.toolbarBox .btn-toolbar .nav li>a#desc-module-update').parent().remove();
+});
+</script>
+
--- a/modules/x13webp/views/templates/admin/progress_item.tpl
+++ b/modules/x13webp/views/templates/admin/progress_item.tpl
@@ -0,0 +1,49 @@
+<tr data-image_type="{$image_type}" class="tr-format-{$x13webp_select.value}">
+    <td>
+        <strong>{$image_name}</strong>
+    </td>
+    <td class="progress-button" data-image_type="{$image_type}" data-type="{$progress_item.val}">
+        <div class="progress-button-wrapper" data-toggle="tooltip" data-original-title="{l s='Buttons were disabled during the conversion process' mod='x13webp'}">
+            {if $progress_item.allowed}
+                <div class="tooltip-wrapper" data-toggle="tooltip" data-original-title="{l s='Button has benn disabled bacause all images have already been generated' mod='x13webp'}">
+                    <button type="button" class="btn btn-success btn-sm btn-item-start" disabled><i class="icon icon-play" aria-hidden="true"></i></button>
+                </div>
+                <button type="button" class="btn btn-warning btn-sm hidden btn-item-pause" disabled><i class="icon icon-pause" aria-hidden="true"></i></button>
+                <button type="button" class="btn btn-secondary btn-sm btn-item-refresh" disabled><i class="icon icon-refresh" aria-hidden="true"></i></button>
+            {/if}
+        </div>
+    </td>
+    <td class="text-right">
+        <div class="images-done-wrapper">
+            <div class="preloader active"></div>
+            <div class="images-done-total" data-format="webp">
+                <span class="done">0</span>
+                /
+                <span class="total">0</span>
+            </div>
+            {if $progress_item.has_types && $image_type != 'main'}
+            <div class="images-done-total" data-format="jpg">
+                <span class="done">0</span>
+                /
+                <span class="total">0</span>
+            </div>
+            {/if}
+        </div>
+    </td>
+    <td class="progress-td">
+        <div class="progress" data-image_type="{$image_type}" data-format="webp">
+            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0">
+                <span class="progress-text">WebP</span>
+                <span class="progressbar-inner hidden-sm-down">0%</span>
+            </div>
+        </div>
+        {if $progress_item.has_types && $image_type != 'main'}
+        <div class="progress" data-image_type="{$image_type}" data-format="jpg">
+            <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0">
+                <span class="progress-text">JPG</span>
+                <span class="progressbar-inner hidden-sm-down">0%</span>
+            </div>
+        </div>
+        {/if}
+    </td>
+</tr>
--- a/modules/x13webp/views/templates/hook/index.php
+++ b/modules/x13webp/views/templates/hook/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2013 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2013 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/templates/index.php
+++ b/modules/x13webp/views/templates/index.php
@@ -0,0 +1,35 @@
+<?php
+/*
+* 2007-2013 PrestaShop
+*
+* NOTICE OF LICENSE
+*
+* This source file is subject to the Academic Free License (AFL 3.0)
+* that is bundled with this package in the file LICENSE.txt.
+* It is also available through the world-wide-web at this URL:
+* http://opensource.org/licenses/afl-3.0.php
+* If you did not receive a copy of the license and are unable to
+* obtain it through the world-wide-web, please send an email
+* to license@prestashop.com so we can send you a copy immediately.
+*
+* DISCLAIMER
+*
+* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+* versions in the future. If you wish to customize PrestaShop for your
+* needs please refer to http://www.prestashop.com for more information.
+*
+*  @author PrestaShop SA <contact@prestashop.com>
+*  @copyright  2007-2013 PrestaShop SA
+*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
+*  International Registered Trademark & Property of PrestaShop SA
+*/
+				    	
+header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
+header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
+						
+header("Cache-Control: no-store, no-cache, must-revalidate");
+header("Cache-Control: post-check=0, pre-check=0", false);
+header("Pragma: no-cache");
+						
+header("Location: ../");
+exit;
--- a/modules/x13webp/views/templates/variables.tpl
+++ b/modules/x13webp/views/templates/variables.tpl
@@ -0,0 +1,21 @@
+<script>
+{foreach from=$x13webp_js_variables item=value key=k}
+    {if !empty($k) && is_string($k)}
+        {if is_bool($value)}
+            var {$k} = {$value|var_export:true};
+        {elseif is_int($value)}
+            var {$k} = {$value|intval};
+        {elseif is_float($value)}
+            var {$k} = {$value|floatval|replace:',':'.'};
+        {elseif is_string($value)}
+            var {$k} = '{$value|strval}';
+        {elseif is_array($value) || is_object($value)}
+            var {$k} = {$value|json_encode};
+        {elseif is_null($value)}
+            var {$k} = null;
+        {else}
+            var {$k} = '{$value|@addcslashes:'\''}';
+        {/if}
+    {/if}
+{/foreach}
+</script>
				`@@ -0,0 +1 @@`
				.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}