CKFinder — размеры картинок

CKFinder — размеры картинок

432
ПОДЕЛИТЬСЯ

Возможно, кто-то столкнулся с аналогичной неувязкой и мое решение будет чрезвычайно кстати. Решил поделиться тут своим решением (каламбур).

А вот при настройке файл-менеджера CKFinder столкнулся с обычный с виду задачей: нужно, чтоб при выводе перечня картинок показывались их размеры. Был очень удивлён, когда не нашел ничего подобного в настройках. Незначительно изменил опции, стили и поправил некие баги разработки FCKeditor, но о этом напишу в отдельной теме. Итак , не так давно взял в качестве WYSIWYG для собственной CMS связку FCKeditor + CKFinder.

Что ж, пришлось взяться за «скальпель». Но хотелось отыскать какой-то официальный метод решить задачку. И начались блуждания от Yandex’а к Гуглу и обратно… — тоже ничего. Типа: настройку сокрытую либо ещё что-то, ведь разумеется же, что нужна таковая функция. Естественно: мы — программеры. И всё могём.

Больше времени, естественно, ушло на то, чтоб осознать:
как оно вообщем работает?
куда вносить конфигурации?
как это сделать верно (не нарушая логику программы, а мягко «внедриться» в неё)

В итоге оказалось, что довольно внести маленькое изменение всего в 2 файла:

1. ckeditor/kcfinder/core/browser.php
ckeditor/kcfinder/js/browser/files.js 2.

Потом добавляем в неё два новейших параметра на «выход»: Итак, открываем 1-ый файл: ckeditor/kcfinder/core/browser.php. Находим подходящую функцию: protected function getFiles($dir).

‘width’ => $size[0],
‘height’ => $size[1],
И «заглушку» на вариант, раз это всё же не картина, ведь функция работает для всех файлов:

} else {
$smallThumb = false;
$size[0] = $size[1] = 0;
}
В итоге новенькая функция стала смотреться так:

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;
} 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/".
Также находим подходящую функцию: browser.showFiles. Опосля чего же открываем 2-ой файл: ckeditor/kcfinder/js/browser/files.js. Тут объявляем переменную, где в зависимости от типа файла показываем размеры картинок либо просто размер файла:

‘<span style="color: #669;">’ + file.width + ‘ x ‘ + file.height + ‘</span> (‘ + browser.humanSize(file.size) + ‘)’ : browser.humanSize(file.size); var file_size = (file.width && file.height)?
Остаётся сейчас лишь вставить приобретенное значение в виде текста в два места, заменив имеющееся там. В отображение таблицей:

‘<td class="size">’ + file_size + ‘</td>’ +
И в отображение в виде иконок:

‘<div class="size">’ + file_size + ‘</div>’ +
В итоге функция смотрится так:

_.getFileExtension(file.name) : ‘.’;
if (!icon.length) icon = ‘.’;
icon = ‘themes/’ + browser.theme + ‘/img/files/big/’ + icon + ‘.png’;
}
html += ‘<div class="file"&gtПолностьюlt;div class="thumb" style="background-image:url(» + icon + »)" ></div&gtПолностьюlt;div title="’ + _.htmlData(file.name) + ‘" class="name">’ + _.htmlData(file.name) + ‘</div&gtПолностьюlt;div class="size">’ + file_size + ‘</div&gtПолностьюlt;div class="time" style="color: #966;">’ + file.date + ‘</div&gtПолностьюlt;/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);
}; ‘<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"&gtПолностьюlt;td class="name" style="background-image:url(‘ + icon + ‘)">’ + _.htmlData(file.name) + ‘</td&gtПолностьюlt;td class="size">’ + file_size + ‘</td&gtПолностьюlt;td class="time" style="color: #966;">’ + file.date + ‘</td&gtПолностьюlt;/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? 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)?
Вот так это смотрится у меня:

Надеюсь, сие исследование кому-то понадобится. habrahabr.ru