Jekyll per loop su tutte le immagini in una cartella?

Question

Mi piacerebbe creare un semplice portfolio di sporcizia sul mio jekyll blog. Ho tutti i miei file di immagine in una cartella.

Attualmente, l'ho generare la pagina di foto come questa:

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

che non è conveniente a tutti se voglio aggiungere o rimuovere nuove fotografie. È possibile fare qualcosa come il ciclo for che ho per i post:

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

Salvo il loop su tutte le immagini?

Grazie!

Answer 1

Questo ha funzionato come un fascino per me. Non sono richiesti plug-in.

Le mie immagini sono in una directory 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 %} 

Il image.path contains 'images/slider' fa in modo che solo le immagini nella cartella vengono inseriti.

Ulteriori letture here e su jekylltalk.

Answer 2

Idealmente, si desidera eseguire la scansione di una directory di immagini, quindi generare un elenco di file da lì. Jekyll non ha una funzione per fare ciò che io conosca. È, tuttavia, abbastanza estensibile, quindi hai un paio di opzioni:

1. Scrivere (o trovare) un plug-in che esegue la scansione della directory. Se conosci Ruby, questo non dovrebbe essere troppo impegnativo. (Probabilmente vorrai un tag Liquid personalizzato.)

2. Se non conosci Ruby, potresti prendere in considerazione la creazione di pagine HTML di gallerie speciali utilizzando uno script o un programma esterno e quindi includendo i file generati nei tuoi modelli . Ecco un oneliner shell come un esempio:

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

3. se stai bene con attaccare al vostro convenzione di denominazione, si può solo anche fingere e basta usare un ciclo regolare:

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

   Ma questo significherebbe che dovresti ancora ricordarti di tenere aggiornato il numero "10".

la seconda opzione e la terza opzione sono meno pulito, ma entrambi hanno il vantaggio che lavoreranno con le pagine GitHub (se è quello che si usa), mentre il primo no.

Answer 3

Ecco un'altra soluzione (con più pagine della galleria) che non utilizza plug-in, quindi funziona con GitHub Pages.

Ho un post sul blog con una spiegazione più dettagliata qui:
Generating an image gallery with Jekyll and Lightbox2

• Finished gallery overview page
• Source code

Ecco la versione breve:

1. Creare un YAML data file (_data/galleries.yml) con l'elenco delle immagini:

   - 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. Per un elenco di gallerie disponibili, basta scorrere il file di dati:

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

3. Creare un layout file (_layouts/gallery.html) che tutte le gallerie saranno basate su:

   (nel mio esempio, sto usando Lightbox2 per visualizzare le immagini, quindi c'è HTML in più nel mio esempio che non è nemmeno necessario quando si desidera utilizzare <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. Per ogni pagina della galleria, creare un file .html o .md che contiene solo tre linee di YAML front-materia:

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

   la linea layout: gallery riferisce al file di layout dal passaggio 3.
   la linea galleryid: gallery1 riferisce al file di dati dalla fase 1, in modo che il file di layout "sa" che deve visualizza immagini dalla prima galleria.

---

Questo è tutto.

Questa soluzione non si collega automaticamente alla cartella delle immagini, ma è sufficiente inserire nuove immagini nel file di dati, il che è meno noioso della creazione delle linee HTML <img src="photos/01.jpg"> a mano (specialmente quando l'HTML è più complesso di quello, come nell'esempio precedente di Lightbox2).

Inoltre, come ho detto all'inizio: funziona su GitHub Pages, che tutte le soluzioni con plug-in (con cui è possibile eseguire il loop della cartella immagini) no.

Answer 4

Elencare i file jpg nella directory corrente a Jekyll si può fare in questo modo:

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

una bella soluzione multi-purpose. Ulteriori informazioni su questa soluzione sono disponibili qui: http://jekyllrb.com/docs/static-files/