Вы здесь

Темизация формы добавления материала. Поле изображения (с неограниченным кол-вом элементов)

2

Приветствую, друпалурги!

Для одного (личного) проекта необходимо сделать полную темизацию формы добавления материала (которая доступна всем зарегистрированным пользователям, т.е. не в оверлее, а просто на странице /node/add). Вопросы по всем полям, типа textfield и прочих, не возникает - всё предельно просто. Но вот как сделать темизацию (аля полное переопределение) поля, в которое можно подгружать изображения с неограниченным кол-вом элементов - пока нерешённый вопрос.

Итак, делаю вот так в template.php:

function mytheme_theme() {
    return array(
        'article_node_form' => array(
            'arguments' => array('form' => NULL),
            'render element' => 'form',
            'template' => 'templates/article-node-add',
        ),
    );
}

В самом файле article-node-add.tpl.php пишу:

...
// Вёрстка, вывод остальных полей
...
// Поле для загрузки изображений:
<?php print render($form['field_article_images']); ?>
...

И, конечно же на странице /node/add/article, вижу обычную таблицу с ненавистным "весом полей" и прочей draggeble ерундой. Начинаю копать гугл дальше и нахожу, что это делается вот через это theme_field_multiple_value_form(). Так-то оно так, но мне бы изменить сам шаблон вывода, например, заменить элементы обёртки table > tr > td > ... на div-ы со своими классами (использую semantic ui) и вырезанием всех лишних элементов (типа "имя файла", "размер файла" и т.д.).

Да, можно всё сделать через жестокий .element{display:none;} но всё же хотелось бы друпалвей :) Поэтому буду рад любой помощи.

Версия Drupal: 
7.x
Категория: 
Field API
Вопрос задан 31.07.2015 - 20:50

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

Комментарий оставлен 31.07.2015 - 21:19

В том и дело, что не хотелось бы использовать дополнительные модули, когда есть хуки + css :) И да, не знал что Авито сделан на Друпале.

Комментарий оставлен 01.08.2015 - 14:51

Ответы

3

Переопределяйте theme_file_widget_multiple. В оригинальной функции строится таблица:

$output = empty($rows) ? '' : theme('table', array('header' => $headers, 'rows' => $rows, 'attributes' => array('id' => $table_id)));

Вместо нее выводите только нужное, например картинку, имя и кнопку "Удалить":

foreach ($rows as $key => $value) {
    $output .= '<div>' . $value['data'][0] . $value['data'][2] . '</div>';
}

Описание у виджета загрузки файла (Макс размер, Расширения) в этой функции в переменной $element['#file_upload_description'].

Через devel распечатайте переменную $variables - найдете нужные данные. Если не найдете - пишите в комментарии - поможем.

Ответ дан 01.08.2015 - 09:18

Даже не могу выразить как я благодарен, Евгений, за эту ссылку и комментарий в целом ;) Выручил, ничего не скажешь!

Смотрю через debug() на предмет того, что можно ещё почистить в массиве $value['data'] и нахожу там вот такие данные в нулевом элементе массива:

...
array (
  0 => '<div class="image-widget form-managed-file clearfix">
            <div class="image-preview">
                <img src="http://mysite.ru/sites/default/files/styles/picture_preview_200x200/public/articles/picture-1.gif?itok=de9SjNlD" alt="" />
            </div>
            <div class="image-widget-data">
                <span class="file">
                    <img class="file-icon" alt="" title="image/gif" src="/modules/file/icons/image-x-generic.png" />
                    <a href="http://mysite.ru/sites/default/files/articles/picture-1.gif" type="image/gif; length=4807">picture-1.gif</a>
                </span>
                <span class="file-size">(4.69 КБ)</span>
                <input type="hidden" name="field_article_images[und][0][fid]" value="137" />
                <input type="hidden" name="field_article_images[und][0][display]" value="1" />
                <input type="hidden" name="field_article_images[und][0][width]" value="200" />
                <input type="hidden" name="field_article_images[und][0][height]" value="200" />
            </div>
        </div>',
  1 => '...',
  2 => '...',
);
...

Отсюда вопрос: где можно ещё глубже затемизировать это? Например, оставить в нулевом элементе массива div.image-preview + в div.image-widget-data только input.hidden элементы, а всякие span.file и span.file-size убрать. Да, тут уже проще display:none; сделать, но всё же ;)

Комментарий оставлен 01.08.2015 - 15:25