Марафон «Делаем СДЛ на 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 комм.)   | 2nd Февраль, 2011:

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


  2. 2 Шелвин (1117 комм.)   | 2nd Февраль, 2011:

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


  3. 3 Kaena (3 комм.)   | 2nd Февраль, 2011:

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


  4. 4 Шелвин (1117 комм.)   | 2nd Февраль, 2011:

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


  5. 5 ololo (14 комм.)   | 2nd Февраль, 2011:

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


  6. 6 Andrew (28 комм.)   | 2nd Февраль, 2011:

    @Шелвин: 1680*1050


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

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


  8. 8 Шелвин (1117 комм.)   | 3rd Февраль, 2011:

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


  9. 9 WebMaster (2 комм.)   | 3rd Февраль, 2011:

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


  10. 10 WebMaster (2 комм.)   | 3rd Февраль, 2011:

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


  11. 11 Шелвин (1117 комм.)   | 4th Февраль, 2011:

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


  12. 12 Cappie (3 комм.)   | 4th Февраль, 2011:

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


  13. 13 ololo (14 комм.)   | 4th Февраль, 2011:

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

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


  14. 14 Шелвин (1117 комм.)   | 4th Февраль, 2011:

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

    скриншот

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


  15. 15 ololo (14 комм.)   | 4th Февраль, 2011:

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


  16. 16 wertock (10 комм.)   | 4th Февраль, 2011:

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


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

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


  18. 18 Шелвин (1117 комм.)   | 4th Февраль, 2011:

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


  19. 19 Fubuki (4 комм.)   | 5th Февраль, 2011:

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


  20. 20 RapidHunter (1 комм.)   | 5th Февраль, 2011:

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


  21. 21 Шелвин (1117 комм.)   | 5th Февраль, 2011:

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

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


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

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


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

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


  24. 24 Шелвин (1117 комм.)   | 8th Февраль, 2011:

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


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

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

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


  26. 26 Шелвин (1117 комм.)   | 11th Февраль, 2011:

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


  27. 27 dezm (6 комм.)   | 25th Май, 2011:

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


  28. 28 Phonteq (21 комм.)   | 14th Июль, 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 комм.)   | 14th Июль, 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 комм.)   | 14th Июль, 2011:

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


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

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

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


  32. 32 Шелвин (1117 комм.)   | 17th Июль, 2011:

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


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

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


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

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

    С ув.


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

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


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

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

    С ув.


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

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


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