Показать все изображения из каталога на веб-сайте Jekyll

Question

Это не обязательно должно быть что-то, что использует Jekyll.

В основном я создаю галерею, которая будет использовать лайтбокс. Я хочу загрузить все изображения из каталога (_site \ images \ gallery) для отображения лайтбоксов и их миниатюр (которые будут определены и созданы).

Что было бы лучшим способом сделать это? У меня уже установлен и протестирован лайтбокс (нет эскизов).

Заранее спасибо.

Answer 1

У Jekyll нет способа «перечислить содержимое папки».

Вы можете сделать очень приблизительную вещь, используя фронт yaml.

В «странице галереи», включают в себя раздел с именами файлов образов:

--- 
images: 
    - a.jpg 
    - b.jpg 
    - c.jpg 
<other properties, like title, etc> 
--- 

Затем, когда вы хотите перечислить ваши изображения, производить ссылки с петлей. Я не знаком с синтаксисом lighbox для изображений, но это будет, вероятно, выглядеть примерно так:.

<ul class="something"> 
{% for image in page.images %} 
    <li class="something"> 
    <a rel="something" class="something" href="/path/to/images/dir/{{ image }}" /> 
    </li> 
{% endfor %} 
</ul> 

(я поставил «нечто» на каждом месте, когда я не уверен о чем-то это может быть возможно, вам придется полностью удалить некоторые «somethings». Вам нужно будет изменить /path/to/images/dir/, где ваши изображения)

После изменения html для работы с лайтбокс, единственное, что вам нужно сделать, чтобы добавить новый image: a) поместить его в каталог изображений и b) отредактировать страницу галереи и ввести новое имя изображения в списке.

Это не так удобно, как наличие списка «автоматически генерируется», но это очень близко.

Answer 2

Я люблю Jekyll плагины.

Попробуйте использовать один из следующих вариантов: Jekyll Gallery, Jekyll Gallery Generator, или Folder Gallery.

Проверьте файл Ruby для каждого плагина и измените тег изображения, сгенерированный для включения класса для лайтбокса. Это должно делать свое дело. Не забудьте включить файл photoshop lightbox на страницу шаблона по умолчанию.

Answer 3

Листинг файлов JPG в текущем каталоге в Джекила можно сделать так:

{% for file in site.static_files %} 
    {% assign pageurl = page.url | replace: 'index.html', '' %} 
    {% if file.path contains pageurl %} 
    {% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %} 
    <img src="{{ file.path }}" /> 
    {% endif %} 
    {% endif %} 
{% endfor %} 

Подробнее об этом решении можно найти здесь: http://jekyllrb.com/docs/static-files/. Я создал расширение лайтбокса для Jekyll, указанное на моей странице Jekyll without plugins. Проверьте это!