new version of ImageGallery Lite with better image proccesing

novafacile · Sep 8, 2021 · 3adb623 · 3adb623
1 parent 9132872
commit 3adb623
Show file tree

Hide file tree

Showing 9 changed files with 2,240 additions and 76 deletions.
diff --git a/docs/index.htm b/docs/index.htm
@@ -107,6 +107,7 @@ <h3>About Bludit</h3>
               <h2>Contact3</h2>
               <p>Contact3 is a contact form for the Bludit v3.X CMS. With the plugin your visitors can contact you via email using a contact form.</p>
               <p>The form can be visually customized to your needs and is easy to configure.</p>
+              <p>Current version of Contact3 for Bludit CMS: v2.1.1</p>
               <hr>
               <p class="text-center my-3">
                 <a href="https://download.novafacile.com/bludit-plugins/contact3.zip" class="btn btn-success btn-lg me-3">Download</a>
@@ -179,6 +180,7 @@ <h2>ImageGallery</h2>
               <p>ImageGallery is an image gallery for the Bludit v3.X CMS. With this plugin you can extend your Bludit CMS with an image gallery.</p>
               <p>The image gallery can be visually customized to your needs and is easy to configure.</p>
               <p>With the current &quot;Lite Version&quot; you can add images to one album. An extended pro version to manage multiple albums is in development.</p>
+              <p>Current version of ImageGallery for Bludit CMS: v1.3.0</p>
               <hr>
               <p class="text-center my-3">
                 <a href="https://download.novafacile.com/bludit-plugins/imagegallery-lite.zip" class="btn btn-success btn-lg me-3">Download</a>
@@ -256,8 +258,8 @@ <h3>Image Gallery</h3>
                 <li>Image are managed in the admin interface.</li>
                 <li>All configurations are explained in the settings.</li>
                 <li>Thumbnails are generated automatically.</li>
-                <li>For an individual layout just copy the files <code>imagegallery-lite.php</code> and <code>imagegallery-lite.css</code> from the plugin folder <code>/layout</code> into your own template directory and customize them.</li>
-                <li>Extended version with multiple albums is in development.</li>
+                <li>For an individual layout just copy the files <code>imagegallery.php</code> and <code>imagegallery.css</code> from the plugin folder <code>/layout</code> into your own template directory and customize them.</li>
+                <li>Pro version with multiple albums is in development.</li>
               </ul>
               <h3>Support</h3>
               <ul>

diff --git a/imagegallery-lite/README.md b/imagegallery-lite/README.md
@@ -29,5 +29,4 @@ Image Gallery Plugin for Bludit CMS.
 - All configurations are explained in the settings.
 - For an individual template just copy the files `imagegallery-lite.php` and `imagegallery-lite.css` from the plugin folder `/layout` into your own template directory and customize them.
 - Pro version with multiple albums is in development.
-- License: AGPL-3.0
-- Screenshots and more details: [Official Bludit ImageGallery Plugin Page](https://bludit-plugins.novafacile.com#imagegallery)
+- License: AGPL-3.0
diff --git a/imagegallery-lite/ajax/upload.php b/imagegallery-lite/ajax/upload.php
@@ -24,7 +24,10 @@
   AJAX::exit();
 }
 
-// check storage
+// get plugin path
+$pluginPath = dirname(pathinfo(__FILE__, PATHINFO_DIRNAME));
+
+// set images storage
 $basePath = dirname( __FILE__, 4); // Bludit3 Base
 $storageRoot = 'imagegallery';
 $storage = $basePath.DS.'bl-content'.DS.$storageRoot.DS.$_POST['album'];
