Плагин ResizeImageOnUpload для MODX Revo — Компания «КреатАйТи»


Плагин ResizeImageOnUpload для MODX Revo

Опубликовано: 08.10.2012 | MODX, Трюки, Дополнение, Работа с изображениями, Плагины

Этот небольшой плагин может оказаться очень полезным для вашего сайта и сильно упростить работу менеджерам сайта.



Плагин позволяет автоматически ресайзить изображения до нужного размера при загрузке в определенные каталоги на сервере.

Проблема

В определенном разделе сайта выводится контент, в котором очень важно, что бы изображения, составляющие часть этого контента, были строго определенного размера. Одни из самых очевидных примеров — это слайдеры, баннеры или галлереи.

Очень хорошо, если администратор сайта технически подкован и владеет Photoshop или иным графическим редактором и может обработать изображение перед загрузкой на сайт должным образом: задать размеры, установить подходящую степень сжатия для jpg файлов. Идеальный администратор! Но, к сожалению, не очень часто встречается и в итоге мы видим картину, когда на сайт загружены фотографии размером в несколько мегапикселей и весом значительно больше мегабайта.

Итог — сайт занимает много дискового пространства на сервере, требует много ресурсов процессора для генерации превью этих картинок, а посетители по несколько минут ждут загрузки сайта.

А для разработчика сайта это все выливается в то, что он вынужден тратить время не только на инструктаж по работе с системой управления сайтом, но и дополнительно рассказывать об особенностях работы с графическими редакторами, а также писать на бумажке желаемые размеры картинок для разных разделов сайта.

Цель

Итак, наша цель: при загрузке изображений в определенные каталоги на сервере необходимо автоматически ресайзить загруженные изображения до нужных размеров, причем делать это незаметно для администратора сайта.

Создание плагина

MODX Revolution имеет систему плагинов, с помощью которых можно решать самые разные задачи. Попробуем справиться и с нашей проблемой.

Создадим новый плагин и назовем его ResizeImageOnUpload:

На вкладке Системные события отметим галочкой строку с событием OnFileManagerUpload.

Это событие будет вызываться каждый раз, когда происходит загрузка файлов через менеджер файлов MODX.

Исходный код плагина

Обратите внимание, что плагин работает в MODX версии старше 2.2 и полностью поддерживает "Источники файлов".

  1. <?php
  2. // проверяем нужное событие
  3. if ($modx->event->name != 'OnFileManagerUpload') {return;}
  4. // подключаем phpthumb
  5. require_once MODX_CORE_PATH.'model/phpthumb/phpthumb.class.php';
  6. // настройки плагина
  7. $config = array(
  8. 'assets/upload/folder1/' => array(
  9. 'src' => array('w' => 800,'h' => 600,'zc' => 1,'bg' => '#fff','q' => 90),
  10. ),
  11. 'assets/upload/folder2/' => array(
  12. 'src' => array('w' => 400,'h' => 300,'zc' => 1,'bg' => '#fff','q' => 90),
  13. 'thumb' =>array('w' => 200,'h' => 150,'zc' => 1,'bg' => '#fff','q' => 70),
  14. ),
  15. );
  16. // параметры загружаемого файла
  17. $file = $modx->event->params['files']['file'];
  18. $directory = $modx->event->params['directory'];
  19. // получаем media source
  20. $ms = $modx->event->params['source'];
  21. if($ms == null){
  22. return;
  23. }
  24. // настройки media source
  25. $msProperties = $ms->get('properties');
  26. $directory = $msProperties['basePath']['value'].$directory;
  27. // на всякий случай проверяем наличие // и заменяем на /
  28. $directory = str_replace('//', '/', $directory);
  29. // смотрим, что при загрузке не возникло ошибок
  30. if ($file['error'] != 0) {
  31. return;
  32. }
  33. $name = $file['name'];
  34. $extensions = explode(',', $modx->getOption('upload_images'));
  35. // проверям, что наша категория задана в настройках плагина
  36. if (array_key_exists($directory, $config)) {
  37. $config = $config[$directory];
  38. }
  39. else {
  40. return;
  41. }
  42. // путь к файлу, имя файла, расширение
  43. $filename = MODX_BASE_PATH.$directory.$name;
  44. $def_fn = pathinfo($name, PATHINFO_FILENAME);
  45. $ext = pathinfo($name, PATHINFO_EXTENSION);
  46. // проверяем, что расширение файла задано в настройках MODX, как изображение
  47. if (in_array($ext, $extensions)) {
  48. $sizes = getimagesize($filename);
  49. $format = substr($sizes['mime'],6);
  50. // бежим по всем полям массива с конфигом
  51. foreach($config as $imgKey =>$imgConfig){
  52. $options = '';
  53. if($imgKey == 'src'){
  54. // для ключа src имя файла совпадает с исходным
  55. $imgName = $filename;
  56. }
  57. else{
  58. // формируем имя файла
  59. //$imgName = MODX_BASE_PATH.$directory.$def_fn.'.'.$ext.'.'.$imgKey.'.'.$ext;
  60. $imgName = MODX_BASE_PATH.$directory.$def_fn.'_'.$imgKey.'.'.$ext;
  61. }
  62. // создаем объект phpThumb..
  63. $phpThumb = new phpThumb();
  64. // ..и задаем параметры
  65. $phpThumb->setSourceFilename($filename);
  66. foreach ($imgConfig as $k => $v) {
  67. $phpThumb->setParameter($k, $v);
  68. }
  69. // генерируем файл
  70. if ($phpThumb->GenerateThumbnail()) {
  71. if ($phpThumb->RenderToFile($imgName)) {
  72. // устанавливаем права на файл, это опционально, зависит от сервера
  73. chmod($imgName, 0666);
  74. }
  75. }
  76. }
  77. }

