Aperture temasındaki lightbox galerisiyle çalışmak
Aperture temasında galeri bloğu nasıl eklenir, lightbox ayarları nasıl yapılır, altyazılar nereye yazılır ve tam ekran lightbox deneyimi için görseller nasıl en iyi hale getirilir; hepsi burada.
Aperture temasının lightbox'ı, her bir portfolyo gönderisinin adeta kalbidir. Ziyaretçi galeri bloğundaki herhangi bir görsele tıkladığında açılır, tüm ekranı kaplar ve klavye, dokunma ya da fare ile gezinmeye olanak tanır. Bu yazıda galeri ekleme, altyazı yazma ve lightbox kullanıcı deneyiminden en iyi şekilde nasıl faydalanacağınızdan bahsedeceğiz.
Galeri bloğu ekleme
Gönderi editöründeyken yeni bir satıra geçip / tuşuna basarak 'slash' menüsünü açın ve Gallery seçeneğini bulun. Karşınıza bir yükleme alanı çıkacak. Görsel dosyalarınızı masaüstünden doğrudan sürükleyip bırakabilir veya tıklayarak seçebilirsiniz. Görseller Cloudflare R2'ye yüklenir ve WebP formatında sunulmak üzere otomatik olarak işlenir. Aynı anda birden fazla dosya yükleyebilirsiniz; görseller yüklendiği sırayla görünür ama galeri bloğu içinde sürükle-bırak yöntemiyle sıralarını kolayca değiştirebilirsiniz.
Altyazı eklemek
Editördeki galeri bloğunda herhangi bir görsele tıkladığınızda hemen altında bir altyazı metin kutusu belirir. Yazdığınız altyazılar iki yerde görünür: ızgara görünümündeki küçük resmin altında ve tam ekran lightbox'ta görselin alt kısmında bir katman olarak. Altyazıları kısa tutmakta fayda var (100 karakterin altında), böylece mobil ekranlarda görselin üzerini kapatmazlar.
Lightbox'ta gezinme
- Klavye: ← ve → yön tuşları görseller arasında geçiş yapar; Escape tuşu lightbox'ı kapatır
- Fare: gezinmek için lightbox'ın sol/sağ kenarlarına tıklayın; görsel alanının dışına tıklayarak kapatın
- Dokunmatik (mobil): ilerlemek için sola veya sağa kaydırın; kapatmak için aşağı kaydırın
- URL: her lightbox görseli kendine özgü bir 'hash' URL'i (#image-3 gibi) oluşturur. Bu linkleri paylaştığınızda, doğrudan o görsel açılır.
Lightbox için görsel boyutlandırma
Lightbox, görselleri 90vw × 90vh boyutuna kadar gösterir. Bu da 2560px genişliğindeki bir masaüstü monitörde yaklaşık 2300px genişliğe denk geliyor. Yüksek DPI'lı ekranlarda lightbox'ın büyütülmüş, bulanık görseller göstermemesi için görsellerinizi en az 2400px genişliğinde yükleyin. Dikey yönelimli görseller için de (düğün, portre fotoğrafçılığı gibi) tavsiyemiz aynı: en az 2400px yükseklik.
VeloCMS, yüklenen her görsel için 400, 800, 1200, 1600 ve orijinal genişliklerde duyarlı `srcset` nitelikleri oluşturur. Tarayıcı doğru boyutu otomatik olarak seçer; sizin tek yapmanız gereken orijinal, tam çözünürlüklü dosyayı yüklemek.
Performans notları
Ekranın görünmeyen kısmında kalan galeri görselleri 'lazy-load' edilir, yani sayfa yüklenirken sadece galerideki ilk 4 görsel hemen yüklenir. Lightbox, o anki görsel görüntülenirken sıradaki ve bir önceki görseli arka planda önceden yükler. Bu sayede görseller arası geçiş anlık hissedilir. WebP sıkıştırması ve 'lazy loading' sayesinde 20 görsellik bir galeri gönderisinin toplam sayfa boyutu ilk yüklemede genellikle 800KB'ın altında kalır.