УрокПример перекрытия шаблона CCK

В прошлом уроке я обещал показать пример, как можно перекрывать шаблоны ССК полей. А раз обещал - значит вынь да полож.

Пример

Надо к статье добавить поле, которое будет выводить неограниченное количество картинок с их описанием, введённое в поле "описание (description)".
По умолчанию это поле не выводится, поэтому надо лезть в шаблон и дописывать его вывод. Заодно уменьшить количество лишних классов, мало ли, для seo пригодится ;) Итак, поехали по порядку.

Действие номер раз

Сначала добавляем ССК поле в свою статью. Для этого нам понадобится модули CCK, Filefield и Imagefield. Ложим эти модули в папку \sites\all\modules (если какой-то папки нет - создать). Лезем в админке в настроку модулей /admin/build/modules и в группе CCK включаем Content , Filefield и Imagefield. После чего лезем в управление контентом (content management) и выбираем "Типы материала (content types)". Напротив нужного вам материала кликаем "управлять полями (manage fields)". Урл, на котором вы будете находиться, должен выглядеть так: http://имя_сайта/admin/content/node-type/имя_типа_содержимого/fields.

Тут добавляем ССК поле таким образом:

cck_2.jpgМетку поля (label) можно делать любой, она будет отображаться у вас над этим полем при добавлении содержимого. Имя поля лучше делать осмысленной, по принципу имяТипаМатериала_чтоБудетХраниться. У меня тип материала - story, а записывать туда я буду фотки. Потом когда будете работать с модулем Views вы без труда разберётесь для чего вам это поле служит. В противном же случае, при большом количестве полей вы рискуете просто запутаться в них, и потратить кучу времени на поиск ошибки. Остальные аттрибуты оставьте такими, как на скриншоте. Жмём сохранить. Вас переадресует на страницу с настройками поля. Пока измените только одно значение - количество значений у поля, чтобы мы могли загружать больше одной фотографии

cck_1.jpg

Действие номер два

Теперь этим картинкам надо менять размер при их отображении в материале, ведь их размер может быть совершенно разнообразным, а когда картинки каждый раз разного размера - это довольно некрасиво. Да и самому каждый раз их подрезать лениво. Поэтому был придуман модуль Imagecache, который умеет ловко обрабатывать фотографии, уменяшая/увеличивая их размер до необходимого. Для того, чтобы он работал нам надо скачать модули Imce, ImageApi и Imagecache. Опять закидываем их в папку с модулями (разархивированными, естественно!) и включаем их в настройках модулей. IMCE - это модуль, позволяющий загружать картинки, ImageAPI и ImageCache - модуля, позволяющие работать с картинками (изменять размер и т.п.).

Теперь нам нужно создать пресет, т.е. указать, как наши фотографии будут изменять размер при отображении. Для этого идём в admin/build/imagecache, создаём новый пресет. Называем его как-нибудь в духе дляЧего_размерИзображения, например gallery_150x100. Там задаём необходимые параметры изменения размера фотографии (сами побалуйтесь, там всё просто). Сохраняем пресет.

Теперь возвращаемся в управление типами содержимого, и напротив нашего типа нажимаем "показать поля (display fields)". Здесь можно настроить вывод метки (на скриншоте - метка будет спрятана), вывод картинки в анонсе материала (на скриншоте я тоже его убрал) и вывод картинки в полной версии материала (на скриншоте - он использует пресет 150х100). Сохраняем.

cck_3.jpg

Всё, работу с сайтом закончили. Теперь наконец переходим к созданию шаблонов.

Шаг намбер три

Из модуля ССК копируем в папку с темой файл content-field.tpl.php. После чего дублируем этот файл в эту же папку, но назвав его content-field-field_story_images.tpl.php. Открываем этот файл.

Всё, что нам надо в нём оставить:

<div class="field-story-images">
 
    <?php $count = 0;
    foreach ($items as $delta => $item) :
      if (!$item['empty']) : ?>
        <div class="field-item">
          <?php echo $item['view']; ?>
          <div class="field-label">
             <?php echo $node->field_story_photo[$count]['data']['description']; ?>
          </div>
        </div>
      <?php $count++;
      endif;
    endforeach;?>
 
