Thumbnail elementi, uygulamalarda küçük görsel önizlemeleri göstermek için kullanılan bir elementtir. Bir görüntünün veya videonun küçük hali üzerinden kullanıcıya içerik hakkında hızlı bir fikir sunar ve daha büyük bir içeriğe erişim için temel bir giriş noktası oluşturur.
Thumbnail elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Ürün listeleri ve e-ticaret kataloğu: Ürünlerin küçük görsellerini göstererek kullanıcıların hızlı karşılaştırma yapmasını sağlar.
Medya galerileri (fotoğraf & video): Büyük boyutlu medya içeriklerinin küçük önizlemeleri ile hızlı gezinme deneyimi sunar.
Profil listeleri: Kullanıcı, çalışan veya ekip profil fotoğraflarının küçük versiyonlarını göstermek için kullanılabilir.
Makale, blog veya haber kartları. İçeriğe ait küçük bir öne çıkan görsel, metin kartına eşlik ederek etkileşimi artırır.
2. Temel Özellikler
Küçük boyutlu önizleme alanı. Thumbnail, büyük görsellerin veya medya içeriklerinin küçük bir versiyonunu göstererek kullanıcıya hızlı bir fikir verir.
Statik veya dinamik görsel desteği. Görsel URL’si sabit bir değer olabilir ya da Symbol Picker ile veri tabanından veya API'den dinamik olarak alınabilir.
Tıklanabilir yapı (Hover & Click senaryoları). Thumbnail bir buton veya link gibi davranabilir; kullanıcı tıkladığında büyük görseli açma, sayfa yönlendirme veya modal tetikleme gibi işlemler yapılabilir.
2.1. Thumbnail Elementi Özellikleri
Thumbnail elementinin özelliklerini, sağ kenardaki Properties panelinden yapılandırabilirsiniz.
Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla bir durumu, Thumbnail elementinin içeriğini veya bir aksiyon sonucunda elde edilen değeri dinamik olarak alabilirsiniz.
Placeholder Image: Görsel değeri olmadığında gösterilen görseldir. Bir içerik yüklü değilse, boş bir alan yerine bu görsel görüntülenir.
Zoom On Click: Kullanıcı küçük resme tıkladığında, resmin daha büyük bir versiyonunun görüntülenmesini sağlar. Switch aktif hale getirildiğinde, küçük önizleme tam boyutlu bir görüntüye dönüşür.
Image Fit: Görselin, Styling > Layout sekmesinde belirlenen boyutlara veya ebeveyn elementin boyutlarına göre nasıl ölçekleneceğini belirler.
Position: Görüntülenecek görselin konumunu belirler. Açılır menüden aşağıdaki seçenekler arasından seçim yapabilirsiniz:
Bottom: Görseli alt tarafa hizalar.
Center: Görseli merkezde hizalar.
Right: Görseli sağ tarafa hizalar.
Left: Görseli sol tarafa hizalar.
Top: Görseli üst tarafa hizalar.
Image Fit: Görselin, Styling > Layout sekmesinde tanımlanan ya da ebeveyn elementin boyutlarına göre nasıl ölçekleneceğini belirler. Seçenekler genelliklegibi değerlerdir.
Class Name: Gelişmiş özelleştirmeler için özel CSS sınıf(lar)ı tanımlamanıza olanak tanır.
2.1.1. Thumbnail Elementine Aksiyon Ekleme
Sağ kenardaki Properties panelinde Value alanına tıklayın.
Açılan menüden Uploaded Images seçeneğini seçin.
Görsel kütüphanesinde aşağıdaki seçenekler bulunur:
ADD IMAGE: Cihazınızdaki görselleri sürükleyip bırakarak veya dosya seçerek ekleyebilirsiniz.
GENERATE WITH AI: Yapay zeka asistanı ile istediğiniz görseli tarif ederek, tarayıcılarda bulunmayan görseller üretebilirsiniz. Üretilen görselleri, sağ üst köşedeki Download ikonuna tıklayarak kütüphaneye ekleyebilirsiniz.
Set Value Of Aksiyonu Ekleme
Sağ kenardaki Properties panelinde +ADD ACTION butonuna tıklayın.
OnClick → UI Control → Set Value Of seçeneğini seçin.
Açılan pencerede Component To Change alanına Thumbnail elementini seçin.
Value parametresini doldurmak için Symbol Picker'a tıklayın:
Action Results → Upload File → Data seçeneğini belirleyin.
Sağ üst köşedeki Run butonuna tıklayarak uygulamanın önizlemesini yapın.
Bu işlemlerden sonra, butona tıkladığınızda cihazınızdan dosya yüklemek için bir ekran açılır. Buradan PDF veya resim dosyası seçebilirsiniz. Seçilen dosya bir PDF ise PDF ikonu, bir resim dosyası ise önizleme görseli görüntülenecektir.
Thumbnail elementi, görsel içerikleri hızlı ve etkili bir şekilde göstermek için idealdir. Zoom özelliği sayesinde kullanıcılar küçük önizlemelerden tam boyutlu görüntülere geçiş yapabilirler. Bu özellik, özellikle ürün katalogları, galeri uygulamaları ve medya içeriklerinde kullanıcı deneyimini geliştirir.
2.2. Elemente Eklenebilen Aksiyonlar
Thumbnail elementi, kullanıcı etkileşimlerine göre iki farklı tetikleyici (event) destekler: onClick ve onChange. Bu tetikleyiciler sayesinde, Thumbnail üzerinden görsel değiştirme, modal açma, detay ekranına yönlendirme gibi işlemler gerçekleştirilebilir.
onClick
Kullanıcı Thumbnail elementine tıkladığında tetiklenir. Bu tetikleyici aşağıdaki senaryolarda kullanılabilir:
Thumbnail’a tıklanınca büyük görsel gösterme (Zoom On Click aktif değilse manuel modal açma).
Bir pop-up açarak görsel detaylarını gösterme.
Bir dosya yükleme aksiyonu tetikleme (Upload File → Set Value Of).
Başka bir sayfaya yönlendirme veya parametre gönderme.
Thumbnail’ın değerini dinamik olarak değiştirme.
onChange
Kullanıcı Thumbnail’ın değerini değiştirdiğinde (ör. Set Value Of ile yeni görsel atanırsa) tetiklenir. Doğrudan kullanıcı tarafından görüntü değiştirilemiyorsa, bu event çoğunlukla aksiyon sonucunda değer güncellendiğinde kullanılır.
Kullanım senaryoları:
Görsel değiştiğinde otomatik kayıt alma.
Thumbnail güncellendiğinde başka bir alanın değerini de güncelleme.
Görsel değişimine bağlı bir doğrulama veya uyarı gösterme.
3. Thumbnail Elementi Nasıl Kullanılır?
Bu bölümde Thumbnail elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Bir otel rezervasyon uygulamasında kullanıcı, otel listesini görüntülerken her otelin küçük bir önizleme görselini Thumbnail olarak görür. Görseli olmayan otellerde varsayılan bir Placeholder Image gösterilir. Kullanıcı bir otele tıkladığında detay ekranına yönlendirilir.
Adım 1 - Dinamik Kullanım için Gerekli Aksiyonları Tanımlama
Arayüzde verileri göstermek için:
Bir aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Ekleyen Aksiyon (GetHotelListMock):
SELECT *
FROM (
VALUES
('1', 'Demo Hotel', 'Izmir', 'https://images.pexels.com/photos/15010898/pexels-photo-15010898.jpeg')
) AS Hotels(HotelId, HotelName, Location, ThumbnailUrl);
Thumnail elementi yanına Horizontal Stack içerisine Elements > Container > VerticalStack elementini sürükleyip bırakın.
Vertical Stack içerisine iki tane Elements > Display > Label elementi ekleyin.
İlk Label elementinin değerini Label > Properties > Value > Action Results > GetHotelListMock >HotelName olarak tanımlayın.
İkinci Label elementinin değerini Label > Properties > Value > Action Results > GetHotelListMock >Location olarak tanımlayın.
Preview
Uygulama test edildiğinde, Thumbnail elementi üzerinde otele ait görselin küçük önizleme olarak görüntülendiği görülür. Görselin yanında otel adı ve şehir bilgisi düzenli bir şekilde listelenir. Bu yapı sayesinde kullanıcı, içerik hakkında hızlıca fikir edinir ve listeleme ekranlarında görsel destekli, okunabilir bir sunum elde edilir.
Görsele tıklandığında ilgili görsel tam ekran olarak açılır. Görsel tekrar tıklandığında ise önceki boyutuna geri döner.
4. Ortak Özellikler (Properties)
Thumbnail elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Görsel boyutlarını optimize edin. Thumbnail içinde kullanılan görsellerin dosya boyutlarını düşük tutmak, sayfa yüklenme hızını artırır.
Placeholder Image kullanmayı ihmal etmeyin. Veri gelmediği durumlarda boş alan yerine bir yer tutucu görsel kullanmak daha profesyonel bir görünüm sağlar.
Zoom On Click özelliğini içerik türüne göre kullanın. Ürün görselleri, belge önizlemeleri veya medya içerikleri için kullanıcı deneyimini büyük ölçüde geliştirir.
Dinamik görsel değişimlerinde Set Value Of aksiyonunu tercih edin. Upload File → Set Value Of akışı, kullanıcıların Thumbnail üzerinden doğrudan görsel güncellemesi yapmasını kolaylaştırır.
6. Kısıtlamalar
Thumbnail elementi yalnızca web uygulamalarında desteklenmektedir. Mobil uygulamalarda bu element görüntülenmez ve çalıştırılamaz.
Desteklediği aksiyonlar sınırlıdır. Thumbnail yalnızca onClick ve onChange event’lerini destekler; başka tetikleyici eklenemez.
Görselin içeriği kullanıcı tarafından doğrudan değiştirilemez. Görsel güncelleme işlemleri mutlaka Set Value Of gibi bir aksiyonla tetiklenmelidir.
Dinamik veri bağlanmadığında öğe boş görüntülenir. Placeholder Image tanımlı değilse, boş bir kutu görünmesi tasarım bütünlüğünü bozabilir.
