Темизация и верстка под Drupal 6 (часть 3)

Опубликовано 2011.08.26

Открываем новость и видим что фото не подгрузилось..Инпектируем элемент Dragonfly-ем.

Ошибка в том что в начале пути к изображению нехватает слэша. Добавляем его в код,это будет выглядеть вот так.

<img src="/<?php print $node- />field_news_img[0]['filepath'] ?>" style="float:left;margin 0 5px 5px 0;" />
<?php print $node->content['body']['#value'] ?>
</?php>

Но тем не менее изображение отсутствует.Причина в том,что сайт установлен в http://localhost/my_drupal и друпал ищет папку sites в localhost , а не в localhost/my_drupal.

Так как в дальнейшем мы планируем перенести сайт на хостинг,то не будем сейчас дописывать путь к корневой папке в шаблоне ноды, а обратимся к файлу hosts.
Для Windows 7 этот файл находим в C:\Windows\System32\drivers\etc . Открываем файл hosts любым текстовым редактором.Дописываем в нём строку:

127.0.0.1 my_drupal.test

Если кто не знает-такая запись означает что при обращении к адресу my_drupal.test компьютер будет обращаться к localhost, а не "искать сайт в интерет".
Также я открыл {Директория сервера}\usr\local\apache\conf\httpd.conf и добавил в него виртуальный хост:

<VirtualHost my_drupal.test:*>
    ServerName my_drupal.test
    DocumentRoot /home/localhost/www/my_drupal
</virtualhost>

После этого обязательно перезагружаем денвер.

Теперь всё работает,только фото слишком большое.. Давайте уменьшим его и при клике сделаем увеличение в lightbox.

Для этого создадим правило. Открываем Конструкция сайта->ImageCache->Добавить новый набор правил

Назовём его news_picture.Добавим правило Scale And Crop(масштабировать и обрезать).Масштабирование укажем в пикселях, например 300 на 200.

Можно посмотреть результат обработки изображения.Такой размер нам подходит.
(Можете пошуршать в интернете в поисках сторонних модулей для обработки картинок. С их помощью можно накладывать водяные знаки и использовать другие интересные фичи.)

Запомните имя правила(news_picture), мы используем его для дальнейшей темизации ноды.
Для темизации воспользуемся функцией

theme

.
Синтаксис будет выглядеть следующим образом.

theme('imagecache', 'имя пресета imagecache', 'путь до картинки', 'альт', 'тайтл', array('border' => 0, 'class' => 'CSS класс картинки'));

Опять откроем Content Templates. Определимся с аргументами функции

theme

: имя пресета imagecache-news_picture путь до картинки-

$node->field_news_img[0]['filepath']

альт и тайтл задавать необязательно. в аргументах давайте передадим класс изображения.Пусть это будет класс

img_news

Значит функция будет выглядеть вот так:

theme('imagecache', 'news_picture', $node->field_news_img[0]['filepath'], '', '', array('class' => 'img_news'));

Теперь нужно обеспечить увеличение в lightbox. Для этого нужно создать ещё один класс(для ссылок), встретив который модуль lightbox2 обеспечит увеличение фото в модальном окне.Чтобы не ломать голову рассмотрим реализацию этого класса.
Открываем Настройка сайта->Lightbox2->Автоматическая обработка изображений
Разворачиваем пункт CSS классы изображений.
В качестве автоматического обработчика выбираем Lightbox.В поле для классов пишем любое название.Я написал lightbox.

Это означает,что любая ссылка, ведущая на изображение и имеющая класс lightbox и атрибут rel="lightbox", откроет изображение в лайтбоксе.
Для обтекания изображения текстом используем стиль

float:left;

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

.img_news{
	margin: 0 5px 5px 0;
	float:left;
}

Таким образом наш код будет таким:

<a href="/<?php print $node->field_news_img[0]['filepath'];?>" class="lightbox" rel="lightbox">
<?php
print theme('imagecache', 'news_picture', $node->field_news_img[0]['filepath'], '', '', array('class' => 'img_news'));?>
</?php></a>
<?php print $node->content['body']['#value'] ?>
</?php>

Класс img_news вставим в главнаый css файл темы.Он находится в /sites/all/themes/analytic/local.css странное название...
Добавляем в неё код класса.

Открываем любую новость.Как видим всё работает.

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