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

Способы вставки изображений

Публикуемые на сайтах статьи могут содержать различные изображения (фотографии, рисунки, скриншоты и т.д.). До сегодняшнего дня мы размещали на сайте лишь текст; рассмотрим, как добавлять в него изображения.

На языке HTML разметка изображения осуществляется тегом img с атрибутом src, у которого в качестве значения используется URL места размещения изображения. Возникает вопрос, где должно находиться изображение: в сети Интернет (на любом другом сайте) или на вашем собственном сайте (хостинге, где размещены файлы сайта)? Когда изображение размещено на других ресурсах, то все достаточно просто: копируем адрес рисунка (чтобы получить адрес изображения, в браузере щелкают по нему правой кнопкой мыши и выбирают Свойства изображения) и вставляем его в тег img статьи на своем сайте. Если же мы хотим загрузить изображение на наш сайт, то существует как минимум два варианта:

  • заранее загрузить "вручную" на сайт (например, по протоколу ftp или с помощью модуля upload), затем посмотреть адрес изображения и использовать его при добавлении тега img;
  • вставлять изображения в момент редактирования статьи, загружая их с помощью специального модуля в файловую структуру CMS Drupal.

Второй вариант предпочтительнее, если вы не единственный, кто публикует материалы на сайте. Рассмотрим оба варианта.

Добавьте на ваш сайт от имени любого из блогеров статью, которая содержит два-три изображения (но пока без них), например, "Цикл While" (13). Первый рисунок (while.png) разместим копированием/перемещением в файловую структуру Drupal; но куда? По логике вещей, если модули и темы, которые загружает администратор сайта, помещаются в каталог sites/all, то хорошо бы здесь же размещать изображения. Создадим каталог sites/all/images и переместим сюда один из рисунков.

Теперь откроем статью на редактирование, установим курсор в место, где должно быть это изображение и вставим тег img (можно воспользоваться соответствующей кнопкой BUEditor). Лучше указывать относительный адрес, т.к. в этом случае при смене доменного имени адрес все равно будет правильно указывать на местоположение рисунка. В результате тег должен выглядеть примерно так:

<img src="sites/all/images/while.png" width="605" height="209" alt="Цикл While" />

Когда вы сохраните статью после редактирования, то не увидите изображения, т.к. <img> не является допустимым тегом для формата ввода Filtered HTML. Добавьте <img>в настройках этого фильтра.

Второе изображение будем добавлять с помощью специального модуля — IMCE. Загрузите его с сайта drupal.org и распакуйте в каталог sites/all/modules, после чего включите на странице Модули CMS Drupal. На странице Настройка сайта ? IMCEназначьте для роли "блогер" профиль User-1. Теперь зайдем на сайт под блогером и попробуем вставить в статью второе изображение.

Нажмите на кнопку вставки изображения редактора BUEditor, там должна появиться кнопка Browse. Нажмите ее, откроется окно файлового браузера IMCE. IMCE настроен так, что открывает просмотр каталога sites/default/files/, куда многие модули сохраняют сгенерированные и загруженные с их помощью файлы. Конечно, лучше если администратор создаст здесь дополнительный каталог и настроит IMCE так, чтобы открывался именно он.

Для загрузки изображения в окне IMCE следует нажать кнопку Загрузить, выбрать и загрузить изображение. После этого изображение появиться в основном окне IMCE, надо выделить его и нажать кнопку Send to editor.

Установка и использование GeSHi

На сайте, который мы создаем, некоторые статьи содержат примеры программного исходного кода. Код принято помещать в контейнер тега code. Внешний вид, который принимает исходный код после этого, зависит от применяемого к нему стиля CSS. Если вы посмотрите на любую статью сайта на Drupal, содержащую пример исходного кода, то заметите, что шрифт внутри тега code отличается от основного шрифта. Т.е. сама тема CMS имеет описание стиля для этого тега. Несмотря на это есть ряд проблем. Исходный код легче читается, если выполнена его синтаксическая подсветка. Реализовывать это только с помощью языков HTML и CSS весьма трудоемкая задача. В исходном коде бывает важным наличие отступов от левого края строки. Например, в языке программирования Python отступы имеют синтаксический смысл. Как мы видим, тег code их не интерпретирует.

Проблему можно решить с помощью установки специального модуля, который отвечает за то, как отображается содержимое контейнера code. В системе Drupal широко используется модуль GeSHi Filter for syntax highlighting. Этот модуль позволяет использовать библиотеку GeSHi, которая должна быть также загружена в файловую структуру CMS Drupal.

Загрузите с сайта drupal.org модуль GeSHi Filter for syntax highlighting и распакуйте его в каталог sites/all/modules. C sourceforge.net/projects/geshi/files/geshi/ загрузите саму библиотеку. Каталог geshi (библиотека) должен быть помещен внутрь каталога модуля geshifilter.

Откройте страницу Модули сайта и включите только модуль Geshi Filter (GeSHi field и GeSHi node нам пока не нужны). Теперь его нужно настроить на странице Настройка сайта ? GeSHi Filter. Здесь в поле Generic syntax highlighting tagsсодержатся теги, которые будут "обрабатываться" модулем GeSHi Filter. В поле Default highlighting mode (вариант подсветки по умолчанию) следует выбрать язык программирования, для которого будет выполняться подсветка синтаксиса, если используется тег code (или любой другой из указанных в поле Generic syntax highlighting tags) без каких-либо атрибутов. Когда необходимый язык отсутствуют, то его можно включить на странице Настройка сайта ? GeSHi Filter ? Языки ? Отключено. Перейдите на эту страницу и включите Pascal, после чего на странице Включено пропишите тег для этого языка (
). Но на странице общих настроек GeSHi filter выберите в качестве варианта подсветки по умолчанию язык программирования Python и сохраните изменения.

Если вы теперь посмотрите на ранее созданную статью, содержащую тег code, то не увидите изменений. Дело в том, что для формата ввода Filtered HTML не включен фильтр GeSHi filter. Исправить этот недочет можно на странице Настройка сайта ? Форматы ввода ? Filtered HTML. После этого подсветка кода сработает.

Когда в тексте статьи вам потребуется подсветка синтаксиса отличная от установленной по умолчанию, вместо тега <code> следует прописать тег для требуемого языка (например, <pascal>). При этом язык программирования должен быть предварительно включен на странице настроек GeSHi filter.

Создано