Настройка плагина

В начале плагина в массиве $config заданы настройки.

Ключ этого массива - путь к каталогу на сервере, например assets/upload/folder1/. Обратите внимание, что путь без / в начале. 

Значение представляет собой также массив. В нем должен быть минимум 1 элемент с ключем src, это настройки для загружаемого изображения.

Настройки идентичны настройкам phpthumb, вы можете задать любые, которые доступны для этого сниппета. 

Помимо ключа src вы можете создать настройки с другим ключем, в примере выше это thumb. Каждый ключ позволит сгенерировать еще одно изображение в этой же папке с именем "имя_ключ.расширение".

Пример настроек

Массив $config с одного из сайтов:

  1. $config = array(
  2. 'assets/images/offers/recommend/' => array(
  3. 'src' => array('w' => 200,'h' => 100,'zc' => 1),
  4. ),
  5. 'assets/images/offers/world/' => array(
  6. 'src' => array('w' => 200,'h' => 100,'zc' => 1),
  7. 'thumb' =>array('w' => 100,'h' => 50,'zc' => 1,'q' => 90),
  8. ),
  9. );

Для демонстрации загрузим по очереди файл myimage.jpg в оба этих каталога и посмотрим, что получится.

  • для каталога assets/images/offers/recommend/ происходит ресайз изображения до 200x100 точек, с автоматической обрезкой по краям (zc=1).
  • для каталога 'assets/images/offers/world/ будет происходить ресайз изображения до 200x100 точек, с автоматической обрезкой по краям (zc=1), а также создание еще 1 изображение изображения размером 100x50 точек, с автоматической обрезкой по краям (zc=1). В случае если исходный файл был в формете jpg, он будет сохранен с с качеством сжатия 70.

Так это выглядит в файловой системе:

 

В результате

В результате, после установки плагина, вы можете гибко задавать размер для вновь загружаемых изображений, что позволит экономить дисковое пространство, ресурсы сервера, и ускорить загрузку сайта.

Кроме того, администраторы сайта будут вам благодарны, так как объем работы для них может сильно уменьшиться.

P.S. Идея плагина была взята у Василия Наумкина http://bezumkin.ru/blog/2012/08/04/resizeonupload/ , плагин был существенно переработан, добавлена поддержка источников файлов, изменен механизм ресайза изображений.

 
 
 
 
 
(18)

Комментарии

 
Темы
Авторы
 
 
 
 
 
 
 
 
Василий Наумкин 2012.10.09 19:44
Ссылочку на исходник забыли http://bezumkin.ru/blog/2012/08/04/resizeonupload/



У вас версия, конечно, улучшенная и доработанная, но растет она явно из моей.
 

 

 
 
 
 
 
Алексей Наумов » Василий Наумкин 2012.10.09 20:18
Ссылку добавили в конце статьи.
 

 

1
 
 
 
 
Александр Наумов 2012.11.07 06:56
Спасибо, нужный плагин!
 

 

 
 
 
 
 
Ксения Радионова 2012.12.16 12:46
Превосходный плагин, который не просто упрощает работу с контентом, а снимает камень с плеч.
 

 

 
 
 
 
 
Алексей Наумов » Ксения Радионова 2012.12.28 14:45
Спасибо!
 

 

 
 
 
 
 
Владимир Доморецкий 2013.02.20 18:23
А если у менеджера 20 папок, куда ему нужно заливать изображения? При том, что для своего удобства, он может еще и подпапок наделать, никто ж ему не запретит. Что в таком случае делать? Описывать одну и ту же конфигурацию к 20 папкам?
 

 

 
 
 
 
 
Владимир Доморецкий » Владимир Доморецкий 2013.02.20 20:42
Ладно) Не буду мучать, добавлю решение:

