在 Jekyll 支持的网站上显示目录中的所有图像答案

【问题标题】：Display all images from a directory on a Jekyll powered website在 Jekyll 支持的网站上显示目录中的所有图像
【发布时间】：2012-02-09 01:06:11
【问题描述】：

它不一定是 Jekyll 使用的东西。

基本上我正在创建一个将使用灯箱的画廊。我想从一个目录 (_site\images\gallery) 中加载所有图像以供灯箱显示及其缩略图（待确定和创建）。

解决此问题的最佳方法是什么？我已经设置并测试了灯箱（没有缩略图）。

提前致谢。

【问题讨论】：

标签： ruby image web jekyll liquid

【解决方案1】：

Jekyll 没有办法“列出文件夹的内容”。

你可以通过使用 yaml 前端来做一个非常近似的事情。

在“图库页面”中，包含一个包含图像文件名的部分：

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

然后，当您想要列出您的图像时，使用循环生成链接。我不熟悉 lightbox 的图像语法，但它可能看起来像这样：

<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 更改为与 lightbox 一起使用，添加新图像所需要做的唯一事情是：a) 将其放在图像目录中 b) 编辑图库页面，并在其中引入新图像名称列表。

虽然没有列表“自动生成”那么方便，但是很接近。

【讨论】：

【解决方案2】：

在 Jekyll 中列出当前目录下的 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 上列出。看看吧！

【讨论】：

【解决方案3】：

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

免责声明：我是作者。

我已经尝试了一些在 Github 上已经可用的项目，但其中大多数都已停产或部分工作，最后，我决定从周围发现的好东西开始自己实施一些东西。结果是Azores Image Gallery。
更详细的解释请查看README file。

【讨论】：

【解决方案4】：

我喜欢 Jekyll 插件。

尝试以下方法之一：Jekyll Gallery、Jekyll Gallery Generator 或 Folder Gallery。

检查每个插件的 Ruby 文件并修改生成的图像标签以包含灯箱类。这应该够了吧。不要忘记在默认模板页面中包含灯箱 css 文件。

【讨论】：