Инженер с ул.Лизюкова

Дисклеймер: рубрика «Занимательное джекиловодство» предназначена для начинающих пользователей Jekyll. В ней я в письменной форме отвечаю на вопросы связанные с Jekyll заданные мне больше одного раза.

Предлагаемое решение – использовать этот плагин в связке с Ideal-Image-Slider. Кстати, если вы хостите свой сайт на GitHub Pages, то все что описывается в этой статье, вам не подойдет. Специально для вас, разработано другое решение – jekyll-ideal-image-slider-include.

Что нужно сделать:

1. Скопировать ideal_image_slider.rb в папку _plugins
2. Отредактировать _config.yml, добавив туда строку iis_slider_array: []
3. Подключить js/css файлы слайдера в свой шаблон

Как всем этим хозяйством пользоваться:

Размещаем наши изображения внутри данной конструкции:

  {% slider%}   
    изображения   
  {% endslider %}

На этом всё! Шутка ;)
Ок, продолжим!

Основной синтаксис такой:

  {% slider %}
    ![alt text 1](image1.jpg)
    ![alt text 2](image2.jpg)
    ![alt text 3](image3.jpg)
  {% endslider %}

Плагин сгенерирует нам следующий html:

  <div id="slider">
    <img src="image1.jpg" alt="alt text 1">
    <img src="image2.jpg" alt="alt text 2">
    <img src="image3.jpg" alt="alt text 3">
  </div>

Если нужно, чтобы изображение слайда вело по какой-то ссылке:

  {% slider %}
    [![alt text 1](image1.jpg)](/page/url)
    [![alt text 2](image2.jpg)](/category/url)
    [![alt text 3](image3.jpg)](http://site.ru)
  {% endslider %}

Плагин добавил ссылку на каждое изображение в слайдера:

  <div id="slider">
    <a href="/page/url"><img src="image1.jpg" alt="alt text 1"></a>
    <a href="/category/url"><img src="image2.jpg" alt="alt text 2"></a>
    <a href="http://site.ru"><img src="image3.jpg" alt="alt text 3"></a>
  </div>

Можно кликать ;)

Дополнительные возможности:

Определить высоту слайдера можно указав соответствующее число в параметре тега:

  {% slider 700 %}

Также можно указать соотношение сторон:

  {% slider 4:3 %}

Или сделать её auto (проще не указывать её вообще, значение по умолчанию так и так – auto)

  {% slider auto %}

Лично я рекомендую все изображения привести к максимально нужной вам высоте, используя графический редактор, ну высоту слайдов в разметке оставлять по умолчанию, т.е. в auto.

Навигация слайдера («буллиты») включается так:

  {% slider bullets %}

Если вы решили принудительно указать высоту слайдов, то так:

  {% slider 500 bullets %}

Текст на слайдах (титры) выводится из параметров alt. Т.е., текст указанный [![здесь](image.jpg)] будет использоваться в качестве подписи к изображению.

Пример:

  {% slider captions %}
  {% slider 500 captions %}
  {% slider captions %}
    ![это текст](image1.jpg)
    ![будет использоваться как подпись](image2.jpg)
    ![для изображения](image3.jpg)
  {% endslider %}

В итоге, синтаксис нашей Markdown разметки для слайдера, будет такой:

  {% slider height [bullets] [captions] %}
    изображения 
  {% endslider %}

Мы рассмотрели различные параметры разметки слайдера, пришло время интегрировать его в наш шаблон. Сделать это можно либо вручную, либо используя Bower. Ну и поскольку, эта памятка предназначена для новичков, мы будем рассматривать первый вариант.

Предложения по интеграции:

Подключите CSS файлы слайдера в вашу тему:

  <! - Slider CSS ->
  <link rel = "stylesheet" href = "{{" /path/to/ideal-image-slider.css "| relative_url}}">
  <link rel = "stylesheet" href = "{{" /path/to/themes/default.css "| relative_url}}">

Для новичков: ищи в папке _includes, файл, скорее всего, называется head.html

Подключите JavaScript файлы слайдера в вашу тему:

  <!-- Slider -->
  <script src="{{ "/path/to/ideal-image-slider.min.js" | relative_url }}"></script>
  <script src="{{ "/path/to/iis-bullet-nav.js" | relative_url }}"></script>
  <script src="{{ "/path/to/iis-captions.js" | relative_url }}"></script>

  <!-- Sliders on pages -->
  {% for script in page.iis_slider_scripts %}
    {{ script }}
  {% endfor %}
  <!-- Sliders on indexes -->
  {% for post in paginator.posts %}
    {% for script in post.iis_slider_scripts %}
      {{ script }}
    {% endfor %}
  {% endfor %}

В шаблоне страницы скрипты рекомендуется размещать непосредственно перед тегом </ body>

Для новичков: ищи в папке _includes, файл, скорее всего, называется script.html. Если такого файла там нет, то копируй подключение скриптов в footer.html

Не забудьте изменить пути до CSS и JavaScript файлов.

Выборочное подключение:

В предыдущем примере мы использовали код, который сделает подключение файлов слайдера для каждой страницы вашего блога. В этом ничего страшного нет, всё же я рекомендую делать выборочное подключение. Используя приведенный ниже код, CSS и JavaScript будут загружены только для тех страниц, где вы непосредственно используете слайдер изображений.

  {% if page.iis_slider_active %}
    <!-- Slider CSS -->
    <link rel="stylesheet" href="{{ "/path/to/ideal-image-slider.css" | relative_url }}">
    <link rel="stylesheet" href="{{ "/path/to/themes/default.css" | relative_url }}">
  {% endif %}
  {% if page.iis_slider_active %}
    <!-- Slider -->
    <script src="{{ "/path/to/ideal-image-slider.min.js" | relative_url }}"></script>
    <script src="{{ "/path/to/iis-bullet-nav.js" | relative_url }}"></script>
    <script src="{{ "/path/to/iis-captions.js" | relative_url }}"></script>
    <!-- Sliders on pages -->
    {% for script in page.iis_slider_scripts %}
      {{ script }}
    {% endfor %}
    <!-- Sliders on indexes -->
    {% for post in paginator.posts %}
      {% for script in post.iis_slider_scripts %}
        {{ script }}
      {% endfor %}
    {% endfor %}
  {% endif %}

Всем удачи!