</div>

Фактически, я тут оставил только вывод самой картинки и её описания. Вот и всё. Закидываем файлы на сервер, чистим кэш - и дело сделано!

Как перекрывать вывод полей модуля CCK
Способы закругления уголков. 1 способ.
Навигация

Похожие материалы

Комментарии

Аватар пользователя D.Choomc
D.Choomc написал:

Thanx man)) полезно) добавил тебя в ридер))

19.08.2010 21:46
Аватар пользователя Spleshka
Spleshka написал:

Без проблем, если будут вопросы - задавай! :) Всегда рад помочь!

20.08.2010 02:25
Аватар пользователя Тайный поклонник Иван
Тайный поклонни... написал:

Скажи, пожалуйста, какое преимущество этого способа перед изменением самого шаблона node.tpl.php?
Мне никогда не приходилось изменять шаблоны вывода полей cck, я всегда правлю шаблон ноды. Возможно, это плохое решение.

11.10.2010 05:29
Аватар пользователя Spleshka
Spleshka написал:

Надо поступать в зависимости от ситуации. Предположим, у вас есть 20 типов нод, из которых половина использует данный в статье пример. Придётся создавать 10 шаблонов для этих нод, и в них указывать, каким образом выводить фотографии. Понимаете, не надо взрывать всё поле, чтобы выкопать пару картошин :) С перекрытием cck-поля мы меняем только его. В противном же случае мы поменяем вывод всех нод.

11.10.2010 15:12
Аватар пользователя leo7
leo7 написал:

Вдруг откуда ни возьмись появилось
field-story-images
причём, кажется, вместо
field_story_photo

Или я чего-то не понял?

02.12.2010 23:47
Аватар пользователя Spleshka
Spleshka написал:

ну это же просто класс ддля css :) Он никакой важной роли не играет

03.12.2010 00:29
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Почему он перекрывает шаблон именно для этого поля? если файл называется одним именем
а поле называется другим именем...
И фраза "Из модуля ССК копируем в папку с темой файл ..." в папку с какой темой? обратно куда? в
"all/modules/cck/theme/" или еще куда?

29.12.2010 22:49
Аватар пользователя Spleshka
Spleshka написал:

Для поля с названием field_story_images шаблон перекрытия будет называться именно content-field-field_story_images.tpl.php. Примите это как факт, т.к. так было задумано разработчиками.

Поясняю фразу "Из модуля ССК копируем в папку с темой файл ...":

  • "Из модуля ССК" - значит, из папки /all/modules/cck
  • "В папку с темой" - значит, в папку /all/themes/имяВашейТемы
30.12.2010 01:20
Аватар пользователя tolyan15
tolyan15 написал:

Всех с Новым Годом!:HI:
Сделал, как здесь написано, но повилась еще одна фотка рядом с первой:SAD:
И второй вопрос, как такое проделать с текстовым полем, чтоб можно было применить стили:HAPPY:

02.01.2011 14:17
Аватар пользователя Spleshka
Spleshka написал:

наверное, ты не исключил фотографию из вывода сск полей)
а текстовое поле просто заверни в шаблоне node.tpl.php в какой-нибудь div и укажи стили к нему)

<div class = "text">
  <?php echo $node->field_текстовое_поле[0]['view']; ?>
</div>
03.01.2011 04:44
Аватар пользователя tolyan15
tolyan15 написал:

С изображением все получилось. Огромное спасибо!
Сделал в node.tpl.php вот так:
[code]

ob_start();

echo art_node_title_output($title, $node_url, $page);

$metadataContent = ob_get_clean();
if (trim($metadataContent) != ''):

echo $metadataContent;

endif;
if ($submitted):

echo art_submitted_worker($date, $name);

endif;

print $picture; echo $content;

echo $node->field_field_price[0]['view'];

if (isset($node->links['node_read_more'])) { echo '<div class="read_more">'.get_html_link_output($node->links['node_read_more']).'</div>'; }

