PageMedia can now be collapsed and thumbnails previewed smaller, in order to save room on the page. Selection will be remembered.

CHANGELOG.md

@@ -3,6 +3,7 @@
 
 1. [](#new)
    * Require **Grav 1.7.30**
+   * PageMedia can now be collapsed and thumbnails previewed smaller, in order to save room on the page. Selection will be remembered.
 2. [](#improved)
    * Updated js dependencies
 3. [](#bugfix)

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

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import Cookies from '../../utils/cookies.js';
 import request from '../../utils/request';
 import FilesField, { UriToMarkdown } from '../../forms/fields/files';
 import { config, translations } from 'grav-config';
@@ -90,6 +91,13 @@ export default class PageMedia extends FilesField {
                 this.dropzone.options.thumbnail.call(this.dropzone, mock, data.url);
             });
 
+            const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
+
+            if (status.width) {
+              const input = this.container.closest('.pagemedia-field').find('.media-resizer');
+              updateMediaSizes(input, status.width, false);
+            }
+
             this.container.find('.dz-preview').prop('draggable', 'true');
         });
     }
@@ -113,6 +121,13 @@ export default class PageMedia extends FilesField {
         }
 
         // accepted
+        const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
+
+        if (status.width) {
+          const input = this.container.closest('.pagemedia-field').find('.media-resizer');
+          updateMediaSizes(input, status.width, false);
+        }
+
         $('.dz-preview').prop('draggable', 'true');
     }
 
@@ -204,4 +219,61 @@ export default class PageMedia extends FilesField {
     }
 }
 
+export const updateMediaSizes = (input, width, store = true) => {
+  const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
+
+  const height = 150 * width / 200;
+  const media = input.closest('.pagemedia-field').find('.dz-details, [data-dz-thumbnail]');
+
+  media.css({ width, height });
+
+  if (store) {
+    const data = Object.assign({}, status, { width });
+    Cookies.set('grav-admin-pagemedia', JSON.stringify(data), { expires: Infinity });
+  }
+};
+
+export const updateMediaCollapseStatus = (element, store = true) => {
+  const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
+
+  element = $(element);
+  const icon = element.find('i.fa');
+  const container = element.closest('.pagemedia-field');
+  const panel = container.find('.form-data');
+  const slider = container.find('.media-resizer').parent();
+
+  const isCollapsed = !icon.hasClass('fa-chevron-down');
+  const collapsed = !isCollapsed;
+
+  icon.removeClass('fa-chevron-down fa-chevron-right').addClass(isCollapsed ? 'fa-chevron-down' : 'fa-chevron-right');
+  slider[isCollapsed ? 'removeClass' : 'addClass']('hidden');
+  panel[isCollapsed ? 'slideDown' : 'slideUp']();
+
+  if (store) {
+    const data = Object.assign({}, status, { collapsed });
+    Cookies.set('grav-admin-pagemedia', JSON.stringify(data), { expires: Infinity });
+  }
+};
+
+$(document).on('input', '.media-resizer', (event) => {
+  const target = $(event.currentTarget);
+  const width = target.val();
+
+  updateMediaSizes(target, width);
+});
+
+$(document).on('click', '.media-collapser', (event) => {
+  updateMediaCollapseStatus(event.currentTarget);
+});
+
+$(document).ready(() => {
+  const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}');
+  if (status.width) {
+    $('.media-resizer').each((index, input) => {
+      input = $(input);
+      updateMediaSizes(input, status.width, false);
+    });
+  }
+});
+
 export let Instance = new PageMedia();

themes/grav/css-compiled/template.css

@@ -4101,6 +4101,19 @@ html.remodal-is-locked {
   padding-left: 20px; }
 
 /* The MIT License */
+.pagemedia-field .form-label {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 1.5rem;
+  align-items: center; }
+  .pagemedia-field .form-label label {
+    cursor: pointer;
+    flex: 1; }
+
+.pagemedia-field input[type="range"]::-webkit-slider-runnable-track {
+  background: inherit !important;
+  border: none !important; }
+
 .dropzone {
   position: relative;
   border-radius: 4px;

themes/grav/scss/template/_dropzone.scss

@@ -3,6 +3,27 @@
 $preview-width: 200px;
 $preview-height: 150px;
 
+.pagemedia-field  {
+  .form-label {
+    display: flex;
+    justify-content: space-between;
+    margin-right: 1.5rem;
+    align-items: center;
+
+    label {
+      cursor: pointer;
+      flex: 1;
+    }
+  }
+
+  input[type="range"] {
+    &::-webkit-slider-runnable-track {
+      background: inherit !important;
+      border: none !important;
+    }
+  }
+}
+
 .dropzone {
     position: relative;
     border-radius: $form-border-radius;
@@ -200,7 +221,7 @@ $preview-height: 150px;
                 content: '\f00d';
             }
         }
-        
+
         .dz-metadata {
             top: 49px;
             &:after {

themes/grav/templates/forms/fields/pagemedia/pagemedia.html.twig

@@ -26,12 +26,19 @@
     {% set media_path = url(context.relativePagePath) %}
     {% set media_uri = context.mediaUri() %}
     {% set dropzone_settings = { maxFilesize: form_max_filesize }|merge(pagemedia_settings) %}
+    {% set pageMediaStore = get_cookie('grav-admin-pagemedia')|default('{"width":200,"collapsed":false}')|json_decode %}
 
-    <div class="form-field grid vertical {% if field.classes is defined %}{{ field.classes }}{% endif %}">
+    <div class="pagemedia-field form-field grid vertical {% if field.classes is defined %}{{ field.classes }}{% endif %}">
     <div class="form-label">
-        <label>{{ field.label|t }}</label>
+        <label class="media-collapser">
+          <i class="fa fa-fw small fa-chevron-{{ pageMediaStore.collapsed ? 'right' : 'down' }}"></i>
+          {{ field.label|t }} ({{ admin.page.media|length }})
+        </label>
+        <div class="{{ pageMediaStore.collapsed ? 'hidden' : '' }}">
+          <input type="range" min="70" step="10" max="200" value="{{ pageMediaStore.width }}" class="media-resizer">
+        </div>
     </div>
-    <div class="form-data form-uploads-wrapper">
+    <div class="form-data form-uploads-wrapper" style="{{ pageMediaStore.collapsed ? 'display: none;' : '' }}">
         <div id="grav-dropzone"
              class="dropzone"
              data-media-url="{{ (base_url ~ media_url)|e('html_attr') }}"