web-dev-qa-db-ja.com

Jekyll forはフォルダー内のすべての画像をループしますか？

私の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 %}

すべての画像をループする以外は？

ありがとう！

jekyll
40
viraj_os

これは私にとって魅力のように働きました。プラグインは必要ありません。

私の画像は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 について。

トラブルシューティング：コメントで述べたように、このアプローチに問題がある場合は、タグの前のインデントを削除してみてください。

69
Arrowcatch

プラグインを使用しない別のソリューション（複数のギャラリーページを使用）があるため、GitHubページで動作します。

私はここに詳細な説明があるブログ投稿を持っています：
JekyllとLightbox2を使用した画像ギャラリーの生成

ここに短いバージョンがあります：

  1. 画像のリストを使用して 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

  2. 利用可能なギャラリーのリストについては、データファイルをループするだけです。

    {% for gallery in site.data.galleries %}
- [{{ gallery.description }}]({{ gallery.id }})
{% endfor %}

  3. すべてのギャラリーのベースとなる レイアウトファイル （_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 %}

  4. ギャラリーページごとに、3行のYAMLフロントマターのみを含む.htmlまたは.mdファイルを作成します。

    ---
title: the first gallery page
layout: gallery
galleryid: gallery1
---

    layout: gallery行は、手順3のレイアウトファイルを参照しています。
    galleryid: gallery1行はステップ1のデータファイルを参照しているため、レイアウトファイルは最初のギャラリーの画像を表示する必要があることを「認識」しています。

それでおしまい。

このソリューションは自動的に画像フォルダーをループしませんが、新しい画像をデータファイルに挿入するだけです。これは、<img src="photos/01.jpg"> HTML行を手動で作成するよりも面倒ではありません （特に、上記のLightbox2の例のように、HTMLがそれよりも複雑な場合）。

さらに、冒頭で述べたように、これはGitHubページで機能し、プラグインを使用するすべてのソリューション（画像フォルダーをループすることが可能です）を使用しますない。

16
Christian Specht

理想的には、画像ディレクトリをスキャンして、そこからファイルのリストを生成したいとします。ジキルは私が知っているこれを行うための機能を持っていません。ただし、これは非常に拡張可能であるため、いくつかのオプションがあります。

  1. ディレクトリスキャンを実行するプラグインを作成（または検索）します。 Rubyを知っていれば、これはそれほど難しいことではありません。 Jekyllサイトには、プラグインの外観に関するドキュメントがあります。 （おそらくカスタムLiquidタグが必要です。）

  2. Rubyがわからない場合は、外部スクリプトまたはプログラムを使用して特別なギャラリーHTMLページを生成し、生成されたファイルをテンプレートに含めることを検討できます。例として、シェルのワンライナーを次に示します。

    find . -name \*.jpg | sed 's:./::' | sed 's/^/<img src="/' | sed 's/$/"><br>/'

  3. 命名規則を順守することに問題がない場合は、それを偽って通常のループを使用することもできます。

     {％for i in（1..10）％} 
 <img src = "photos/{{i}}。jpg"> <br> 
 {％endfor ％}

    しかし、それでも「10」の番号を更新しておくことを覚えておく必要があることを意味します。

2番目のオプションと3番目のオプションはそれほどクリーンではありませんが、どちらもGitHubページで動作するという利点があります（使用している場合）が、最初のオプションは動作しません。

9
Wander Nauta

collection でも実行できます
ルート作成_collectionフォルダに画像を配置

_config.yamlこのコードを追加

collections:
  - collection

front matter
作成 コレクション属性

そして、画像をリストするコードは次のようになります

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

Joosts によって提案された Jekyll Codex実装 は、優れた出発点です。私はしばらく調査してきましたが、同様のプロジェクトがたくさんありますが、それらのほとんどは中止されているか、部分的に機能しています。

少し掘り下げた後、ユースケースに最適なプロジェクトは Azores Image Gallery だと思います。これはかなり高速で、 Minimagick に依存しているためメモリフットプリントが小さいですRuby ImageMagickのラッパー：

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

免責事項：私は作者です。

0
Sarpe

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/

UPDATE：Jekyll Codexには 実装 があり、簡単に再利用できるため、このコードを簡単に記述できます。

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