Jekyll for Schleife über alle Bilder in einem Ordner?

Ich würde gerne eine Schmutz-einfache portfolio von Arten, die auf meinem jekyll-blog. Ich habe alle meine Bild-Dateien in einem Ordner.

Derzeit, ich habe es generieren der Fotos Seite wie diese:

<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>

Das ist nicht bequem, wenn ich will, zu entfernen oder fügen Sie neue Fotos. Ist es möglich, etwas zu tun, wie die for-Schleife habe ich für Beiträge:

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

Außer eine Schleife über alle Bilder?

Dank!

InformationsquelleAutor der Frage viraj_os | 2013-07-16

jekyll

48

Dieser arbeitete wie ein Charme für mich. Keine plugins erforderlich.

Meine Bilder sind in einem assets/images/slider Verzeichnis.
```
{% for image in site.static_files %}
    {% if image.path contains 'images/slider' %}
        <img src="{{ site.baseurl }}{{ image.path }}" alt="image" />
    {% endif %}
{% endfor %}
```
Den image.path contains 'images/slider' stellt sicher, dass nur Bilder in dem Ordner eingefügt.

Weiter Lesen hier und auf jekylltalk.

InformationsquelleAutor der Antwort Arrowcatch
14

Hier ist eine andere Lösung (mit mehreren Galerie-Seiten), die nicht mit plugins, so funktioniert es mit GitHub Pages.

Habe ich in einem blog-Beitrag mit einer genaueren Erklärung hier:

Generiert eine Bilder-Galerie mit Jekyll und Lightbox2
- Fertige Galerie-übersicht Seite
- Quellcode
Hier ist die kurze version:
1. Erstellen Sie eine YAML-Daten-Datei (_data/galleries.yml) mit der Liste der Bilder:
```
- 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. Für eine Liste der verfügbaren Galerien, einfach in einer Schleife durch die Daten-Datei:
```
{% for gallery in site.data.galleries %}
- [{{ gallery.description }}]({{ gallery.id }})
{% endfor %}
```
3. Erstellen Sie eine layout-Datei (_layouts/gallery.html) , alle Galerien basierend auf:
  
  (in meinem Beispiel, ich bin mit Lightbox2um die Bilder anzuzeigen, so gibt es weitere HTML in meinem Beispiel, dass Sie nicht sogar brauchen, wenn Sie gerade verwenden möchten <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"  />

{% 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. Für jede Galerie-Seite, erstellen Sie eine .html oder .md - Datei, die enthält nur drei Zeilen YAML front-matter:
```
---
title: the first gallery page
layout: gallery
galleryid: gallery1
--- 
```
  Den layout: gallery Zeile bezieht sich auf die layout-Datei aus Schritt 3.
  
  Die galleryid: gallery1 Zeile bezieht sich auf die Daten-Datei aus Schritt 1, so dass die layout-Datei "weiß", dass es hat, zeigen die Bilder der ersten Galerie.
Das ist es.

Diese Lösung nicht automatisch die Schleife über die Bilder-Ordner, aber Sie müssen nur fügen Sie neue Bilder in der Daten-Datei, die ist weniger langweilig als das erstellen der <img src="photos/01.jpg"> HTML-Zeilen von hand (vor allem, wenn der HTML-Code wird komplexer ist, als dass, wie in meinem Lightbox2 Beispiel oben).

Plus, wie ich am Anfang gesagt habe: Es funktioniert auf GitHub-Pages, die alle Lösungen mit plugins (mit denen es möglich ist, Schleife den image-Ordner) nicht.

InformationsquelleAutor der Antwort Christian Specht
9

Ideal, Sie möchten, um ein Bild zu Scannen-Verzeichnis, dann erstellen Sie eine Liste von Dateien von dort. Jekyll doesn ' T haben eine Funktion dafür, die ich kenne. Es ist aber durchaus erweiterbar, so haben Sie ein paar Optionen:
1. Schreiben (oder findet) ein plugin, das das Verzeichnis Scannen. Wenn Sie wissen, Ruby, das sollte auch nicht zu anspruchsvoll. Die Jekyll-Website hat eine Dokumentation, wie ein plugin Aussehen soll. (Sie wahrscheinlich wollen für eine benutzerdefinierte Flüssigkeit tag.)
2. Wenn Sie nicht wissen, Ruby, könntest du überlegen, Generierung von speziellen Galerie HTML-Seiten mit einem externen Skript oder Programm, und darunter dann die generierten Dateien in Ihre Vorlagen. Hier ist ein shell-oneliner als Beispiel:
  
  find . -name \*.jpg | sed 's:./::' | sed 's/^/<img src="/' | sed 's/$/"><br>/'
3. Wenn du bist okay, mit festhalten an Ihre Namenskonvention, Sie könnten einfach auch fake, und nur mit einer regelmäßigen Schleife:
```
{% for i in (1..10) %} 
<img src="Bilder/{{ ich }}.jpg"><br> 
{% endfor %} 
```
  Aber das würde bedeuten, Sie würden immer noch daran denken, halten Sie die '10' Anzahl aktualisiert.
Die zweite option und Dritte Optionen sind weniger sauber, aber beide haben den Vorteil, dass Sie die Arbeit mit GitHub pages (wenn es das ist, was Sie verwenden), während die erste nicht.

InformationsquelleAutor der Antwort Wander Nauta

Liste der jpg-Dateien im aktuellen Verzeichnis in Jekyll können Sie das wie folgt:

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

Einen schönen multi-purpose-Lösung. Mehr zu dieser Lösung finden Sie hier: http://jekyllrb.com/docs/static-files/

InformationsquelleAutor der Antwort JoostS

0

Können Sie auch mit collection

unter root erstellen _collection Ordner legen Sie Bilder es

in _config.yaml fügen Sie diesen code
```
collections:
  - collection
```
mit front matter

erstellen Sammlungen-Attribut

Und dann die code-Liste das Bild wäre so etwas wie
```
{% for image in site.collection %}
     <img src="{{ file.url }}" />
{% endfor %}
```
InformationsquelleAutor der Antwort Chetabahana

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.