Lightbox и Ghost

Рассмотрим один из интересных вопросов оформления блогов на Ghost - создание в статье или заметке галереи изображений.

Не секрет, что довольно часто приходится использовать графический материал иллюстрирующий вашу статью в блоге или что-либо поясняющий. И в большинстве случаев встраиваемое изображение имеет большой размер, а вставлять по всей статье такие "простыни" очень сильно вредит психике читателя :) Тем более, что уже минимум лет 10 на всех нормальных сайтах для этих целей используют т.н. лайтбоксы - активный скрипт позволяющий по щелчку на миниатюре изображения развернуть на весь экран его полную/оригинальную версию. Таких скриптов много, они разные но вот до движка Ghost они еще не добрались :( Вернее, стандартные темы оформления блогов (тот же Casper) не содержат встроенных скриптов лайтбоксов. А вещь эта, как вы поняли нужная...

Будем прикручивать сами, тем более что сделать это не сложно, даже не придется править код темы. Прежде всего остановимся на том какой лайтбокс скрипт возьмем на вооружение? Волевым решением, себе я выбирают Lightbox2 от Lokesh Dhakar. Он - маленький, шустрый, стабильный и обладает огромным преимуществом в требовании к оформлению галереи изображений - миниатюры изображений должны быть html ссылками на полные их версии. При таком оформлении исходного материала даже если по какой-либо причине не загрузиться или "сбойнет" код Lightbox2 - миниатюры все-равно будут кликабельны на полные версии и навигация по сайту не пострадает!

Итак начнем:

  • Слава Богу, ничего нам скачивать и внедрять в код сайта не нужно, т.к. Lightbox2 доступен на CDNJS.
  • Заходим в "админку" нашего блога и переходим в раздел Code Injection.
  • В раздел Blog Header добавляем строку <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.css" /> - это каскадный шаблон для нашего лайтбокса.
  • В раздел Blog Footer, в самый самый низ, т.е. самой последней строчкой (это важно!) добавляем <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.js"></script> - это сам код лайтбокса.

Как ни удивительно, но это всё - теперь лайтбокс будет работать на нашем блоге. Осталось материал правильно подать, чтобы скрипт его увидел и сделал нужную работу. Как я уже писал, требования к изображениям такое, тег <img> с миниатюрой должен быть вложен в тег <a> с сылкой на полное изображение, а чтобы Lightbox2 распознал эту конструкцию, в теге <a> еще должен быть атрибут data-lightbox="img_gallery". Сразу скажу, что значение этого атрибута определяет группу которой принадлежит это изображение и по которой Lightbox2 будет проводить навигацию, после того как покажет его полную версию, но об этом вы прочтете в документации автора лайтбокса. Т.е. код внедрения изображения картинки должен выглядеть так:

<a data-lightbox="img_gallery" href="http://FULL_IMAGE_URL.jpg"><img src="http://THUMBNAIL_IMAGE_URL.jpg"></a>  

Если изображений несколько, и все они относятся к одной группе, тогда к примеру так:

<a data-lightbox="img_gallery" href="http://FULL_IMAGE1_URL.jpg"><img src="http://THUMBNAIL_IMAGE1_URL.jpg"></a>  
<a data-lightbox="img_gallery" href="http://FULL_IMAGE2_URL.jpg"><img src="http://THUMBNAIL_IMAGE2_URL.jpg"></a>  
<a data-lightbox="img_gallery" href="http://FULL_IMAGE3_URL.jpg"><img src="http://THUMBNAIL_IMAGE3_URL.jpg"></a>  

Поскольку Markdown, используемый в Ghost, позволяет вставлять html код прямо в текст статьи, то вы можете писать именно так, как я привел в примере. Ну, а почему бы не использовать синтаксис самого Markdown? Ведь по задумке автора, именно этот язык должен быть языком оформления материала статей, а html - это от безысходности, это неправильно, не наш путь :) Сможем ли мы обойтись только Markdown? Сможем! Итак, реализуем всё что мы написали выше, но в Markdown синтаксе:

[![](http://THUMBNAIL_IMAGE_URL.jpg)](http://FULL_IMAGE_URL.jpg)

Как видим ничего сложного, изображение встроено в ссылку! Но где же атрибут data-lightbox? Всё верно, его нет и так просто наша идея не реализуется. И, к сожалению, тут мы наступаем на серьезное ограничение Ghost - его интерпретатор Markdown синтаксиса не позволяет вставлять в ссылки произвольные атрибуты! Но, Ghost - молодой движок и не все "глюки" в нем еще исправлены :) И мы будем использовать недокументированную его особенность (в простонародье - BUG), которую часто используют для внедрения своих скриптов в чужие сайте - мы "разорвем" URL ссылку на полную версию изображения и дополним ее нужным нам атрибутом. Выглядит это так:

[![](http://THUMBNAIL_IMAGE_URL.jpg)](http://FULL_IMAGE_URL.jpg" data-lightbox="img_gallery)

Внимательно следите зак кавычками, тут ничего не напутано, все именно так и должно быть. Первая двойная кавычка в ссылке заканчивает URL и разрывает его, далее идет атрибут с именем группы и незакрытой последней двойной кавычкой, которая будет закрыта интерпретатором Markdown синтаксиса в Ghost и в результате мы получим тег <a href="http://FULL_IMAGE_URL.jpg" data-lightbox="img_gallery">, что нам и нужно.

А выглядеть в работе это будет так (кликаем на изображении):

P.S.: Конечно, со временем ошибку в обработке URL в Markdown синтаксисе исправят, но будет это похоже не скоро, т.к. уже в свет вышла версия 0.7.8, а баг и поныне там. Но, я надеюсь, что к тому времени как ошибка будет устранена - появится возможность добавлять атрибуты (и желательно еще и классы) в элементы оформления синтаксиса Markdown.

profile for 23W on Stack Exchange, a network of free, community-driven Q&A sites Google+