Jekyll для петли над всеми изображениями в папке?

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

В настоящее время я создаю страницу с фотографиями следующим образом:

<p style="line-height: 100px;">
<img src="photos/01.jpg"><br>
<img src="photos/02.jpg"><br>
<img src="photos/03.jpg"><br>
<img src="photos/04.jpg"><br>
<img src="photos/05.jpg"><br>
<img src="photos/06.jpg"><br>
<img src="photos/07.jpg"><br>
<img src="photos/08.jpg"><br>
<img src="photos/09.jpg"><br>
<img src="photos/10.jpg"><br>
</p>

Что совсем не удобно, если я хочу добавить или удалить новые фотографии. Возможно ли сделать что-то вроде цикла for у меня для сообщений:

{% for post in site.posts %}
     <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{% endfor %}

За исключением цикла по всем изображениям?

Спасибо!

Ответ 1

Это сработало как обаяние для меня. Не требуется никаких плагинов.

Мои изображения находятся в каталоге assets/images/slider.

{% for image in site.static_files %}
    {% if image.path contains 'images/slider' %}
        <img src="{{ site.baseurl }}{{ image.path }}" alt="image" />
    {% endif %}
{% endfor %}

image.path contains 'images/slider' обеспечивает вставку только изображений из этой папки.

Дополнительная информация здесь и jekylltalk.

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

Ответ 2

Здесь другое решение (с несколькими страницами галереи), которое не использует плагины, поэтому оно работает с страницами GitHub.

У меня есть сообщение в блоге с более подробным объяснением здесь:
Создание галереи изображений с помощью Jekyll и Lightbox2

Здесь короткая версия:

Создайте файл данных YAML (_data/galleries.yml) со списком изображений:

- id: gallery1
  description: This is the first gallery
  imagefolder: /img/demopage
  images:
  - name: image-1.jpg
    thumb: thumb-1.jpg
    text: The first image
  - name: image-2.jpg
    thumb: thumb-2.jpg
    text: The second image
  - name: image-3.jpg
    thumb: thumb-3.jpg
    text: The third image
- id: anothergallery
  description: This is even another gallery!
  imagefolder: /img/demopage
  images:
  - name: image-4.jpg
    thumb: thumb-4.jpg
    text: Another gallery, first image
  - name: image-5.jpg
    thumb: thumb-5.jpg
    text: Another gallery, second image
  - name: image-6.jpg
    thumb: thumb-6.jpg
    text: Another gallery, third image

Для списка доступных галерей просто пройдите через файл данных:
```
{% for gallery in site.data.galleries %}
- [{{ gallery.description }}]({{ gallery.id }})
{% endfor %}
```

Создайте файл макета (_layouts/gallery.html), чтобы все галереи были основаны на:

(в моем примере я использую Lightbox2 для отображения изображений, поэтому в моем примере есть дополнительный HTML, который вам даже не нужен, когда вы просто хотите использовать <img src="photos/01.jpg">)

---
layout: default
---

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/lightbox-2.6.min.js"></script>
<link href="/css/lightbox.css" rel="stylesheet" />

{% for gallery in site.data.galleries %}
  {% if gallery.id == page.galleryid %}
    <h1>{{ gallery.description }}</h1>
    <ol>
    {% for image in gallery.images %}
      <li>
        {{ image.text }}<br>
        <a href="{{ gallery.imagefolder }}/{{ image.name }}" data-lightbox="{{ gallery.id }}" title="{{ image.text }}">
          <img src="{{ gallery.imagefolder }}/{{ image.thumb }}">
        </a>
      </li>
    {% endfor %}
    </ol>
  {% endif %}
{% endfor %}

Для каждой страницы галереи создайте файл .html или .md, который содержит только три строки YAML front-matter:
```
---
title: the first gallery page
layout: gallery
galleryid: gallery1
--- 
```
Строка layout: gallery относится к файлу макета с шага 3.
Строка galleryid: gallery1 относится к файлу данных с шага 1, так что файл макета "знает", что он должен показывать изображения из первой галереи.

Что это.

Это решение автоматически не перекрывает папку изображений, но вам просто нужно вставить новые изображения в файл данных, что менее утомительно, чем создание строк <img src="photos/01.jpg"> HTML вручную (особенно, когда HTML более сложный чем это, как в моем примере Lightbox2 выше).

Плюс, как я уже сказал вначале: он работает на страницах GitHub, в которых все решения с плагинами (с которыми можно зацикливать папку с изображениями) этого не делают.

Ответ 3

В идеале вы хотите сканировать каталог изображений, а затем сгенерировать список файлов. У Джекила нет функции для этого, о чем я знаю. Это, однако, довольно расширяемо, поэтому у вас есть несколько вариантов:

Записать (или найти) плагин, который сканирует каталог. Если вы знаете Ruby, это не должно быть слишком сложно. На сайте Jekyll есть документация о том, как должен выглядеть плагин. (Вероятно, вы захотите перейти к пользовательскому тегу Liquid.)
Если вы не знаете Ruby, вы можете создать специальные HTML-страницы галереи, используя внешнюю script или программу, а затем включить сгенерированные файлы в свои шаблоны. Вот пример оболочки oneliner:

find . -name \*.jpg | sed 's:./::' | sed 's/^/<img src="/' | sed 's/$/"><br>/'
Если вы придерживаетесь своего соглашения об именах, вы можете просто подделать его и просто использовать регулярный цикл:
```
{% for i in (1..10) %}
<img src="photos/{{ i }}.jpg"><br>
{% endfor %}
```
Но это означало бы, что вам все равно придется помнить, чтобы обновить номер "10".

Второй вариант и третий вариант менее чисты, но оба имеют то преимущество, что они будут работать с страницами GitHub (если это то, что вы используете), в то время как первый не будет.

Ответ 4

Перечислить файлы jpg в текущем каталоге в Jekyll можно следующим образом:

{% 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/

ОБНОВЛЕНИЕ: Кодекс Джекилла реализовал этот код для легкого повторного использования, позволяя вам просто написать:

{% include image-gallery.html folder="/uploads/album" %}

Ответ 5

Вы можете сделать также с коллекцией
под корневым _collection create _collection положите туда изображения

на _config.yaml добавить этот код

collections:
  - collection

с front matter
создать коллекцию атрибутов

И тогда код для перечисления изображения будет что-то вроде

{% for image in site.collection %}
     <img src="{{ file.url }}" />
{% endfor %}

Ответ 6

Реализация Jekyll Codex, предложенная Joosts, является отличной отправной точкой. Я исследовал некоторое время, и есть множество подобных проектов, но большинство из них прекращено или частично работает.

После некоторых копаний я чувствую, что лучший проект для варианта использования - это Azores Image Gallery, он достаточно быстрый и занимает мало места в памяти, поскольку полагается на Minimagick небольшую оболочку Ruby для ImageMagick. :

https://github.com/simoarpe/azores-image-gallery

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я автор.