
CKFinder - image sizes
I decided to share my decision here (pun intended). Probably someone ran into a similar problem and my solution would 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 fixed some bugs of the CKEditor development, but I will 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 a 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 everything is possible. But I wanted to find some official way to solve the problem. Type: hidden setting or something else, because it is obvious that such a function is needed. And the wanderings began from Yandex to Google and vice versa ... - also nothing. Well, I had to take on the scalpel.
Of course, it took more time to understand:
As a result, it turned out that it was enough to make a small change in just 2 files :
1. ckeditor / kcfinder / core / browser.php
2. ckeditor / kcfinder / js / browser / files.js
So, we open the first file: ckeditor / kcfinder / core / browser.php . We find the desired function: protected function getFiles ($ dir) . Then we add two new parameters to the “exit” into it:
And a "stub" in case it is still not a picture, because the function works for all files:
As a result, the new function began to look like this:
After that we open the second file: ckeditor / kcfinder / js / browser / files.js . We also find the desired 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 file size:
All that remains now is to insert the resulting value in the form of text in two places, replacing the existing one. In the display table:
And in display as icons:
As a result, the function looks like this:
This is how it looks with me: I hope this research is useful to someone.


So, I recently took as a WYSIWYG for my CMS a bunch of CKEditor + CKFinder . I slightly changed the settings, styles and fixed some bugs of the CKEditor development, but I will 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 a 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 everything is possible. But I wanted to find some official way to solve the problem. Type: hidden setting or something else, because it is obvious that such a function is needed. And the wanderings began from Yandex to Google and vice versa ... - also nothing. Well, I had to take on the scalpel.
Of course, it took more time to understand:
- how does it even work?
- where to make changes?
- how to do it right (without violating the program logic, but gently “infiltrate” it)
As a result, it turned out that it was enough to make a small change in just 2 files :
1. ckeditor / kcfinder / core / browser.php
2. ckeditor / kcfinder / js / browser / files.js
So, we open the first file: ckeditor / kcfinder / core / browser.php . We find the desired function: protected function getFiles ($ dir) . Then we add two new parameters to the “exit” into it:
'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;
}
After that we open the second file: ckeditor / kcfinder / js / browser / files.js . We also find the desired 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 file size:
var file_size = (file.width && file.height) ? '' + file.width + ' x ' + file.height + ' (' + browser.humanSize(file.size) + ')' : browser.humanSize(file.size);
All that remains now is to insert the resulting value in the form of text in two places, replacing the existing one. In the display table:
'' + file_size + '' +
And in display as icons:
'' + file_size + '' +
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) ? '' + file.width + ' x ' + file.height + ' (' + browser.humanSize(file.size) + ')' : browser.humanSize(file.size);
if (_.kuki.get('view') == 'list') {
if (!i) html += '';
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 += '' +
'' +
'' +
'' +
'';
if (i == browser.files.length - 1) html += '' + _.htmlData(file.name) + ' ' + file_size + ' ' + file.date + '
';
} 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 += '' +
'' +
'' + _.htmlData(file.name) + '' +
'' + file_size + '' +
'' + file.date + '' +
'';
}
});
$('#files').html('' + html + '');
$.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 with me: I hope this research is useful to someone.