web-dev-qa-db-fra.com

Jekyll pour une boucle sur toutes les images d'un dossier?

Je voudrais faire un portefeuille de choses très simples sur mon blog jekyll. J'ai tous mes fichiers image dans un dossier.

Actuellement, je l'ai générer la page de photos comme ceci:

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

Ce qui ne me convient pas du tout si je veux ajouter ou supprimer de nouvelles photos. Est-il possible de faire quelque chose comme la boucle for que j'ai pour les posts:

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

Sauf à faire une boucle sur toutes les images?

Merci!

jekyll
33
viraj_os

Cela a fonctionné comme un charme pour moi. Aucun plugin requis.

Mes images sont dans un répertoire 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 %}

Le image.path contains 'images/slider' s'assure que seules les images de ce dossier sont insérées.

Lectures complémentaires ici et sur jekylltalk .

57
Arrowcatch

Voici une autre solution (avec plusieurs pages de galerie) qui n’utilise pas de plug-ins, donc elle fonctionne avec GitHub Pages.

J'ai un article de blog avec une explication plus détaillée ici:
Génération d’une galerie d’images avec Jekyll et Lightbox2

Voici la version courte:

  1. Créez 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 obtenir une liste des galeries disponibles, parcourez simplement le fichier de données:

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

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

    (dans mon exemple, j'utilise Lightbox2 pour afficher les images, il y a donc du code HTML supplémentaire dans mon exemple dont vous n'avez même pas besoin lorsque vous voulez simplement 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 fichier .html ou .md qui ne contient que trois lignes de la matière principale YAML:

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

Cette solution ne boucle pas automatiquement sur le dossier images, mais vous devez simplement insérer de nouvelles images dans le fichier de données, ce qui est moins fastidieux que de créer manuellement les lignes <img src="photos/01.jpg"> HTML (surtout lorsque le code 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 GitHub Pages, ce que ne font pas toutes les solutions avec plugins (avec lesquelles il est possible de boucler le dossier d’images).

15
Christian Specht

Idéalement, vous souhaitez numériser un répertoire d'images, puis générer une liste de fichiers à partir de celui-ci. Jekyll n'a pas de fonction pour le faire que je sache. Cependant, il est assez extensible, vous avez donc deux options:

  1. Écrivez (ou trouvez) un plugin qui effectue l'analyse de l'annuaire. Si vous connaissez Ruby, cela ne devrait pas être trop difficile. Le site Jekyll a de la documentation sur l'apparence d'un plugin. (Vous voudrez probablement utiliser une balise Liquid personnalisée.)

  2. Si 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 exemple de Shell:

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

  3. Si vous vous en tenez à respecter votre convention de dénomination, vous pouvez simplement la simuler et utiliser une boucle normale:

     {% 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 deuxième option et la troisième option 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.

9
Wander Nauta

Vous pouvez aussi faire avec collection
sous la racine créer le dossier _collection mettre les images là

à _config.yaml ajouter ce code

collections:
  - collection

avec front matter
create attribut de collections

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

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

La mise en oeuvre de Jekyll Codex suggérée par Joosts est un excellent point de départ. J'ai fait des recherches pendant un certain temps et il y a beaucoup de projets similaires mais la plupart d'entre eux sont abandonnés ou ne fonctionnent que partiellement. 

Après quelques recherches, je pense que le meilleur projet pour le cas d'utilisation est Azores Image Gallery , qu'il est raisonnablement rapide et que son empreinte mémoire est réduite, car vous pouvez utiliser Minimagick , un petit wrapper Ruby pour ImageMagick:

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

AVERTISSEMENT: Je suis l'auteur.

0
Sarpe

La liste des fichiers jpg dans le répertoire actuel de Jekyll peut se faire comme suit:

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

UPDATE: Jekyll Codex a implémenté ce code pour une réutilisation aisée, vous permettant simplement d'écrire:

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