ob_start();

 if (is_art_links_set($node->links) || !empty($terms)):
$output = art_node_worker($node); 
if (!empty($output)):

echo $output;

endif; endif;
$metadataContent = ob_get_clean();
if (trim($metadataContent) != ''):

echo $metadataContent;

endif;

[/code]
В CSS назначил класс:
[code].field_price {
color: red;
}[/code]
Ничего не меняеться.
Может сделать как в первом примере, только не знаю как. :-(

03.01.2011 11:46
Аватар пользователя powerscin
powerscin написал:

Дело все в том, что тут:

<div class = "field_price">
  <?php echo $node->field_field_price[0]['view']; ?>
</div>

в блок .field_price будут вложены другие блоки, так что тебе нужно применить свой стиль ко внутренним блокам. Должно помочь :)
Это происходит по тому, что где то стили внутренних блоков, по части цвета шрифта, уже определены, а что бы их переопределить тебе нужно явно прописать стили для них.

03.01.2011 13:07
Аватар пользователя tolyan15
tolyan15 написал:

Исходный код этого фрагмента:

<div class="art-article"><div class="field_foto_tovar">
 
            <div class="field-item">
          <a href="http://localhost/company/sites/default/files/imagecache/original-image/obezyana.jpg" rel="lightbox[field_foto_tovar][Обезьяна&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;/company/node/33&quot; id=&quot;lightbox2-node-link-text&quot;&gt;Перейти на страницу &lt;/a&gt; - &lt;a href=&quot;http://localhost/company/sites/default/files/obezyana.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Сохранить изображение&lt;/a&gt;]" class="imagefield imagefield-lightbox2 imagefield-lightbox2-img_120x120 imagefield-field_foto_tovar imagecache imagecache-field_foto_tovar imagecache-img_120x120 imagecache-field_foto_tovar-img_120x120 lightbox-processed"><img ilo-full-src="http://localhost/company/sites/default/files/imagecache/img_120x120/obezyana.jpg" src="http://localhost/company/sites/default/files/imagecache/img_120x120/obezyana.jpg" alt="Обезьяна" title="" height="89" width="120"></a>          <div class="field-label">
                       </div>
        </div>
 
</div><div class="field field-type-text field-field-title">
      <div class="field-label">Наменование товара:&nbsp;</div>
    <div class="field-items">
 
            <div class="field-item odd">
                    “Обезьяна”        </div>
        </div>
</div>
<div class="field field-type-link field-field-brend">
      <div class="field-label">Производитель:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">
                    <a href="http://www.ooo-steklo.ru" target="_blank" rel="nofollow">ООО "Стекло"</a>        </div>
 
        </div>
</div>
<div class="field field-type-text field-field-price">
      <div class="field-label">Цена:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">
                    от 150 руб.        </div>
        </div>
</div>
<p><dme:context type="node" cid="33"></dme:context></p>
 
<div class="field_price">
  </div>
</div>

Мне надо изменить цвет "от 150 руб"
При этом пробовал прописывать стили для всех DIVов ничего не помогает
Может все таки перекрыть стиль как нибудь?
;-(

03.01.2011 13:54
Аватар пользователя powerscin
powerscin написал:

Напишите так:

div.field-item{
   color: #ff0000;
}

если это не поможет попробуйте:

div.field-item{
   color: #ff0000 !important;
}
03.01.2011 14:21
Аватар пользователя tolyan15
tolyan15 написал:

Цвет поменялся и в поле: Нименование товара :-(

03.01.2011 14:38
Аватар пользователя powerscin
powerscin написал:

тогда так:

.field-field-price div.field-item{
   color: #ff0000 !important;
}
03.01.2011 14:45
Аватар пользователя tolyan15
tolyan15 написал:

Сейчас сработало!
Огромное спасибо!:-)

03.01.2011 14:52
Аватар пользователя Spleshka
Spleshka написал:

И запомни - артистир - зло ))

03.01.2011 14:59
Аватар пользователя tolyan15
tolyan15 написал:

Зло-незло, а темы нормальные делает, быстро и красиво :-)
Один минус- резиновый каркас не может делать