@@ -43,48 +46,57 @@
 if (!empty($_FILES)) { 
     $fileName = $_FILES['file']['name'];
     $tempFile = $_FILES['file']['tmp_name'];
-    $targetFile =  $storage.DS.$fileName;
-    $success = move_uploaded_file($tempFile,$targetFile);
+    $file =  $storage.DS.$fileName;
+    $success = move_uploaded_file($tempFile,$file);
+
+    // default config
+    // feature for pro version: read config form settings
+    $imageSettings = [
+      'thumb' => [
+        'cacheName' => 'thumb',
+        'size' => 400,
+        'format' => 'crop',
+        'quality' => 80
+      ],
+      'large' => [
+        'cacheName' => 'large',
+        'size' => 1500,
+        'format' => 'auto',
+        'quality' => 90
+      ]
+    ];
 
     // create thumb & large
-    require $basePath.DS.'bl-kernel'.DS.'helpers'.DS.'image.class.php';
-    $image = new Image();
-    // feature for pro version: read config
-
-    // thumb
-    $thumb = [
-      'cacheName' => 'thumb',
-      'size' => 400,
-      'format' => 'crop',
-      'quality' => 80
-    ];
-    $set = $thumb;
+    require $pluginPath.DS.'vendors'.DS.'SimpleImage.php';
+    $image = new \claviska\SimpleImage();
+
+    foreach ($imageSettings as $value) {
+      $cacheName = $value['cacheName'];
+      $cacheDir = $cache.DS.$cacheName;
+      $cacheFile = $storage.DS.'cache'.DS.$cacheName.DS.$fileName;
+
+      if(!file_exists($cacheDir)){
+        mkdir($cacheDir, 0755);
+      }
+
+      $image
+        ->fromFile($file)
+        ->autoOrient();
+      $mimeType = $image->getMimeType();
+
+      switch ($value['format']) {
+          case 'crop':
+            $image->thumbnail($value['size'], $value['size']);
+            break;          
+          default:
+            $image->bestFit($value['size'], $value['size']);
+            break;
+        }  
+
+      $image->toFile($cacheFile, $mimeType, $value['quality']);
 
-    // check & create cache dir
-    $cacheDir = $cache.DS.$set['cacheName'];
-    if(!file_exists($cacheDir)){
-      mkdir($cacheDir, 0755);
     }
-    // create image
-    $image->setImage($targetFile, $set['size'], $set['size'], $set['format']);
-    $image->saveImage($storage.DS.'cache'.DS.$set['cacheName'].DS.$fileName, $set['quality']);
-
-    // large
-    $large = [
-      'cacheName' => 'large',
-      'size' => 1000,
-      'format' => 'auto',
-      'quality' => 90
-    ];
-    $set = $large;
-    // check & create cache dir
-    $cacheDir = $cache.DS.$set['cacheName'];
-    if(!file_exists($cacheDir)){
-      mkdir($cacheDir, 0755);
-    }
-    $image->setImage($targetFile, $set['size'], $set['size'], $set['format']);
-    $image->saveImage($storage.DS.'cache'.DS.$set['cacheName'].DS.$fileName, $set['quality']);    
-
+
     // clear files cache
     @unlink($cache.DS.'files.php');
 

diff --git a/imagegallery-lite/js/imagegallery-lite.js → imagegallery-lite/js/imagegallery.js b/imagegallery-lite/js/imagegallery-lite.js → imagegallery-lite/js/imagegallery.js
@@ -1,8 +1,8 @@
 
 $(function(){
-  var lightbox = new SimpleLightbox(".imagegallery-lite-images .image", {});
+  var lightbox = new SimpleLightbox(".imagegallery-images .image", {});
 
-  $('.imagegallery-lite-del-file').bind("click", function(){
+  $('.imagegallery-del-file').bind("click", function(){
     let url = $(this).data("url") + 'ajax/delete-file.php';
     let album = $(this).data("album");
     let file = $(this).data("file");
@@ -14,7 +14,7 @@ $(function(){
       'file': file,
       'tokenCSRF': tokenCSRF
     }, function(){
-      let selector = '#imagegallery-lite-image-' + number;
+      let selector = '#imagegallery-image-' + number;
       $(selector).hide();
     }).fail(function(){
       alert('Error. Could not delete file.');

diff --git a/...gallery-lite/layout/imagegallery-lite.css → imagegallery-lite/layout/imagegallery.css b/...gallery-lite/layout/imagegallery-lite.css → imagegallery-lite/layout/imagegallery.css
@@ -1,12 +1,12 @@
 /** ImageGallery Grid **/
-.imagegallery-lite {
+.imagegallery {
   display: grid;
   grid-gap: 15px;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   margin-top: 15px;
 }
 
-.imagegallery-lite .imagegallery-lite-image img {
+.imagegallery .imagegallery-image img {
   max-width: 100%;
   max-height: 400px;
 }

diff --git a/...gallery-lite/layout/imagegallery-lite.php → imagegallery-lite/layout/imagegallery.php b/...gallery-lite/layout/imagegallery-lite.php → imagegallery-lite/layout/imagegallery.php
@@ -16,10 +16,10 @@
   <h3><?php echo $this->getValue('gallery-title'); ?></h3>
 <?php endif; ?>
 
-  <div class="imagegallery-lite">
+  <div class="imagegallery">
     <?php foreach ($images as $image => $timestamp): ?>
-    <div class="imagegallery-lite-image">
-      <a href="<?php echo $pathLarge.$image; ?>" class="imagegallery-lite-image-link">
+    <div class="imagegallery-image">
+      <a href="<?php echo $pathLarge.$image; ?>" class="imagegallery-image-link">
         <img src="<?php echo $pathThumbnail.$image; ?>">
       </a>
     </div>

diff --git a/imagegallery-lite/metadata.json b/imagegallery-lite/metadata.json
@@ -2,8 +2,8 @@
 	"author": "novafacile",
 	"email": "",
 	"website": "https://bludit-plugins.novafacile.com",
-	"version":"1.2.0",
-	"releaseDate": "2021-06-18",
+	"version":"1.3.0",
+	"releaseDate": "2021-09-08",
 	"license": "AGPL-3.0",
 	"compatible": "3.13.1",
 	"notes": "This is the free version of the Plugin \"imageGallery for Bludit\". Find this plugin on Github: https://github.com/novafacile/bludit-plugins"

diff --git a/imagegallery-lite/plugin.php b/imagegallery-lite/plugin.php
@@ -8,9 +8,9 @@
  *  @author     novafacile OÜ
  *  @copyright  2021 by novafacile OÜ
  *  @license    AGPL-3.0
- *  @version    1.2.0
+ *  @version    1.3.0
  *  @see        https://github.com/novafacile/bludit-plugins
- *  @release    2021-06-18
+ *  @release    2021-09-08
  *  @notes      based on PHP Image Gallery novaGallery - https://novagallery.org
  *  This program is distributed in the hope that it will be useful - WITHOUT ANY WARRANTY.
  *
@@ -73,7 +73,7 @@ public function adminBodyEnd(){
     $html .= $this->includeJS('simple-lightbox.min.js');
     $html .= '<script>
               Dropzone.autoDiscover = false;
-              var imageGalleryUpload = new Dropzone("div#imagegallery-lite-upload", {
+              var imageGalleryUpload = new Dropzone("div#imagegallery-upload", {
                 url: "'.$this->domainPath().'ajax/upload.php",
                 params: {
                   "tokenCSRF": "'.$security->getTokenCSRF().'",
@@ -90,10 +90,10 @@ public function adminBodyEnd(){
                 dictCancelUploadConfirmation: "'.$L->get('Cancel upload?').'",
                 dictRemoveFile: "'.$L->get('Remove').'"
               });
-              imageGalleryUpload.on("queuecomplete", function() { $("#imagegallery-lite-reload-button").removeClass("d-none"); });
-              imageGalleryUpload.on("addedfile", function(file) { $("#imagegallery-lite-reload-button").addClass("d-none"); });
+              imageGalleryUpload.on("queuecomplete", function() { $("#imagegallery-reload-button").removeClass("d-none"); });
+              imageGalleryUpload.on("addedfile", function(file) { $("#imagegallery-reload-button").addClass("d-none"); });
               </script>';
-    $html .= $this->includeJS('imagegallery-lite.js');
+    $html .= $this->includeJS('imagegallery.js');
     return $html;
 
   }
@@ -115,27 +115,27 @@ public function form() {
     /*** form start ***/
     $html = "\n";
     $html .= '<style type="text/css">
-            .plugin-form .imagegallery-lite-form label {margin-top: 0 !important; }
-            .plugin-form .imagegallery-lite-form .short-input { max-width: 200px };
+            .plugin-form .imagegallery-form label {margin-top: 0 !important; }
+            .plugin-form .imagegallery-form .short-input { max-width: 200px };
             </style>';
 
     /*** tab navi ***/
-    $html .= '<div class="tab-content imagegallery-lite-form" id="nav-tabContent">';
+    $html .= '<div class="tab-content imagegallery-form" id="nav-tabContent">';
     $html .= '<nav class="mb-3">
       <div class="nav nav-tabs" id="nav-tab" role="tablist">
-        <a class="nav-item nav-link active" id="nav-imagegallery-lite-image-tab" data-toggle="tab" href="#imagegallery-lite-images" role="tab" aria-controls="nav-imagegallery-lite-images" aria-selected="true">'.$L->get('Images').'</a>
-        <a class="nav-item nav-link" id="nav-imagegallery-lite-settings-tab" data-toggle="tab" href="#imagegallery-lite-settings" role="tab" aria-controls="nav-imagegallery-lite-settings" aria-selected="false">'.$L->get('Settings').'</a>
+        <a class="nav-item nav-link active" id="nav-imagegallery-image-tab" data-toggle="tab" href="#imagegallery-images" role="tab" aria-controls="nav-imagegallery-images" aria-selected="true">'.$L->get('Images').'</a>
+        <a class="nav-item nav-link" id="nav-imagegallery-settings-tab" data-toggle="tab" href="#imagegallery-settings" role="tab" aria-controls="nav-imagegallery-settings" aria-selected="false">'.$L->get('Settings').'</a>
       </div>
     </nav>
     ';
 
     /*** Images ***/
-    $html .= '<div class="tab-pane fade show active" id="imagegallery-lite-images" role="tabpanel" aria-labelledby="imagegallery-lite-image-tab">';
+    $html .= '<div class="tab-pane fade show active" id="imagegallery-images" role="tabpanel" aria-labelledby="imagegallery-image-tab">';
 
     // Upload
     $html .= Bootstrap::formTitle(array('title' => '<i class="fa fa-upload"></i> '.$L->get('Upload')));
-    $html .= '<div class="dropzone mb-2" id="imagegallery-lite-upload" style="border-style:dotted;"></div>';
-    $html .= '<div class="w-100 text-center mb-5"><a href="'.$this->pluginUrl().'" class="d-none btn btn-primary px-4" id="imagegallery-lite-reload-button">'.$L->get('Reload page').'</a></div>';
+    $html .= '<div class="dropzone mb-2" id="imagegallery-upload" style="border-style:dotted;"></div>';
+    $html .= '<div class="w-100 text-center mb-5"><a href="'.$this->pluginUrl().'" class="d-none btn btn-primary px-4" id="imagegallery-reload-button">'.$L->get('Reload page').'</a></div>';
 
     // Image List
     $html .= Bootstrap::formTitle(array('title' => '<i class="fa fa-image"></i> '.$L->get('Images')));
@@ -146,7 +146,7 @@ public function form() {
 
 
    /*** Settings ***/
-    $html .= '<div class="tab-pane fade" id="imagegallery-lite-settings" role="tabpanel" aria-labelledby="imagegallery-lite-settings-tab">';
+    $html .= '<div class="tab-pane fade" id="imagegallery-settings" role="tabpanel" aria-labelledby="imagegallery-settings-tab">';
     $html .= Bootstrap::formTitle(array('title' => $L->get('Settings')));
     $html .= '<p>'.$L->get('Settings for ImageGallery Lite').'</p>';
 
@@ -339,11 +339,11 @@ public function siteHead() {
       $html = '';
       $html .= $this->includeCSS('simple-lightbox.min.css');
 
-      $css = THEME_DIR_CSS . 'imagegallery-lite.css';
+      $css = THEME_DIR_CSS . 'imagegallery.css';
       if(file_exists($css)) {
-        $html .= Theme::css('css' . DS . 'imagegallery-lite.css');
+        $html .= Theme::css('css' . DS . 'imagegallery.css');
       } else {
-        $html .= '<link rel="stylesheet" href="' .$this->htmlPath(). 'layout' . DS . 'imagegallery-lite.css">' .PHP_EOL;
+        $html .= '<link rel="stylesheet" href="' .$this->htmlPath(). 'layout' . DS . 'imagegallery.css">' .PHP_EOL;
       }
 
       // custom css settings
@@ -361,7 +361,7 @@ public function siteBodyEnd() {
     if($this->webhook($this->webhookUrl())) {
       $html = '';
       $html .= $this->includeJS('simple-lightbox.min.js');
-      $html .= '<script>var lightbox = new SimpleLightbox(".imagegallery-lite .imagegallery-lite-image .imagegallery-lite-image-link", {});</script>';
+      $html .= '<script>var lightbox = new SimpleLightbox(".imagegallery .imagegallery-image .imagegallery-image-link", {});</script>';
       return $html;
     }
   }
@@ -381,11 +381,11 @@ public function pageEnd(){
     $pathThumbnail = $path.'cache/thumb/';
     $pathLarge = $path.'cache/large/';
 
-    $template = THEME_DIR_PHP . 'imagegallery-lite.php';
+    $template = THEME_DIR_PHP . 'imagegallery.php';
     if(file_exists($template)) {
       include($template);
     } else {
-      include(__DIR__ . DS . 'layout' . DS . 'imagegallery-lite.php');
+      include(__DIR__ . DS . 'layout' . DS . 'imagegallery.php');
     }   
 
   }
@@ -498,12 +498,12 @@ public function outputImages($album){
     $html = '<div class="row w-100 text-left">';
     $i = 0;
     foreach ($images as $image => $timestamp) {
-      $html .= '<div class="col-3 mb-5 text-break imagegallery-lite-images text-center" id="imagegallery-lite-image-'.++$i.'">
+      $html .= '<div class="col-3 mb-5 text-break imagegallery-images text-center" id="imagegallery-image-'.++$i.'">
                   <a href="'.$path.'cache/large/'.$image.'" class="image">
                     <img src="'.$path.'cache/thumb/'.$image.'" style="max-width: 100%;max-height:300px;">
                   </a>
                   <div class="text-left">'.$image.'<br>
-                    <i class="fa fa-trash imagegallery-lite-del-file" style="cursor:pointer"
+                    <i class="fa fa-trash imagegallery-del-file" style="cursor:pointer"
                       data-url="'.$this->domainPath().'" 
                       data-album="'.$album.'" 
                       data-file="'.$image.'"