关于从 Jekyll 上的任何文件夹生成响应式图片库

Question

我在我的 Jekyll 中为投资组合内容创建了集合，我目前能够列出任何文件夹中的所有图像 with this guide。但是有些图像文件以@2x 命名，用于在 image1.png、image1@2x.png 等高密度显示器上显示清晰的图像

那么我如何排除图库中的@2x 图片文件并在 <img> 标签中放入 srcset="" 属性以生成响应式图库。

这是我的示例 .md 文件：

---
layout: work-detail
---
{% include screenshot.html folder="/images-folder/" %}

这是生成图库的包含文件：

<div class="screenshot screenshot--grid">
{% for file in site.static_files %}
  {% if file.path contains include.folder %}
    {% if file.extname == '.jpg' or 
      file.extname == '.jpeg' or 
      file.extname == '.JPG' or 
      file.extname == '.png' or 
      file.extname == '.PNG' or 
      file.extname == '.JPEG' %}

      {% assign filenameparts = file.path | split: "/" %}
      {% assign filename = filenameparts | last | replace: file.extname,"" %}
            <img src="{{ file.path }}" alt="">
    {% endif %}
  {% endif %}
{% endfor %}
</div>

Answer 1

如果他们都被命名为 properly/consistently 你可以这样做：

{% unless file.path contains "@2x" %}
  {% assign filepath2x = file.path | replace: file.extname,"@2x" | append: file.extname %}
  <img src="{{ file.path }}" srcset="{{ filepath2x }} 1000w" />
{% endunless %}

注意这段代码应该替换（只是）图像标签的输出，所以这部分：

<img src="{{ file.path }}" alt="">

这段代码的作用是：

它阻止输出文件名中带有“@2x”的图像（它会跳过它们）。
它创建了一个名为 'filepath2x' 的新变量。此变量是 file.path 的副本，但将“.extension”(.jpg) 替换为“@2x.extension”(@2x.jpg)
它输出带有额外 srcset 属性的图像标签，并用这个新变量填充该属性。

我使用了随机 srcset 设置 (1000w)。请调整它以适合您的项目。

关于从 Jekyll 上的任何文件夹生成响应式图片库

About generating responsive image gallery from any folder on Jekyll

jekyll

responsive-images