03.01.2011 15:05
Аватар пользователя Spleshka
Spleshka написал:
Шаблонные темы, которые сразу узнаются что от артистира) И просто огромнейшая куча говно кода =) И кстати, Яндекс банит за артистир
03.01.2011 15:18
Аватар пользователя tolyan15
tolyan15 написал:

Уже два сайта с шаблонами от Артистера, в выдаче Яндекса присутствуют :-)
Правда на Joomla. Сейчас вот осваиваю Друпал, возможностей действительно больше.
Правда темы придеться потом делать самому, это я прекрасно понимаю.
Но всему свое время :-)
Еще раз спасибо за поддержку и понимание.
Сайт у Вас классный! Но, что-то не доработанно со смайликами, приходиться впечатывать вручную :-)

03.01.2011 16:02
Аватар пользователя Spleshka
Spleshka написал:

Спасибо за отзыв о сайте! Со смайликами проблему знаю, но всё никак руки не доходят)) Скоро сделаю, чесслово

03.01.2011 16:10
Аватар пользователя tolyan15
tolyan15 написал:

Доброго времени суток!
Не посчитайте за назойливость.
Сейчас испльзую другой шаблон не от артистера, кто знает называеться Danland.
Дело в другом. Есть модуль галерея, так вот на странице с картинкой никак не могу ее выровнять по левому краю, уже мозги дымяться, чего только не писал в стилях.
У вас мозги по-моложе, может чего подскажете :-)
Еще раз извините, вот фрагмент кода со страницы:

<h1 class="title">Коралл желто-оранжево-коричневый</h1>					      <div class="content-middle">  <div class="node">
                <div class="taxonomy"><ul class="links inline"><li class="taxonomy_term_19 first last"><a href="/category/%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D0%B8/%D0%BA%D0%B0%D1%82%D0%B0%D0%BB%D0%BE%D0%B3/%D0%B2%D0%B0%D0%B7%D1%8B/%D0%B2%D0%B0%D0%B7%D0%B0-%D0%BA%D0%BE%D1%80%D0%B0%D0%BB%D0%BB/%D0%B2%D0%B0%D0%B7%D0%B0-%D0%BA%D0%BE%D1%80%D0%B0%D0%BB%D0%BB-%D1%81-%D0%BA%D1%80%D0%BE%D1%88%D0%BA%D0%BE%D0%B9" rel="tag" title="">Ваза &quot;Коралл&quot; с крошкой</a></li>
</ul></div>    <div class="content"><img src="http://company/sites/default/files/images/yellow-orange-brown_0.preview.jpg" alt="Коралл желто-оранжево-коричневый" title="Коралл желто-оранжево-коричневый"  class="image image-preview " width="300" height="400" /><div class="field field-type-text field-field-opisanie">
      <div class="field-label">Описание:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">
                    Ваза &quot;Коралл&quot; расцветки - &quot;Желто-оранжево-коричневый&quot;        </div>
        </div>
</div>
<div class="field field-type-text field-field-price">
      <div class="field-label">Цена:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">
                    от 45 руб.        </div>
        </div>
</div>
<div class="field field-type-link field-field-brand">
      <div class="field-label">Изготовитель:&nbsp;</div>
    <div class="field-items">
            <div class="field-item odd">
                    <a href="http://ooo-steklo.ru" target="_blank" rel="nofollow" title="brand">ООО &quot;Стекло&quot;</a>        </div>
        </div>
</div>
</div>
10.01.2011 15:07
Аватар пользователя powerscin
powerscin написал:

Так довольно сложно, сказать что то дельно, может есть ссылка на сайт? Было бы намного быстрее.

10.01.2011 15:25
Аватар пользователя tolyan15
tolyan15 написал:

Сайт на локалке :-)

10.01.2011 15:54
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

Жаль, что способ работает только для вывода материала, для Views, выводимого полями, не катить :SAD:

28.05.2011 11:18
Аватар пользователя Rayb
Rayb написал:

