Темизируем форму комментариев Друпал 7

Аватар пользователя olk olk 13 апреля 2012 в 14:17
1

Данный материал не учебный, а скорее познавательный. В нем я расскажу о том, как темизировал форму комментариев для сайта www.hotel-prog.ru Т.е. это не руководство как это надо делать, а просто материал о том как это делал я.

Итак из дополнительных модулей я установил:

  • Модуль comment_notify
  • Модуль CAPCHA
  • Модуль ccfcollapse (из ccfilter) - используются внутренние функции и js-функционал для сворачивания полей и формы комментария
  • Модуль Better Formats - что бы назначить пользователям формат ввода по умолчанию
  • Модуль In Field Labels - делаем форму немного компактней

Включаем модули и при необходимости настраиваем

Далее нам понадобиться в директории нашей темы два файла template.php и comment-wrapper.tpl.php
Если нет файла comment-wrapper.tpl.php, то его можно скопировать из директории вашей базовой темы или из директории modules/comment

Если нет файла template.php, то просто создаем файл с таким именем.

Делаем форму комментариев свернутой по умолчанию (это будет работать только в том случае, если у вас в настройках типа материала для комментариев установлено - «Показывать форму ответа на той же странице, что и комментарии»).

Редактируем comment-wrapper.tpl.php:

Заменяем кусок вывода формы на

if ($content['comment_form']): ?>
  <div class="comment-form-wrapper">
    <div class="ccfcollapse ccfcollapse-add-comment hide">
      <div class="ccfcollapse-static-title add-comment">print t('Add new comment'); ?></div>
      <div class="ccfcollapse-title-hide hide add-comment">« print t('Add new comment'); ?></div>
      <div class="ccfcollapse-title-show add-comment">» print t('Add new comment'); ?></div>
      <div class="ccfcollapse-body hide">
        <div class="comment-form-box">
          print render($content['comment_form']); ?>
        </div>
      </div>
    </div>
  </div>
endif; ?>

В данном случае мы просто используем конструкцию, которую сможет обработать JS код модуля ccfcollapse.

Структура комментария:

У меня используется стандартная структура с отключенным «Заголовком комментария»
и обязательной для анонимов контактной информации.
Так-же к комментарию добавлено сск поле «файл» имя данного поля field_file

В файле template.php основная функция, которую мы будем использовать - это

function Ваша_Тема_form_comment_form_alter (&$form, &$form_state,$form_id)?>

Все пояснения прямо в коде, для чего, тот или иной фрагмент.

Моя тема называется olkit, соответственно создаем функцию

function olkit_form_comment_form_alter (&$form, &$form_state$form_id) {
  
// Опционально - создаем дополнительную обертку,
  // в дальнейшем с помощью CSS придаем более элегантный вид форме
  
$form['header'] = array(
    
'#type' => 'markup',
    
'#markup' => '',
    
'#weight' => -10,
    
'#prefix' => '<div class="comment-header"><div class="l"></div><div class="r"></div></div><div class="comment-body-wrapper">',
  );
  
$form['bottom'] = array(
    
'#type' => 'markup',
    
'#markup' => '',
    
'#weight' => 100,
    
'#suffix' => '</div>',
  );
  
  
// если авторизованный пользователь, то скрываем поля имени автора комментария,
  // ведь пользователь и так знает кто он
  
if(isset($form['author']['_author'])) {
    unset(
$form['author']['_author']['#title']);
    unset(
$form['author']['_author']['#markup']);
    
    
// если авторизованный пользователь и применен модуль comment_notify,
    // то опускаем подформу comment_notify пониже (перед капчей)
    
if(isset($form['notify_settings'])) {
      
$form['notify_settings']['#weight'] = 97;
      
$form['notify_settings']['#prefix'] = '<div class="comment-notify-bottom">';
      
$form['notify_settings']['#suffix'] = '</div><div class="clearfix"></div>';
    }
  }
  else {
    
// иначе если аноним и применен модуль comment_notify,
    // то поднимаем подформу comment_notify повыше в данном случае
    // при помощи CSS она будет расположена справа от полей ввода имени и email
    
if(isset($form['notify_settings'])) {
      
$form['notify_settings']['#weight'] = -1;
      
$form['notify_settings']['#prefix'] = '<div class="comment-notify">';
      
$form['notify_settings']['#suffix'] = '</div><div class="clearfix"></div>';
    }
  }
  
  
// если аноним, то скроем поле homepage
  
if(isset($form['author']['name'])) {
    
$form['author']['homepage']['#type'] = 'hidden';
    
$form['author']['#prefix'] = '<div class="comment-author">';
    
$form['author']['#suffix'] = '</div>';
    
$form['author']['mail']['#description'] = '';
  }
  
  
// для поля field_file скроем лабел для поля и подсказку в поле
  
if(isset($form['field_file'])) {
    
$lang $form['field_file']['#language'];
    
$form['field_file'][$lang]['#title']='';
    
$form['field_file'][$lang]['#file_upload_title']='';
    
$prefix '';
    
$suffix '';
    
    
// сделаем при помощи модуля ccfcollapse поле добавления файла свернутым
    // применим не документированную функцию _filter_ccfcollapse_process из данного модуля
    // которая сформирует необходимый для функционирования HTML в качестве 
    // префикса и суффикса данного поля
    
if(module_exists('ccfcollapse')) {
      
$format '[collapse collapsed title-show="»" title-hide="«" title="Файл" class="ccfcollapse-field-files"]___formating___[/collapse]';
      
$format _filter_ccfcollapse_process($formatNULL,NULL);
      
preg_match('/(.*)___formating___(.*)/',$format$matches);
      
$form['field_file']['#weight']=4;
      
$form['field_file_header'] = array(
        
'#type' => 'markup',
        
'#markup' => '',
        
'#weight' => 3.99,
        
'#prefix' => $matches[1],
      );
      
$form['field_file_bottom'] = array(
        
'#type' => 'markup',
        
'#markup' => '',
        
'#weight' => 4.01,
        
'#suffix' => $matches[2],
      );
    }
  }
  
  
// опустим кнопки в самый низ, если этого не сделать при установке капчи,
  // кнопка сохранить помещается между формой комментария и капчей
  // может кому-то так нравится, мне нет
  
$form['actions']['#weight'] = 99.2;
}
?>