// на всякий случай проверяем наличие // и заменяем на /

$directory = str_replace('//', '/', $directory);

// настройки плагина

$config = array(

$directory => array(

'src' => array('w' => 1280,'h' => 1024,'zc' => 0,'q' => 80, 'fltr' => 'wmi|/watermark/water_image.png|BR|50|5'),

),

);
 

 

 
 
 
 
 
setest 2013.03.27 20:03
Народ, можете сюда вписать пример вывода $ms = $modx->event->params['source']; у меня modx 2.2.4 на вывод идет ВСЕ, и никаких источников. Ниче не понимаю.
 

 

 
 
 
 
 
Setest 2013.03.28 14:15
Проверил на 2.2.6 там все нормально, ответ приходит правильный.
 

 

 
 
 
 
 
Setest » Setest 2013.03.28 23:01
Отвечаю сам себе и тем кто читает, обновился c 2.2.4 на 2.2.6 все стало нормуль, source появился в параметрах события. Делаю вывод: минимальная версия на данный момент для работы этого плагина 2.2.6
 

 

 
 
 
 
 
Setest 2013.04.09 14:24
Выложил свой вариант http://community.modx-cms.ru/blog/addons/10219.html
 

 

 
 
 
 
 
Владимир Обухов 2013.06.01 01:31
Как подставить в имя результирующего файла ID документа, который редактируешь? Имеется ввиду в случае, если при редактировании документа выбираешь картинку через дополнительное TV-поле и она загружается через этот плагин.
 

 

 
 
 
 
 
Владимир Обухов » Владимир Обухов 2013.06.01 04:52
// формируем имя файла

if (isset($modx->resource->get('id'))) {

$resourceId = $modx->resource->get('id');

$imgName = MODX_BASE_PATH.$directory.$def_fn.'_'.$resourceId.'_'.$imgKey.'.'.$ext;

} else {

$imgName = MODX_BASE_PATH.$directory.$def_fn.'_'.$imgKey.'.'.$ext;

}



При загрузке картинки загрузчик выдает "Ошибка загрузки". Это из-за "$modx->resource->get('id')". Как же тогда подставить ID ресурса?
 

 

 
 
 
 
 
Дмитрий Иванов 2013.06.30 04:29
Плагин будет применяться автоматически?

Я создал плагин, прописал путь в конфигурации. Но при загрузке изображения через TV параметр оно просто загружается, но не ресайзится.
 

 

 
 
 
 
 
Дмитрий Иванов » Дмитрий Иванов 2013.06.30 04:36
В логе такая ошибка:

[2013-06-29 21:31:07] (ERROR @ /connectors/system/phpthumb.php) Error outputting thumbnail:

OutputThumbnail() failed because !is_resource($this->gdimg_output) in file "phpthumb.class.php" on line 557
 

 

 
 
 
 
 
Алексей Наумов » Дмитрий Иванов 2013.07.01 11:48
Здравствуйте!

Вы на первый взгляд сделали все правильно. Проверьте все еще раз. А эта ошибка действительно периодически появляется в phpthumb, мне кажется это именно его проблема.
 

 

 
 
 
 
 
Вечканов Андрей 2013.08.01 13:00
Добрый день! Скажите, пожалуйста, как сделать чтобы плагин работал при Multi-upload в компоненте Gallery?
 

 

 
 
 
 
 
Алексей Наумов » Вечканов Андрей 2013.08.01 13:18
Плагин не работает с Gallery.



Поэтому вам сюда: http://www.createit.ru/blog/modx/2012/caching-preview-images-in-gallery/

но этот способ требует вмешательства в исходники, что чревато проблемами при обновлении. Либо используйте ms2Gallery
 

 

 
 
 
 
 
 
  
 

Компания «КреатАйТи»

© ООО «КреатАйТи», 2006 — 2014

Контакты

Тел: (4872) 79-24-00

E-mail: info@createit.ru

ICQ: 759-401

Skype: alexey.createit

Поиск по сайту

 

 

 
 

http://www.createit.ru/blog/modx/2012/plugin-resizeimageonupload-modx-revo/

Губарь Маргарита Александровна