Jekyll pour la boucle sur toutes les images dans un dossier?

Voici une autre solution (avec plusieurs pages de galerie) qui n'utilise pas de plugins, donc cela fonctionne avec les Pages GitHub.

J'ai un billet de blog avec une explication plus détaillée ici:
générer une galerie d'images avec Jekyll et Lightbox2

• présentation de la galerie terminée
• code Source

Voici la version courte:

1. Créer un fichier de données YAML (_data/galleries.yml) avec la liste des images:

   - 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. Pour une liste des galeries disponibles, il suffit de parcourir le fichier de données:

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

3. Créer un fichier de mise en page (_layouts/gallery.html) que toutes les galeries seront basées sur:

   (dans mon exemple, j'utilise Lightbox2 pour afficher les images, donc il y a du HTML supplémentaire dans mon exemple que vous n'avez même pas besoin quand vous voulez juste utiliser <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. Pour chaque page de galerie, Créez un .html ou .md fichier qui contient seulement trois lignes de YAML front-matter:

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

   La Ligne layout: gallery fait référence au fichier de mise en page de l'étape 3.
   La ligne galleryid: gallery1 fait référence au fichier de données de l'étape 1, de sorte que le fichier de mise en page "sait" qu'il doit afficher les images de la première galerie.

C'est ça.

Cette solution ne Boucle pas automatiquement le dossier images, mais il vous suffit d'insérer de nouvelles images dans le fichier de données, ce qui est moins fastidieux que de créer le <img src="photos/01.jpg"> lignes HTML à la main (surtout quand le HTML est plus complexe que cela, comme dans mon exemple Lightbox2 ci-dessus) .

De plus, comme je l'ai dit au début: cela fonctionne sur les Pages GitHub, ce que toutes les solutions avec des plugins (avec lesquelles il est possible de boucler le dossier image) ne font pas.

Idéalement, vous souhaitez analyser un répertoire d'images, puis générer une liste de fichiers à partir de là. Jekyll n'a pas de fonction pour faire cela que je connais. Il est cependant assez extensible, donc vous avez quelques options:

1. écrire (ou trouver) un plugin qui fait l'analyse du répertoire. Si vous connaissez Ruby, cela ne devrait pas être trop difficile. le site Jekyll contient de la documentation sur l'apparence d'un plugin. (vous voulez probablement opter pour une étiquette liquide personnalisée.)

2. Si vous vous ne connaissez pas Ruby, vous pouvez envisager de générer des pages HTML de Galerie spéciales à l'aide d'un script ou d'un programme externe, puis d'inclure les fichiers générés dans vos modèles. Voici un shell oneliner à titre d'exemple:

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

3. Si vous êtes d'accord avec votre convention de nommage, vous pouvez simplement la simuler et simplement utiliser une boucle régulière:

   {% for i in (1..10) %}
   <img src="photos/{{ i }}.jpg"><br>
   {% endfor %}
   

   Mais cela signifierait que vous devez toujours vous rappeler de garder le numéro " 10 " à jour.

La seconde option et troisième options sont moins propres, mais les deux ont l'avantage de fonctionner avec les pages GitHub (si c'est ce que vous utilisez), alors que la première ne le fera pas.

, Vous pouvez le faire aussi avec collection
sous root créer _collection Dossier y mettre des images

À _config.yaml ajouter ce code

collections:
  - collection

Avec front matter
créer les collections de l'attribut

Et puis le code pour lister l'image serait quelque chose comme

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

La liste des fichiers jpg dans le répertoire courant dans Jekyll peut être faite comme ceci:

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

Une belle solution polyvalente. Plus d'informations sur cette solution peuvent être trouvées ici: http://jekyllrb.com/docs/static-files/

Mise à jour: Jekyll Codex a implémenté ce code pour une réutilisation facile, vous permettant d'écrire simplement:

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