Есть поле user reference. Оно выводит логин пользователя. Как переопределить поле, чтобы выводилось логин (в идеале realname) + аватар пользователя?
В user reference может быть несколько значений.

03.10.2011 22:00
Аватар пользователя Spleshka
Spleshka написал:

Перекрывайте шаблон так же, как и в статье. Далее надо пройтись по всему массиву с user reference. Этот массив будет содержать uid пользователя. Вам необходимо загрузить пользователя по этому uid и вывести его аватарку и имя:

$user = user_load($uid); // $uid - ID пользователя
print theme('user_picture', $user); // Аватарка
print $user->name; Имя пользователя
03.10.2011 23:47
Аватар пользователя Rayb
Rayb написал:

спасибо за ответ.
Попробовал вставить код, но он вывле аватарку анонимного пользователя. То есть получается не зацепил он user_load($uid).
Видимо я не сделал это "Далее надо пройтись по всему массиву с user reference"...
То есть я просто вставил код в шаблон поля

<?php $user = user_load($uid);
print theme('user_picture', $user); 
print $user->name; ?>
05.10.2011 21:57
Аватар пользователя Spleshka
Spleshka написал:

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

06.10.2011 04:04
Аватар пользователя Rayb
Rayb написал:

можете вы привести пример кода или ссылку на пример кода? я совсем-совсем не программист ))

06.10.2011 14:56
Аватар пользователя mamba
mamba написал:

Для шестерки давно использую этот метод. Сейчас для семерки ищу решение выводить описание под фоткой. Подскажите как.

22.11.2011 16:30
Аватар пользователя Spleshka
Spleshka написал:

Практически тоже самое. Только шаблон надо брать не из модуля cck, а из field (который в ядре).

22.11.2011 16:54
Аватар пользователя mamba
mamba написал:

Я так и понял :) а код можете написать? Я там на друпале тоже вопрос задал, потом кину ссылку на вас в ответе, если решение напишите.

23.11.2011 10:14
Аватар пользователя Spleshka
Spleshka написал:

В модуле field в папке theme лежит файл field.tpl.php. Копируете его себе в тему. Далее копируете его ещё раз туда же, переименовав в field--имя-поля.tpl.tpl. Таким образом в корне темы лежат и field.tpl.php и field--имя-поля.tpl.php.

Для того, чтобы вывести, например, атрибут alt, содержимое field--имя_поля.tpl.php должно быть таким:

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php if (!$label_hidden) : ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item) : ?>
      <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
      <div class = "field-alt"><?php print $item['#item']['alt']; ?></div>
    <?php endforeach; ?>
  </div>
</div>
23.11.2011 14:09
Аватар пользователя Иван
Иван написал:

Спасибо вам большое! Несколько дней мучался и и пробовал выводить через вьювс с перезаписью полей. Ваш метод прост и главное работает!

06.03.2012 17:59
Аватар пользователя Иван
Иван написал:

Оказывается, не всё так просто. При выводе ноды через вьювс пропадает альт. Не подскажите куда нужно вписать ваш код, что бы и при использовании вьювс выводился альт под картинками?

06.03.2012 19:08
Аватар пользователя demetr
demetr написал:

Я весь мозг сломал, не получалось. Какие только имена не пробовал. В итоге оказалось файл нужно было назвать field--field_имяполя.tpl.php

13.06.2012 16:26
Аватар пользователя Masterjoda
Masterjoda написал:

Спасибо, спасибо, Спасибо!!!!!

Чувак, я люблю тебя!)

2 дня убил на эту хрень - image caption отказывался выводиться вместе с colorbox. И вот оно решение. Дас ист фантастишь!

17.10.2013 16:01
Аватар пользователя mamba
mamba написал:

Отлично! Спасибо, работает. Оказалось еще проще чем в 6.
Ссылку кинул на этот пост, как и обещал.

23.11.2011 16:37
Аватар пользователя Y
Y написал:

Извините за нубство! Подскажите, плз, куда именно в тему копировать эти два файла? И как конкретно назвать второй файл, н-р: field--alt_foto.tpl.php?

23.01.2014 12:41

Комментировать