1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. FAQ

О средстве темизации форм в Drupal 7

Главные вкладки

Аватар пользователя roman-yrv roman-yrv 2 ноября 2013 в 12:31

Добрый день.

Поделитесь, пожалуйста, опытом, есть ли способы темизации друпаловских форм, кроме классических (hook_form_alter, другие хуки, переопределение уже прописанных классов CSS и т.д.) ?

Например, недавно решал такую задачу.
Есть готовая верстка сделанная верстальщиком, и нужно было, чтобы форма ввода комментария выглядела вот таким вот образом:

И вот для того, чтобы привести стандартную форму к такому виду, пришлось написать вот такой вот код

function music_preprocess_comment_wrapper(&$vars)
{
  // Настройка формы добавления комментария
 
  // Обрамляем всю форму ввода комментария
  $vars['content']['comment_form']['#prefix'] = '<div class="comment-panel">';
  $vars['content']['comment_form']['#suffix'] = '</div>';
 
  // Добавляем классы для формы ввода комментария
  $vars['content']['comment_form']['#attributes'] = array(
    'class' => array('form','form_standard', 'form_comment'),
  );
 
  // Настройка поля ввода текста комментария
  $vars['content']['comment_form']['comment_body']['#prefix'] = '<li class="form-fields__item">';
  $vars['content']['comment_form']['comment_body']['#suffix'] = '</li>';
 
  $vars['content']['comment_form']['comment_body']['und'][0]['value']['#title_display'] = 'invisible';
  $vars['content']['comment_form']['comment_body']['und'][0]['value']['#attributes'] = array(
    'class' => array('field', 'field_type_textarea'),
    'placeholder' => array('Ваш комментарий'),
  );
  $vars['content']['comment_form']['comment_body']['und'][0]['value']['#rows'] = 1;
 
  // Настройка внешнего вида кнопки "Добавить"
  $vars['content']['comment_form']['actions']['#prefix'] = '<li class="form-fields__item">';
  $vars['content']['comment_form']['actions']['#suffix'] = '</li>';
 
  $vars['content']['comment_form']['actions']['submit']['#prefix'] = '<span class="btn btn_green">';
  $vars['content']['comment_form']['actions']['submit']['#suffix'] = '</span>';
  $vars['content']['comment_form']['actions']['submit']['#attributes'] = array('class' => array('btn__in'));
  $vars['content']['comment_form']['actions']['submit']['#value'] = 'Добавить';  
 
  // Убираем из формы выбор формата
  $vars['content']['comment_form']['comment_body']['und'][0]['format']['#access'] = FALSE;
 
  // Добавляем элементы для обрамления элементов формы
  $vars['content']['comment_form']['list_begin'] = array(
    '#weight' => -1000,
    '#markup' => '<ul class="form-fields form-fields_inline">',
  );
  $vars['content']['comment_form']['list_end'] = array(
    '#weight' => 1000,
    '#markup' => '</ul>',
  );
 
  // Скрываем кнопку "Предварительный просмотр"
  $vars['content']['comment_form']['actions']['preview']['#access'] = FALSE;
 
  // Скрываем поле темы
  $vars['content']['comment_form']['subject']['#access'] = FALSE;
 
  // Скрываем поле автора
  $vars['content']['comment_form']['author']['#access'] = FALSE;
}

Да и то, задача решилась частично, так как хоть форма теперь и выглядит, как задумывалось, но её код остался довольно громоздким по сравнению с тем, как сверстал верстальщик.

Вот так сверстал верстальщик:

                <div class="comment-panel">
                    <form class="form form_standard from_comment">
                        <ul class="form-fields form-fields_inline">
                            <li class="form-fields__item"><textarea placeholder="Ваш комментарий" class="field field_type_textarea"></textarea></li>
                            <li class="form-fields__item"> <span class="btn btn_green"><input type="submit" class="btn__in" value="Добавить"></span></li>
                        </ul>
                    </form>
                </div>

А вот так получилось в итоге:

<div class="comment-panel">
 <form class="form form_standard form_comment" action="/comment/reply/4" method="post" id="comment-form" accept-charset="UTF-8">
  <div>
    <ul class="form-fields form-fields_inline">
      <li class="form-fields__item">
        <div class="field-type-text-long field-name-comment-body field-widget-text-textarea form-wrapper" id="edit-comment-body">
          <div id="comment-body-add-more-wrapper">
            <div class="text-format-wrapper">
              <div class="form-item form-type-textarea form-item-comment-body-und-0-value">
                <label class="element-invisible" for="edit-comment-body-und-0-value">Comment <span class="form-required" title="Это поле обязательно для заполнения.">*</span></label>
                <textarea class="field field_type_textarea form-textarea required" placeholder="Ваш комментарий" id="edit-comment-body-und-0-value" name="comment_body[und][0][value]" cols="60" rows="1"></textarea>
              </div>
            </div>
          </div>
        </div>
      </li>
     <input type="hidden" name="form_build_id" value="form-IMbWa6LBhg4aO-nLOSYy9UKWWglyI6vWUYtlCK6FR0I" />
     <input type="hidden" name="form_token" value="tLm1DJdighyhjN7fMBsLoyEE0pecvW_mdifiX3MZzEU" />
     <input type="hidden" name="form_id" value="comment_node_notice_form" />
     <li class="form-fields__item">
       <div class="form-actions form-wrapper" id="edit-actions">
         <span class="btn btn_green">
           <input class="btn__in form-submit" type="submit" id="edit-submit" name="op" value="Добавить" />
         </span>
       </div>
     </li>
    </ul>
   </div>
  </form>
</div>

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

ВложениеРазмер
Иконка изображения form-add-comment.png5.76 КБ

Комментарии

Аватар пользователя webpavilion webpavilion 2 ноября 2013 в 20:42

переопределите theme_textfield и все остальное что вам нужно.

sergeybelya, вроде как в tpl уже html после theme функций попадает или я ошибаюсь?

Аватар пользователя sergeybelya sergeybelya 3 ноября 2013 в 0:40

webpavilion wrote:
переопределите theme_textfield и все остальное что вам нужно.

sergeybelya, вроде как в tpl уже html после theme функций попадает или я ошибаюсь?

Не ошибаетесь, но элементы формы в собственном tpl-файле можно выводить отдельно через drupal_render, т.е. "каркас" формы задается в шаблоне, например в табличном виде, так гораздо проще чем через hook_form_alter добавлять префиксы и суффиксы к полям, а если не нужны стандартные обертки элементов - то переопределить и соотв. функции темизации как указал drupby.

Аватар пользователя drupby drupby 2 ноября 2013 в 20:58

"webpavilion" wrote:
вроде как в tpl уже html после theme функций попадает или я ошибаюсь?

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

Аватар пользователя drupby drupby 3 ноября 2013 в 1:23

"sergeybelya" wrote:
Не ошибаетесь, но элементы формы в собственном tpl-файле можно выводить отдельно через drupal_render, т.е. "каркас" формы задается в шаблоне, например в табличном виде, так гораздо проще чем через hook_form_alter добавлять префиксы и суффиксы к полям, а если не нужны стандартные обертки элементов - то переопределить и соотв. функции темизации как указал drupby.

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

Аватар пользователя roman-yrv roman-yrv 3 ноября 2013 в 9:13

Я использую шаблон формы через hook_theme, далее переопределяю theme_form_element и theme_container, в которых исключаю из вывода врапперы ... и то, от всех врапперов и вложенных DIV'ов избавиться не удалось.