Add imageWidth and imageHeight parameters

modules/cms/formwidgets/MediaFinder.php

@@ -14,7 +14,7 @@ use Backend\Classes\FormWidgetBase;
  *        label: Some image
  *        type: media
  *        prompt: Click the %s button to find a user
- * 
+ *
  * @package october\cms
  * @author Alexey Bobkov, Samuel Georges
  */
@@ -34,6 +34,16 @@ class MediaFinder extends FormWidgetBase
      */
     public $mode = 'file';
 
+    /**
+     * @var int Preview image width
+     */
+    public $imageWidth = null;
+
+    /**
+     * @var int Preview image height
+     */
+    public $imageHeight = null;
+
     //
     // Object properties
     //
@@ -50,7 +60,9 @@ class MediaFinder extends FormWidgetBase
     {
         $this->fillFromConfig([
             'mode',
-            'prompt'
+            'prompt',
+            'imageWidth',
+            'imageHeight'
         ]);
 
         if ($this->formField->disabled) {
@@ -64,6 +76,7 @@ class MediaFinder extends FormWidgetBase
     public function render()
     {
         $this->prepareVars();
+
         return $this->makePartial('mediafinder');
     }
 
@@ -78,6 +91,8 @@ class MediaFinder extends FormWidgetBase
         $this->vars['field'] = $this->formField;
         $this->vars['prompt'] = str_replace('%s', '<i class="icon-folder"></i>', trans($this->prompt));
         $this->vars['mode'] = $this->mode;
+        $this->vars['imageWidth'] = $this->imageWidth;
+        $this->vars['imageHeight'] = $this->imageHeight;
     }
 
     /**

modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js

@@ -43,9 +43,18 @@
 
         this.$el.one('dispose-control', this.proxy(this.dispose))
 
+        if (this.options.thumbnailWidth > 0) {
+            this.$el.css('maxWidth', this.options.thumbnailWidth + 'px')
+        }
+
+        else if (this.options.thumbnailHeight > 0) {
+            this.$el.css('maxHeight', this.options.thumbnailHeight + 'px')
+        }
+
         // Stop here for preview mode
-        if (this.options.isPreview)
+        if (this.options.isPreview) {
             return
+        }
 
         this.$el.on('click', '.find-button', this.proxy(this.onClickFindButton))
         this.$el.on('click', '.find-remove-button', this.proxy(this.onClickRemoveButton))
@@ -108,7 +117,6 @@
                 this.hide()
             }
         })
-
     }
 
     MediaFinder.prototype.evalIsPopulated = function() {
@@ -128,10 +136,10 @@
 
     var old = $.fn.mediaFinder
 
-    $.fn.mediaFinder = function (option) {
+    $.fn.mediaFinder = function(option) {
         var args = arguments;
 
-        return this.each(function () {
+        return this.each(function() {
             var $this   = $(this)
             var data    = $this.data('oc.mediaFinder')
             var options = $.extend({}, MediaFinder.DEFAULTS, $this.data(), typeof option == 'object' && option)
@@ -142,12 +150,12 @@
 
     $.fn.mediaFinder.Constructor = MediaFinder
 
-    $.fn.mediaFinder.noConflict = function () {
+    $.fn.mediaFinder.noConflict = function() {
         $.fn.mediaFinder = old
         return this
     }
 
-    $(document).render(function (){
+    $(document).render(function() {
         $('[data-control="mediafinder"]').mediaFinder()
     })
 

modules/cms/formwidgets/mediafinder/partials/_image_single.htm

@@ -2,6 +2,8 @@
     id="<?= $this->getId() ?>"
     class="field-mediafinder style-image-single is-image <?= $value ? 'is-populated' : '' ?> <?= $this->previewMode ? 'is-preview' : '' ?>"
     data-control="mediafinder"
+    data-thumbnail-width="<?= $imageWidth ?: '0' ?>"
+    data-thumbnail-height="<?= $imageHeight ?: '0' ?>"
 >
 
     <!-- Find Button -->