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

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

wip1

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

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

Было:

823a0ac4

Стало:

588a7c6f

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

Редактор

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

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

7c7b2544

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

b1dd8bf7

И для админа:

f419f000

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

15ec0cec

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

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

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

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

5d4fd2cf

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

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

cbcda0ca

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

84df01fb

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

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

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

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

78ee532a

35ffd24b

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

282c814a

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

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

f2fa39a7

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

cbcda0ca

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

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

4b161b86

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

bd3999c4

Вроде бы все, но картинка отображается просто под текстом новости. Это уже вопрос дизайна. Сделаем, чтобы отображалась как на 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):

733c2dfd

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

b54563e0

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

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

——————————

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

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

Темы: Создание сайтов, ,

комментариев - 37 »



Новые посты бесплатно через RSS-ленту или E-mail оповещения:

E-mail:


Похожие записи:


комментариев - 37 | “Марафон «Делаем СДЛ на Drupal»! День 3”

  1. 1 Andrew (28 комм.)  | 2 февраля, 2011:

    У меня на широком мониторе шляпа вашего новостника разъезжается и получается не очень красиво
    В шаблоне наверно не прописана ширина шапки


  2. 2 Шелвин (1110 комм.)  | 2 февраля, 2011:

    @Andrew: Сейчас проверю. А какое разрешение экрана?


  3. 3 Kaena (3 комм.)  | 2 февраля, 2011:

    Угу, у меня тоже разъехалась.
    Раз уж пишу) Спасибо за друпальские полезняшки :)


  4. 4 Шелвин (1110 комм.)  | 2 февраля, 2011:

    @Kaena: Так разрешение скажите. А то я во всех возможных проверил – все ок :)
    Дизайн я специально переделал под резиновый


  5. 5 ololo (14 комм.)  | 2 февраля, 2011:

    Ну вообще годнота!!!
    Нет слов. Завтра начну стряпать сайт по твоему мануалу. Продолжай в том же духе.


  6. 6 Andrew (28 комм.)  | 2 февраля, 2011:

    @Шелвин: 1680*1050


  7. 7 Алексей (9 комм.)  | 3 февраля, 2011:

    1680*1050 всё нормально, ничего не разъезжается, браузер Chrome.
    Спасибо за статью. Материал становится всё сложнее и сложнее :) И что самое печальное таки 7й друпал прилично отличается


  8. 8 Шелвин (1110 комм.)  | 3 февраля, 2011:

    @Алексей: Отличается, но принцип-тот же.


  9. 9 WebMaster (2 комм.)  | 3 февраля, 2011:

    Поправь ссылку на ССK


  10. 10 WebMaster (2 комм.)  | 3 февраля, 2011:

    Делал все – изображения не отображаются…


  11. 11 Шелвин (1110 комм.)  | 4 февраля, 2011:

    @WebMaster: Спасибо, поправил. Должны отображаться. Скорей всего что-то не так сделал.


  12. 12 Cappie (3 комм.)  | 4 февраля, 2011:

    Спасибо, что все очень наглядно описываеш, хотя я с Drupal еще не работал.


  13. 13 ololo (14 комм.)  | 4 февраля, 2011:

    Что-то касячки у меня пошли на втором уроке в середине. На сегодня хватит. В течение пары дней поразбираюсь, а потом к тебе вопросы будут. Вот так коряво адрес пишется http://supis.ru/about%20

    Кстати выздоравливай, не фиг грипповать!


  14. 14 Шелвин (1110 комм.)  | 4 февраля, 2011:

    @ololo: Проверь, не закрался ли в адрес пробел:

    скриншот

    Спасибо, лечусь потихоньку.


  15. 15 ololo (14 комм.)  | 4 февраля, 2011:

    @Шелвин: Ага, в пробеле дело. Оперативно. Будем допиливать. Вопросов по прежнему много. Если что, буду в коммах надоидать.
    Арбидольчику бахни, помогает.


  16. 16 wertock (10 комм.)  | 4 февраля, 2011:

    Друпал сила. Спасибо за пост.


  17. 17 Аббат_Кальне (6 комм.)  | 4 февраля, 2011:

    ты скажи откуда у тя посещалка уже такая?


  18. 18 Шелвин (1110 комм.)  | 4 февраля, 2011:

    @Аббат_Кальне: Собственно статистика открыта. Но о трафике у меня будет пост или даже не один.


  19. 19 Fubuki (4 комм.)  | 5 февраля, 2011:

    Почитал ваши марафоны….блин никогда и близко не стану ))) сложно пока для меня. А так – очень круто выходит.


  20. 20 RapidHunter (1 комм.)  | 5 февраля, 2011:

    Гляньте вот эту страницу:
    http://newsbang.net/uchenik-prines-v-shkolu-pirozhki-s-marikhuanoi
    Содержание явно не соответствует заголовку и картинке, видимо случайно скопипастили не то, что надо.


  21. 21 Шелвин (1110 комм.)  | 5 февраля, 2011:

    @Fubuki: Рад, что понравилось.

    @RapidHunter: Спасибо, поправил. А сайт на Drupal у вас просто отличный :)


  22. 22 Антон (9 комм.)  | 5 февраля, 2011:

    спасибо, будем пробовать


  23. 23 Евгений (4 комм.)  | 7 февраля, 2011:

    может кинуть вордпресс и перейти на друпал?
    Вроде интересней получается.


  24. 24 Шелвин (1110 комм.)  | 8 февраля, 2011:

    @Евгений: Лучше выбирать CMS в зависимости от того, что требуется сделать.


  25. 25 Аббат_Кальне (6 комм.)  | 9 февраля, 2011:

    можешь вкратце сказать сколько там процента копипаста?…

    и контент ты сам пишешь? или люди?


  26. 26 Шелвин (1110 комм.)  | 11 февраля, 2011:

    @Аббат_Кальне: Уник контента пока нет. Размещаю сам.


  27. 27 dezm (6 комм.)  | 25 мая, 2011:

    Логотип на сайте очень понравился, хорошая задумка….


  28. 28 Phonteq (21 комм.)  | 14 июля, 2011:

    Шелвин, помоги,когда установил 4модуля imagecache,filefield… при добавлении пункта “Scale” появляется ошибка :”Fatal error: require_once() [function.require]: Failed opening required ‘modules/imagecache/imagecache_actions.inc’ (include_path=’.:/usr/local/php52/lib/php’) in /****/*****/****/*****/sites/all/modules/imagecache/imagecache.module on line 310″
    вместо знака *** был написан путь хостинга


  29. 29 Phonteq (21 комм.)  | 14 июля, 2011:

    Эту проблему решил, включил кэширование и всё стало норм. Но возникла другая проблема, при закачивании картинки возникает ошибка
    “Произошла ошибка HTTP 0.
    /filefield/ahah/story/field_img/0″
    потом перекидывает на страницу со следующим содержимым “{ “status”: true, “data”: “\x3cdiv id=\”edit-field-img-0-ahah-wrapper\”\x3e\x3cdiv class=\”form-item\” id=\”……..”


  30. 30 Phonteq (21 комм.)  | 14 июля, 2011:

    Нашел решение проблемы. Мешал сторонний Jscript…хотя может быть и не сторонний))


  31. 31 Дмитрий (1 комм.)  | 17 июля, 2011:

    Здравствуйте! Делал вс( по вашим рекомендациям, но вот этот стиль у меня не работает ни на одной теме…
    Что может быть, подскажите?

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


  32. 32 Шелвин (1110 комм.)  | 17 июля, 2011:

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


  33. 33 Дмитрий (1 комм.)  | 28 сентября, 2011:

    Здравствуйте! Будьте добры, если Вас не затруднит напишите пожалуйста как Вы делали блоки с помощью Panels?
    Спасибо.


  34. 34 Азамат (4 комм.)  | 13 октября, 2011:

    При помощи какого модуля организовали хлебные крошки?

    С ув.


  35. 35 Шелвин (1110 комм.)  | 13 октября, 2011:

    @Азамат: http://drupal.org/project/custom_breadcrumbs


  36. 36 Азамат (4 комм.)  | 15 октября, 2011:

    Спасибо! А вы использовали свой пхп код или все на стандарте делали? Просто, что-то не подружусь с ними (custom breadcrumbs) никак.

    С ув.


  37. 37 Шелвин (1110 комм.)  | 15 октября, 2011:

    @Азамат: Использовал стандартный функционал. Посмотрите еще Custom Breadcrumbs for Taxonomy.


Оставить комментарий

  • Имя (обязательно)
  • E-mail (не публикуется) (обязательно)
  • Блог