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

Question

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

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

Как лучше всего это сделать? Я уже установил и протестировал лайтбокс (без миниатюр).

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

Answer 1

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

Вы можете сделать очень приблизительную вещь, используя фронт 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>

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

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

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

Answer 2

Попробуйте https://github.com/simoarpe/azores-image-gallery

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

Я попробовал некоторые из проектов, уже доступных на Github, но большинство из них прекращено или частично работает, и в конце я решил реализовать что-то самостоятельно, начиная с хороших моментов, найденных вокруг. В результате получается Галерея изображений Азорских островов .
Для более подробного объяснения проверьте файл README .

Answer 3

Список файлов 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/. Я создал расширение лайтбокса для Jekyll, которое указано на моей странице Jekyll без плагинов . Проверьте это!

Answer 4

Мне нравятся плагины Jekyll.

Попробуйте один из них: Галерея Jekyll , Генератор галереи Jekyll или Галерея папок .

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