easyComm - дополнительное поле Изображение

UPD 22.04.2021. Эта публикация устарела!
С версии 1.11.0-pl компонент сразу поддерживает вложение файлов: modx.pro/components/21775

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

По результатам работы — небольшая инструкция, как этого добиться:


Шаг 0. Прежде всего, необходимо установить свежую версию easyComm, требуемый функционал появился с версии 1.2.0 (прим.: в версии 1.5.0 добавлена поддержка media source, отличного от default).

В этой версии было добавлено 2 новшества:
1. События на создание, редактирование, публикацию, удаление сообщений, что бы вы могли писать свои плагины.
2. Пара дополнительных функций-утилит для работы с полями-изображениями.

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

Шаг 1. Добавляем согласно инструкции docs.modx.pro/components/easycomm/plugins-and-customization одно или несколько дополнительных полей, у меня поле будет называться photo. При этом код js файла должен быть примерно таким:

easyComm.plugin.myplugin = {
      getFields: function(config) {
            return {
                  photo: {
                        // специальный x-type
                        xtype: 'ec-image-field',
                        fieldLabel: _('ec_message_photo'),
                        anchor: '99%',
			// указываем default_media_source или id нужного, например 2
                        source: MODx.config.default_media_source
                  }
            }
      }
      ,getColumns: function() {
            return {
                  photo: {
                        width:50, 
                        sortable:true, 
                        name: 'photo',
                        // специальный рендер
                        renderer: easyComm.utils.renderImage,
			// указываем default_media_source или id нужного, например 2
                        source: MODx.config.default_media_source
}
            }
      }
};

здесь нужно обратить внимание на «xtype=ec-image-field», и на «renderer: easyComm.utils.renderImage», это то, про что упоминалось в Шаге 0, п.1. Первый — специальный тип ввода, который позволяет использовать файловый менеджер для выбора изображений и поддерживает превью, а второй — отображение картинки в списке.

Шаг 2. Создать плагин, повесить его на событие OnEcMessageSave, код плагина:

<?php
$conf_upload_dir = 'uploads/user_files/';
$conf_upload_path = MODX_BASE_PATH.$conf_upload_dir;
$conf_upload_file_name = 'file_'.date('Y-m-d_H-i-s');
$conf_upload_input_name = 'photo';
$conf_upload_thumbs = array(
    '' => array('w' => 1280,'h' => 720,'zc' => 0, 'bg' => '#fff', 'far' => 0),
    '_thumb' => array('w' => 128,'h' => 72,'zc' => 0, 'bg' => '#fff', 'far' => 0)
);

if($modx->event->name == 'OnEcMessageSave' && $mode == modSystemEvent::MODE_NEW) {
    // $mode: modSystemEvent::MODE_NEW, modSystemEvent::MODE_UPD
    // Объект: $ecMessage->toArray()
    
    if(isset($_FILES[$conf_upload_input_name]) && !empty($_FILES[$conf_upload_input_name]['tmp_name'])){
        $file_info = getimagesize($_FILES[$conf_upload_input_name]['tmp_name']);
        if(empty($file_info)) {
            $modx->log(xPDO::LOG_LEVEL_WARN, 'Не могу сохранить файл'.$_FILES[$conf_upload_input_name]['name'].', так как он не является изображением');
            return;
        }
        $extention = '';
        switch (exif_imagetype($_FILES[$conf_upload_input_name]['tmp_name']))
        {
            case IMAGETYPE_GIF:
                $extention = '.gif';
            break;
            case IMAGETYPE_JPEG:
                $extention = '.jpg';
            break;
            case IMAGETYPE_PNG:
                $extention = '.png';
            break;
        }
        if(empty($extention)) {
            $modx->log(xPDO::LOG_LEVEL_WARN, 'Не могу сохранить файл'.$_FILES[$conf_upload_input_name]['name'].', так как его тип не поддерживается');
            return;
        }
            
        // проверяем каталог
        if(!file_exists($conf_upload_path)){
            $modx->log(xPDO::LOG_LEVEL_ERROR, 'Директория '.$conf_upload_path.' не существует');
            return;
        }
        // перемещаем файл
        $file_name = $conf_upload_file_name.$extention;
        if(!move_uploaded_file($_FILES[$conf_upload_input_name]['tmp_name'], $conf_upload_path.$file_name)){
            $modx->log(xPDO::LOG_LEVEL_ERROR, 'Не удалось переместить загруженный файл по пути '.$conf_upload_path.$file_name);
            return;
        }
        
        // подключаем phpthumb
        require_once MODX_CORE_PATH.'model/phpthumb/phpthumb.class.php';
        foreach($conf_upload_thumbs as $curConfigKey => $curConfig){
            // инициализируем
            $phpThumb = new phpThumb();
            $phpThumb->setSourceFilename($conf_upload_path.$file_name);
            foreach ($curConfig as $k => $v) {
                $phpThumb->setParameter($k, $v);
            }
    
            // генерируем файл
            if ($phpThumb->GenerateThumbnail()) {
                if ($phpThumb->RenderToFile($conf_upload_path.$conf_upload_file_name.$curConfigKey.$extention)) {
                    // устанавливаем права на файл, это опционально, зависит от сервера
                    //chmod($conf_upload_path.$conf_upload_file_name.$curConfigKey.$extention, 0666);
                }
            }
        }
        // сохраняем изменения
        $ecMessage->set('photo', $conf_upload_dir.$file_name);
        $ecMessage->save();
    }
}

Настройки работы плагина находятся в верхней его части. Он умеет сохранять загруженные изображения в каталог uploads/user_files/ (не забудьте его создать!!!) сжимать изображение до определенных размеров, и делать превьюшки. Правда не научил его пока работать с источниками файлов, это было не нужно.
ВАЖНО! Этот плагин — просто пример, как можно сделать! На ваших проектах код может быть совсем другой!!!

Шаг 4. Добавить поле photo в системные настройки ec_message_grid_fields и ec_message_window_layout. Опять же смотрим документацию docs.modx.pro/components/easycomm/plugins-and-customization

Шаг 5. В чанке создания сообщения добавить поле photo, примерно так:

<div class="form-group">
        <label for="ec-photo-[[+fid]]" class="control-label">Файл</label>
        <input type="file" name="photo" id="ec-photo-[[+fid]]">
        <span class="ec-error help-block" id="ec-photo-error-[[+fid]]"></span>
    </div>

и не забыть к форме добавить

enctype="multipart/form-data"

, что бы она могла отправлять файлы.

Вроде как и все =)

В результате:
1. Пользователь сможет прикрепить изображение к сообщению. Это может быть, например, фото или скриншот.
2. Фото будет загружено на сервер.
3. Админ сможет удобно с этим фото работать, будет видеть его превью как в списке сообщений, так и при редактировании сообщения

[[+photo:gt=`0`:then=`<a rel="gallery" class="fancybox" href="[[+photo]]" ><img src="[[+photo]]" /></a>`:else=``]]

{
    "main": {
        "name": "main",
        "columns": {
            "column0": ["user_name", "user_email", "ec_message_photo"],
            "column1": ["date", "user_contacts", "ec_message_photo"]
        },
        "fields": ["subject", "rating", "text", "published", "ec_message_photo"]
    },
    "reply": {
        "name": "reply",
        "columns": {},
        "fields": ["reply_author", "reply_text", "notify", "notify_date", "ec_message_photo"]
    },
    "settings": {
        "name": "settings",
        "columns": {},
        "fields": ["thread", "ip", "extended", "ec_message_photo"]
    }
}