11ty ve Nunjucks ile Resim Klasörü Nasıl Görüntülenir?

11ty kullanıcıları sıkça markdown ve HTML dosyalarını koleksiyonlarla işlerken, resim dosyalarıyla aynı yöntemi uygulamakta zorlanıyor. Bir grafik kütüphanesi oluşturmak için klasördeki görselleri otomatik listelemek mümkün, ama farklı bir yaklaşım gerekiyor.

Koleksiyonlar normalde belirli uzantıları tarar. Resimleri işlemek için `.eleventy.js` dosyasında özel bir koleksiyon tanımlamalısın. Basit bir yöntem: klasördeki tüm resim dosyalarını oku ve meta veriye dönüştür.

1eleventyConfig.addCollection('graphics', function(collection) {
2const fs = require('fs');
3const path = require('path');
4const imagesDir = './src/images';
5
6const files = fs.readdirSync(imagesDir).filter(f => /\.(jpg|png|gif|webp)$/i.test(f)).map(f => ({
7name: f,
8path: `/images/${f}`,
9date: fs.statSync(path.join(imagesDir, f)).mtime
10})).sort((a, b) => b.date - a.date);
11
12return files;
13});

Sonra `arc/graphics/index.md` veya `.njk` dosyasında:

1{% for item in collections.graphics %}
2<img src="{{ item.path }}" alt="{{ item.name }}" />
3{% endfor %}

Tarih, isim veya başka kritere göre sıralamak kolay, `sort()` satırını değiştir. Plugin yüklemeye gerek yok, sadece Node.js dosya sistemi yeterli. Lightbox istemiyorsan direkt resimler gösterilir, indirme linki eklemek de bir satır kodla mümkün.