Ввод формата ввода для анонимов и зарегистрированных пользователей убирается с помощью модуля better format. Теперь, нам надо поправить вывод подсказки по редактированию. Сделать в предыдущей функции это не получается, но есть выход - «перекрыть» функции темизации.

Добавляем в файл template.php функцию определяющую темы для перекрытия.

function olkit_theme(){
  return array(
    
'filter_tips' => array(
      
'arguments' => array('variables' => array()),
    ),
    
'filter_tips_more_info'=> array(
      
'arguments' => array('variables' => array()),
    ),
  );
}
?>

и соответственно определяем эти функции (не забываем что olkit - в данном случае имя текущей темы)

function olkit_filter_tips($variables) {
  
// получаем текст подсказки по редактированию
  
$output theme_filter_tips($variables);
  
  
// Если это краткий вывод который, как раз и выводится в форме комментария,
  // то  при помощи, того-же «финта» (использования модуля ccfcollapse) делаем подсказку свернутой
  
if(!$variables['long']) {
    
// добавляем ссылку на подробную информацию по форматам в конец текста подсказки
    
$output .= '<div class="filter-help">' theme_filter_tips_more_info($variables) . '</div>';
    
    if(
module_exists('ccfcollapse')) {
      
$format '[collapse collapsed title-show="»" title-hide="«" title="Подсказки по редактированию" class="ccfcollapse-filter-tips"]___formating___[/collapse]';
      
$format _filter_ccfcollapse_process($formatNULL,NULL);
      
preg_match('/(.*)___formating___(.*)/'$format$matches);
      
$output $matches[1] . $output $matches[2];
    }
  }
  return 
$output;
}

// Убираем ссылку на на подробную информацию по форматам в конец текста подсказки    
function olkit_filter_tips_more_info($variables) {
  return 
'';
}
?>

Теперь, тщательно «курим» CSS и приводим форму к нужному виду.

Скриншоты формы

Форма для анонимов
Форма для анонимов

Форма для анонимов с развернутой подсказкой и полем добавления файла
Форма для анонимов

Форма для зарегистрированных пользователей
Форма для анонимов

Комментарии

Аватар пользователя gorr gorr 14 апреля 2012 в 9:45

"olk" wrote:
Т.е. это не руководство как это надо делать, а просто материал о том как это делал я.

Как раз такие посты ценными и являются, так что спасибо!
"olk" wrote:
Теперь, тщательно «курим» CSS и приводим форму к нужному виду.

На Вашем сайте при клике на:
» Подсказки по редактированию
форма добавления комментариев неприятно дергается, наверное надо еще немного css "докурить";)

Аватар пользователя azzis azzis 28 ноября 2012 в 23:55

Полезный мануальчик! Спасибо!
А подскажите еще как вы сделали чтобы, в случае когда валидатор формы ругнулся, чтобы отображалось содержимое ноды как обычно и развернутая форма редактирования комментария. У меня если произошла ошибка идет переадресация на страницу с формой без содержимого ноды.

Аватар пользователя shevgeny shevgeny 13 мая 2016 в 9:40

Спасибо! На многие вопросы в вашей статье нашел ответы. Однако, есть еще один, который никак не могу отыскать: как отобразить в форме (перед ней) изображение (аватар) пользователя? Как временное решение, сделал <?php global $user; print theme('user_picture', array('account' => $user)); ?> в comment-wrapper.tpl.php, но так как использую модуль ajax omment и ветвящийся список комментов с возможностью ответить, когда нажимаю «ответить», естественно, получаю просто форму, без аватарки перед ней. Можно в $form['intro']['#prefix'] вставлять вывод глобальных переменных? Если да, то как?