CKFinder - image sizes

I decided to share my decision here (pun). Probably, someone faced a similar problem and my solution will be very helpful.

So, I recently took as a WYSIWYG for my CMS a bunch of CKEditor + CKFinder . I slightly changed the settings, styles and corrected some of the CKEditor development bugs, but I'll write about this in a separate topic. But when setting up the file manager, CKFinder ran into a simple-looking task: it was necessary that when displaying the list of pictures, their sizes were shown. I was extremely surprised when I did not find anything like this in the settings.

Of course: we are programmers. And all we can. But I wanted to find some official way to solve the problem. Type: the setting is hidden or something else, because it is obvious that such a function is needed. And the wanderings from Yandex to Google and back began ... - also nothing. Well, I had to take on the "scalpel".

More time, of course, it took to understand:

1. How does it work at all?
2. where to make changes?
3. how to do it right (without breaking the logic of the program, but gently “infiltrate” it)

As a result, it turned out that it is enough to make a small change in just 2 files :
')
1. ckeditor / kcfinder / core / browser.php
2. ckeditor / kcfinder / js / browser / files.js

So, open the first file: ckeditor / kcfinder / core / browser.php . Find the desired function: protected function getFiles ($ dir) . Then we add two new parameters to it to “exit”:

'width' => $size[0], 'height' => $size[1], 

And a “stub” in case it is still not a picture, because the function works for all files:

  } else { $smallThumb = false; $size[0] = $size[1] = 0; } 

As a result, the new function began to look like this:

  protected function getFiles($dir) { $thumbDir = "{$this->config['uploadDir']}/{$this->config['thumbsDir']}/$dir"; $dir = "{$this->config['uploadDir']}/$dir"; $return = array(); $files = dir::content($dir, array('types' => "file")); if ($files === false) return $return; foreach ($files as $file) { $size = @getimagesize($file); if (is_array($size) && count($size)) { $thumb_file = "$thumbDir/" . basename($file); if (!is_file($thumb_file)) $this->makeThumb($file, false); $smallThumb = ($size[0] <= $this->config['thumbWidth']) && ($size[1] <= $this->config['thumbHeight']) && in_array($size[2], array(IMAGETYPE_GIF, IMAGETYPE_PNG, IMAGETYPE_JPEG)); } else { $smallThumb = false; $size[0] = $size[1] = 0; } $stat = stat($file); if ($stat === false) continue; $name = basename($file); $ext = file::getExtension($file); $bigIcon = file_exists("themes/{$this->config['theme']}/img/files/big/$ext.png"); $smallIcon = file_exists("themes/{$this->config['theme']}/img/files/small/$ext.png"); $thumb = file_exists("$thumbDir/$name"); $return[] = array( 'name' => stripcslashes($name), 'size' => $stat['size'], 'width' => $size[0], 'height' => $size[1], 'mtime' => $stat['mtime'], 'date' => @strftime($this->dateTimeSmall, $stat['mtime']), 'readable' => is_readable($file), 'writable' => file::isWritable($file), 'bigIcon' => $bigIcon, 'smallIcon' => $smallIcon, 'thumb' => $thumb, 'smallThumb' => $smallThumb ); } return $return; } 

Then open the second file: ckeditor / kcfinder / js / browser / files.js . We also find the necessary function: browser.showFiles . Here we declare a variable, where, depending on the type of file, we show the size of the pictures or just the size of the file:

 var file_size = (file.width && file.height) ? '<span style="color: #669;">' + file.width + ' x ' + file.height + '</span> (' + browser.humanSize(file.size) + ')' : browser.humanSize(file.size); 

It now remains only to insert the resulting value in the form of text in two places, replacing the existing there. In the mapping table:

  '<td class="size">' + file_size + '</td>' + 

And in the display in the form of icons:

  '<div class="size">' + file_size + '</div>' + 

As a result, the function looks like this:

 browser.showFiles = function(callBack, selected) { this.fadeFiles(); setTimeout(function() { var html = ''; $.each(browser.files, function(i, file) { var stamp = []; $.each(file, function(key, val) { stamp[stamp.length] = key + "|" + val; }); stamp = _.md5(stamp.join('|')); //   var file_size = (file.width && file.height) ? '<span style="color: #669;">' + file.width + ' x ' + file.height + '</span> (' + browser.humanSize(file.size) + ')' : browser.humanSize(file.size); if (_.kuki.get('view') == 'list') { if (!i) html += '<table summary="list">'; var icon = _.getFileExtension(file.name); if (file.thumb) icon = '.image'; else if (!icon.length || !file.smallIcon) icon = '.'; icon = 'themes/' + browser.theme + '/img/files/small/' + icon + '.png'; html += '<tr class="file">' + '<td class="name" style="background-image:url(' + icon + ')">' + _.htmlData(file.name) + '</td>' + '<td class="size">' + file_size + '</td>' + '<td class="time" style="color: #966;">' + file.date + '</td>' + '</tr>'; if (i == browser.files.length - 1) html += '</table>'; } else { if (file.thumb) var icon = browser.baseGetData('thumb') + '&file=' + encodeURIComponent(file.name) + '&dir=' + encodeURIComponent(browser.dir) + '&stamp=' + stamp; else if (file.smallThumb) { var icon = browser.uploadURL + '/' + browser.dir + '/' + file.name; icon = _.escapeDirs(icon).replace(/\'/g, "%27"); } else { var icon = file.bigIcon ? _.getFileExtension(file.name) : '.'; if (!icon.length) icon = '.'; icon = 'themes/' + browser.theme + '/img/files/big/' + icon + '.png'; } html += '<div class="file">' + '<div class="thumb" style="background-image:url(\'' + icon + '\')" ></div>' + '<div title="' + _.htmlData(file.name) + '" class="name">' + _.htmlData(file.name) + '</div>' + '<div class="size">' + file_size + '</div>' + '<div class="time" style="color: #966;">' + file.date + '</div>' + '</div>'; } }); $('#files').html('<div>' + html + '</div>'); $.each(browser.files, function(i, file) { var item = $('#files .file').get(i); $(item).data(file); if (_.inArray(file.name, selected) || ((typeof selected != 'undefined') && !selected.push && (file.name == selected)) ) $(item).addClass('selected'); }); $('#files > div').css({opacity:'', filter:''}); if (callBack) callBack(); browser.initFiles(); }, 200); }; 

This is how it looks from me:





I hope this research will be useful to someone.