Легкий способ публикации картинок в FCKeditor + IMCE + Lightbox2

Drupal очень гибок, именно поэтому он нравиться мне. Любую проблему можно решить несколькими путями.

Перед мною стала задача — сделать загрузку и публикацию картинок в тексте простой и удобной.
Я обращаю ваше внимание на то, что я не собираюсь создавать интерактивные галереи. Я лишь хочу, чтобы юзер мог загружать картинки через удобный визуальный редактор и так же удобно их публиковать.

В качестве редактора я выбрал FCKeditor, в качестве загрузчика картинок и браузера файлов IMCE.

Теперь о самой проблеме.

Представим, что вы загрузили картинку на сервер, создали её thumbnail и теперь хотите вставить этот thumbnail в ваш пост. Thumbnail при клике на него должен открывать картинку в оригинальном размере, используя для этого модуль Lightbox2.

Делать вручную — неудобно и долго.
На страницах drupal.ru я нашел решение. Решение заключалось в правке FCKeditor. Так что при каждом обновлении пришлось бы заново править все эти файлы.
Поэтому я решил написать свой велосипед, маленький и не очень гибкий. Но подходящий для моего сайта.

Решение

Я самый яростный не любитель писать плагины — люблю делать всё через page.tpl.php или же инклудить свои функции прямо в index.php.

Окей, давайте посмотрим в html код страницы, и увидим, что же мы имеем на данный момент:

<img alt="" height="90" src="/sites/default/files/img/2-27SP_vorn_small.jpg" width="90" />

* This source code was highlighted with Source Code Highlighter.

нам нужно превратить этот код во что-то примерно такое:

<a href="/sites/default/files/img/2-27SP_vorn.jpg"><img src="/sites/default/files/img/2-27SP_vorn_small.jpg" alt="" ></a>

* This source code was highlighted with Source Code Highlighter.

Давай откроем наш page.tpl.php (это файл вашей темы).
И напишем самую первую строку нашего кода:

if(strstr($content,'src=')){
}

* This source code was highlighted with Source Code Highlighter.

Эта строка скажет нам, есть ли на странице элементы-картинки.
Далее мы напишем скрипт, изменяющий картинку на картинку-ссылку, ведущую на оригинал.

$content = preg_replace('#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#',"<a href=\"$1.$3\"><img src=\"$1$2.$3\" $4></a>",$content);

* This source code was highlighted with Source Code Highlighter.

+ давайте сделаем так, чтобы эти изменения не проходили на страницах визуального редактора. Для этого создадим вот такое условие:

if(!strstr($_SERVER['REQUEST_URI'],'edit'))

* This source code was highlighted with Source Code Highlighter.

В итоге у нас получился вот такой скрипт:

if(!strstr($_SERVER['REQUEST_URI'],'edit'))
{
  if (strstr($content,"src="))
  {
   $content = preg_replace('#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#',"<a href=\"$1.$3
\"><img src=\"$1$2.$3\" $4></a>",$content);
  }
}

* This source code was highlighted with Source Code Highlighter.

Теперь этот код можно смело вставить в самое начало файла page.tpl.php.

Что у нас получилось?

Любому пользователю теперь достаточно загрузить картинку, создать thumbnail с суффиксом _small(он создается если выбрать пункт при загрузке) и добавить этот thumbnail в ноду.

+ Добавляем поддержку lightbox2

Заходим в админку, затем на страницу Lightbox'а.
Находим вкладку Automatic image handling.
Переходим в пункту Custom Class Images.
Выбираем Lightbox, ну или например Lightbox Groped и указываем имя класса-картинки.
По дефолту стоит lb2. Такое и советую оставить.

Меняем наш скрипт таким образом, чтобы картинка имела этот класс.

if(!strstr($_SERVER['REQUEST_URI'],'edit'))
{
  if (strstr($content,"src="))
  {
   $content = preg_replace('#<img width=\"[0-9a-zA-Z ]*\" height=\"[0-9a-zA-Z ]*\" src=\"([a-zA-Z0-9\/_-]+)*(_small+)\.(jpg|gif|png+)\"([ a-zA-Z="-_.]+)*\/\>#',"<a href=\"$1.$3
\"><img class=\"lb2\" src=\"$1$2.$3\" $4></a>",$content);
  }
}

* This source code was highlighted with Source Code Highlighter.

Всё готово!

Скачать скрипт целиком [0.5 kb]

Результат работы скрипта (тестовый сайт)