Марафон «Делаем СДЛ на Drupal»! День 3

Третий день в рамках марафона «Делаем СДЛ на Drupal»!

Продолжаю разработку NewsBang.net

Поменял оформление главной страницы. А то раньше сайт был похож на блог. Надо еще поработать над блоками. Так же решил все таки добавить другие разделы — Статьи и Видео. Реализовал простым добавлением нового типа материала.

Было:

Стало:

Такой вид сделал с помощью модулей Panels и Views. Не знаю, буду ли писать о первом модуле, а вот о втором обязательно будет в следующем посте. А сегодня о редакторе, добавлении источника и картинки к новости.

Редактор

Тут есть два основных способа — визуальный редактор или bb-коды. Лично мне нравится Bueditor основанный на bb-кодах. Скачиваем и активируем данный модуль.

Заходим в Настройка сайта -> BUEditor. Тут есть уже готовые наборы кнопок. Ставим для админа (user #1) — Default, для остальных — Commenter.

В итоге получаем для гостей:

И для админа:

Также можно настроить свои кнопки (Настройка сайта -> BUEditor — выбираем нужный набор и нажимаем «редактировать»):

Источник новости

Самый простой способ публиковать источник новости — это вручную вставлять ссылку в конце текста. Но этот способ скучен и уныл. Мы сделаем по красивому.

Нам потребуется глобальный модуль CCK. Для создания поля «Источник» так же нужен модуль Link. Идем в Управление содержимым -> Типы содержимого. Напротив нужного нам типа материала (в данном случае story) нажимаем «Управлять полями».

Добавляем новое поле:

При создании указываем нужные нам настройки. Я сделал так. Значение по умолчанию — newsbang.net, количество значений — 1, заголовка нет, открывание в новом окне. Нажимаем «Сохранить».

Теперь нужно настроить отображение созданного поля. Переходим во вкладку «Display fields» и ставим там:

Таким образом источник будет отображаться только в полной новости. Собственно при добавлении новости можно указывать адрес источника:

Картинка к новости

Теперь давайте создадим похожим образом отображение картинки к новости. Есть несколько способов сделать это. Я выбрал более менее простой. Для начала нам также потребуются дополнительные модули.

В первую очередь — это filefield и ImageField. Для автоматического урезания картинки — ImageCache. А для его работы — Imageapi

Да, многие модули зависят от других модулей. Вроде ничего не пропустил. Активируем все нужное в админке:

Идем в Конструкция сайта -> ImageCache. Создадим два правила отображения загруженной картинки — для анонса и полной новости. Нажимаем «Добавить новый набор правил» и вводим любое название. Я ввел «News120». Добавляем пункт «Scale»:

Таким же образом добавляем новое правило «News250» для полной новости, только значения ставим в 250.

Правила создали. Теперь создадим нужное нам поле по аналогии с источником. Идем в Управление содержимым -> Типы содержимого -> Управление полями и создаем новое поле:

Настройки можно оставить по умолчанию или изменить по своему вкусу. Можно включить параметры ALT text settings и Title text settings. Тогда их можно будет указывать при добавлении картинки. Думаю, что это, объяснять не надо. Переходим в пункт Display fields для настройки отображения поля:

В краткой новости мы указали, что картинка будет обрезана по правилу News120 и вести на полную новости, а в полной новости просто поставили правило News250.

При создании новости появилось нужное нам поле:

А теперь, так как мы используем дополнительный модуль ImageCache, надо настроить к нему доступ посетителям. Идем в Управление пользователями — Разрешение ролей и ставим галки напротив созданных правил:

Вроде бы все, но картинка отображается просто под текстом новости. Это уже вопрос дизайна. Сделаем, чтобы отображалась как на NewsBang.net — слева от текста.

Идем в Управление содержимым -> Типы содержимого -> Управление полями и помещаем поле «Картинка» перед полем «Содержимое».

Теперь заходим в FTP-клиент и открываем файл style.css в папке с используемой темой. У меня это themes/framework.

Добавляем туда следующий кусок:

div.field-field-img {
float: left;
margin-right: 10px;
margin-top: 11px;
}

field-img — это название нашего поля field_img. Так можно поменять дизайн другого любого поля, но надо знать CSS. Мы сделали, чтобы картинка была слева. И два отступа — сверху и справа. Сохраняем, сбрашиваем кэш и вуаля — все так, как надо.

Вид анонса (примеры тут — http://newsbang.net/news):

Полная новость (пример — http://newsbang.net/politseiskii-ostanovil-odnogo-i-togo-zhe-voditelya-v-raznykh-kontsakh-sveta ):

Таким образом можно создавать свои типы материалов с нужными полями.

На сегодня все. Возникли вопросы — задавайте.

——————————

P. S. GidTalk, TopSape и TopTrustLink — не пропустите третий день марафона.

Интересный блог Царько Михаила