add thumnails in filemanager usin liip-bundle

assets/js/admin/components/file-manager/FileIcon.vue

@@ -1,45 +1,77 @@
 <template>
-    <span v-bind:class="getIcon(mime)"></span>
+    <span>
+        <span v-if="!thumb || !thumbnail" v-bind:class="icon"></span>
+        <img v-if="thumb && thumbnail" v-bind:src="thumbnail">
+    </span>
 </template>
 
+<style scoped>
+</style>
+
 <script>
+import Routing from '../../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'
+const routes = require('../../../../../public/js/fos_js_routes.json')
+
+Routing.setRoutingData(routes)
+
 const map = {
-  'fa-file-pdf': ['application/pdf'],
-  'fa-file-image': ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
-  'fa-file-audio': ['application/ogg', 'audio/mp3', 'audio/mpeg', 'audio/wav'],
-  'fa-file-archive': ['application/zip', 'multipart/x-zip', 'application/rar', 'application/x-rar-compressed', 'application/x-zip-compressed', 'application/tar', 'application/x-tar'],
-  'fa-file-alt': ['application/rtf'],
-  'fa-file-excel': ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
-  'fa-file-powerpoint': ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
-  'fa-file-video': ['video/x-msvideo', 'video/mpeg']
+  'fa fa-file-pdf': ['application/pdf'],
+  'fa fa-file-image': ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
+  'fa fa-file-audio': ['application/ogg', 'audio/mp3', 'audio/mpeg', 'audio/wav'],
+  'fa fa-file-archive': ['application/zip', 'multipart/x-zip', 'application/rar', 'application/x-rar-compressed', 'application/x-zip-compressed', 'application/tar', 'application/x-tar'],
+  'fa fa-file-alt': ['application/rtf'],
+  'fa fa-file-excel': ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+  'fa fa-file-powerpoint': ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
+  'fa fa-file-video': ['video/x-msvideo', 'video/mpeg']
 }
 
 export default {
   name: 'FileIcon',
+  data () {
+    return {
+      icon: null,
+      thumbnail: null
+    }
+  },
   methods: {
-    getIcon (mime) {
-      const icons = ['fa']
-      let iconFound = false
-
+    defineIcon () {
       for (const icon in map) {
-        if (map[icon].indexOf(mime) !== -1) {
-          iconFound = true
-          icons.push(icon)
+        if (map[icon].indexOf(this.mime) !== -1) {
+          this.icon = icon
+          return
         }
       }
 
-      if (!iconFound) {
-        icons.push('fa-file')
+      this.icon = 'fa fa-file'
+    },
+    defineThumbnail () {
+      if (['image/png', 'image/jpg', 'image/jpeg', 'image/gif'].indexOf(this.mime) === -1) {
+        return
       }
 
-      return icons
+      this.thumbnail = Routing.generate('liip_imagine_filter', {
+        filter: 'file_manager_thumbnail_filter',
+        path: this.path
+      })
     }
   },
   props: {
     mime: {
       type: String,
       required: true
+    },
+    path: {
+      type: String,
+      required: true
+    },
+    thumb: {
+      type: Boolean,
+      required: true
     }
+  },
+  mounted () {
+    this.defineIcon()
+    this.defineThumbnail()
   }
 }
 </script>

assets/js/admin/components/file-manager/FileManager.vue

@@ -20,7 +20,7 @@ export default {
     context: {
       type: String,
       required: true,
-      default: 'crud',
+      default: 'crud'
     }
   },
   components: {

assets/js/admin/components/file-manager/Files.vue

@@ -65,7 +65,7 @@
                     <div class="card-text">
                         <div class="text-center">
                             <div class="display-4 text-muted">
-                                <FileIcon v-bind:mime="item.mime" />
+                                <FileIcon v-bind:mime="item.mime" v-bind:path="item.webPath" v-bind:thumb="true" />
                             </div>
 
                             <div v-if="item.locked" class="file-manager-grid-lock">
@@ -110,7 +110,7 @@
                 </tr>
                 <tr v-for="item in files">
                     <td width="10">
-                        <FileIcon v-bind:mime="item.mime" />
+                        <FileIcon v-bind:mime="item.mime" v-bind:path="item.webPath" v-bind:thumb="false" />
                     </td>
                     <td v-on:click="modalUrl = generateInfoLink(item, null, context)" v-bind:data-modal="generateInfoLink(item, null, context)">
                         <div v-if="item.locked" class="float-right">
@@ -191,7 +191,7 @@ export default {
       files: [],
       parent: null,
       modalUrl: null,
-      ajax: 0,
+      ajax: 0
     }
   },
   methods: {
@@ -261,7 +261,7 @@ export default {
       axios.get(Routing.generate('admin_file_manager_api_directory', {
         directory: that.directory,
         context: that.context,
-        ajax: this.ajax,
+        ajax: this.ajax
       }))
         .then((response) => {
           that.buildBreadcrum(response.data.breadcrumb)

composer.json

@@ -19,6 +19,7 @@
         "friendsofsymfony/jsrouting-bundle": "^2.7",
         "knplabs/doctrine-behaviors": "^2.2",
         "knplabs/knp-paginator-bundle": "^5.4",
+        "liip/imagine-bundle": "^2.6",
         "phpdocumentor/reflection-docblock": "^5.2",
         "scheb/2fa-google-authenticator": "^5.7",
         "scheb/2fa-qr-code": "^5.7",

config/packages/fos_js_routing.yaml

@@ -0,0 +1,3 @@
+fos_js_routing:
+    routes_to_expose:
+        - liip_imagine_filter

config/packages/liip_imagine.yaml

@@ -0,0 +1,9 @@
+# See dos how to configure the bundle: https://symfony.com/doc/current/bundles/LiipImagineBundle/basic-usage.html
+liip_imagine:
+    # valid drivers options include "gd" or "gmagick" or "imagick"
+    driver: "imagick"
+    filter_sets:
+        file_manager_thumbnail_filter:
+            filters:
+                downscale:
+                    max: [120, 120]

core/FileManager/FsFileManager.php

@@ -77,6 +77,7 @@ class FsFileManager
             $data['directories'][] = [
                 'basename' => $file->getBasename(),
                 'path' => $directory.'/'.$file->getBasename(),
+                'webPath' => $this->pathUri.'/'.$directory.'/'.$file->getBasename(),
                 'locked' => $this->isLocked($directory.'/'.$file->getBasename()),
                 'mime' => null,
             ];
@@ -89,6 +90,7 @@ class FsFileManager
             $data['files'][] = [
                 'basename' => $file->getBasename(),
                 'path' => $directory,
+                'webPath' => $this->pathUri.'/'.$directory.'/'.$file->getBasename(),
                 'locked' => $this->isLocked($directory.'/'.$file->getBasename()),
                 'mime' => mime_content_type($file->getRealPath()),
             ];

core/Resources/views/file_manager/info.html.twig

@@ -131,8 +131,24 @@
                 {% endif %}
             </div>
         </div>
-        <div class="modal-footer {% if context != 'tinymce' %}justify-content-between{% endif %}">
+        <div class="modal-footer justify-content-between">
             {% if context == 'tinymce' %}
+                {% if not isLocked %}
+                    {% if splInfo.isDir %}
+                        <button form="form-file-delete" class="btn btn-primary" data-modal="{{ path('admin_file_manager_directory_rename', {file: splInfo.relativePathname, ajax: ajax}) }}">
+                            {{ 'Rename'|trans }}
+                        </button>
+                    {% else %}
+                        <span></span>
+                    {% endif %}
+                {% else %}
+                    <div>
+                        <span class="btn btn-light">
+                            <span class="fa fa-lock"></span>
+                        </span>
+                    </div>
+                {% endif %}
+
                 <div>
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ 'Close'|trans }}</button>
 
@@ -154,7 +170,6 @@
                                 {{ 'Rename'|trans }}
                             </button>
                         {% endif %}
-
                     {% else %}
                         <span class="btn btn-light">
                             <span class="fa fa-lock"></span>

symfony.lock

@@ -123,6 +123,9 @@
     "gedmo/doctrine-extensions": {
         "version": "v3.0.3"
     },
+    "imagine/imagine": {
+        "version": "1.2.4"
+    },
     "khanamiryan/qrcode-detector-decoder": {
         "version": "1.0.4"
     },
@@ -144,6 +147,19 @@
     "laminas/laminas-zendframework-bridge": {
         "version": "1.2.0"
     },
+    "liip/imagine-bundle": {
+        "version": "1.8",
+        "recipe": {
+            "repo": "github.com/symfony/recipes-contrib",
+            "branch": "master",
+            "version": "1.8",
+            "ref": "5a5bdc2d0e2533ed6935d5ae562f2b318a8fc1ee"
+        },
+        "files": [
+            "config/packages/liip_imagine.yaml",
+            "config/routes/liip_imagine.yaml"
+        ]
+    },
     "monolog/monolog": {
         "version": "2.2.0"
     },