Added info metadata button for preview images. Fixed preview of images

CHANGELOG.md

@@ -4,6 +4,7 @@
 1. [](#new)
     * New `Admin::getPageMedia()` static method that can be used in blueprints
     * Added a new `mediapicker` form field which allows to select a media from any page [#1125](https://github.com/getgrav/grav-plugin-admin/pull/1125)
+    * Added info metadata button for images to view EXIF and other useful details about an image
 1. [](#improved)
     * Pass original image filename via the `AdminController::taskListedia()` task
     * Various form styling improvements

admin.php

@@ -676,6 +676,7 @@ protected function initializeAdmin()
             'DROP_FILES_HERE_TO_UPLOAD',
             'DELETE',
             'INSERT',
+            'METADATA',
             'VIEW',
             'UNDO',
             'REDO',

languages/en.yaml

@@ -549,6 +549,7 @@ PLUGIN_ADMIN:
   CANNOT_ADD_FILES_PAGE_NOT_SAVED: "NOTE: Page must be saved before you can upload files to it."
   DROP_FILES_HERE_TO_UPLOAD: "Drop your files here or <strong>click in this area</strong>"
   INSERT: "Insert"
+  METADATA: "Metadata"
   UNDO: "Undo"
   REDO: "Redo"
   HEADERS: "Headers"

themes/grav/app/forms/fields/files.js

@@ -64,6 +64,7 @@ const DropzoneMediaConfig = {
           <div class="dz-error-mark"><span>✘</span></div>
           <div class="dz-error-message"><span data-dz-errormessage></span></div>
           <a class="dz-remove" title="${translations.PLUGIN_ADMIN.DELETE}" href="javascript:undefined;" data-dz-remove>${translations.PLUGIN_ADMIN.DELETE}</a>
+          <a class="dz-metadata" title="${translations.PLUGIN_ADMIN.METADATA}" href="#" target="_blank" data-dz-metadata>${translations.PLUGIN_ADMIN.METADATA}</a>
           <a class="dz-view" title="${translations.PLUGIN_ADMIN.VIEW}" href="#" target="_blank" data-dz-view>${translations.PLUGIN_ADMIN.VIEW}</a>
         </div>`.trim()
 };

themes/grav/app/pages/page/media.js

@@ -16,6 +16,7 @@ const previewTemplate = `
       <div class="dz-error-mark"><span>✘</span></div>
       <div class="dz-error-message"><span data-dz-errormessage></span></div>
       <a class="dz-remove" title="${translations.PLUGIN_ADMIN.DELETE}" href="javascript:undefined;" data-dz-remove>${translations.PLUGIN_ADMIN.DELETE}</a>
+      <a class="dz-metadata" title="${translations.PLUGIN_ADMIN.METADATA}" href="#" target="_blank" data-dz-metadata>${translations.PLUGIN_ADMIN.METADATA}</a>
       <a class="dz-view" title="${translations.PLUGIN_ADMIN.VIEW}" href="#" target="_blank" data-dz-view>${translations.PLUGIN_ADMIN.VIEW}</a>
       <a class="dz-insert" title="${translations.PLUGIN_ADMIN.INSERT}" href="javascript:undefined;" data-dz-insert>${translations.PLUGIN_ADMIN.INSERT}</a>
     </div>`.trim();
@@ -100,8 +101,34 @@ export default class PageMedia extends FilesField {
             let file = target.parent('.dz-preview').find('.dz-filename');
             let filename = encodeURI(file.text());
             let URL = target.closest('[data-media-path]').data('media-path');
+            let original = this.dropzone.files.filter((file) => file.name === filename).shift().extras.original;
 
-            target.attr('href', `${URL}/${filename}`);
+            target.attr('href', `${URL}/${original}`);
+        });
+
+        this.container.delegate('[data-dz-metadata]', 'click', (e) => {
+            e.preventDefault();
+            const target = $(e.currentTarget);
+            const file = target.parent('.dz-preview').find('.dz-filename');
+            const filename = encodeURI(file.text());
+
+            let fileObj = this.dropzone.files.filter((file) => file.name === filename).shift() || {};
+            if (!fileObj.extras) { return false; }
+
+            fileObj = fileObj.extras;
+
+            const modal_element = $('body').find('[data-remodal-id="metadata"]');
+            const modal = $.remodal.lookup[modal_element.data('remodal')];
+
+            modal_element.find('h1 strong').html(filename);
+            modal_element.find('.meta-preview').html(`<img src="${fileObj.url}" />`);
+
+            const container = modal_element.find('.meta-content').html('<ul />').find('ul');
+            Object.keys(fileObj.metadata).forEach((meta) => {
+                container.append(`<li><strong>${meta}</strong>: ${fileObj.metadata[meta]}</li>`);
+            });
+
+            modal.open();
         });
 
         this.container.delegate('.dz-preview', 'dragstart', (e) => {