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:

1. how does it even work?
2. where to make changes?
3. 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.