Görüntü Bileşenleri¶

Phantom Görüntü Bileşenleri; lazy-loading, lightbox desteği ve tepkisel (responsive) düzenler gibi özelliklerle belgelerinizdeki resimleri görüntülemek için güçlü,esnek ve benzersiz bir yol sağlar.

Bileşen Özellikleri

Lazy Loading: Resimler yalnızca görünüm alanına girdiğinde yüklenir
Lightbox Desteği: Tam ekran resim görüntüleme
Tepkisel (Responsive) Tasarım: Farklı ekran boyutlarına kolaylıkla adapte olur
Esnek Konumlandırma: Sola, sağa veya merkeze yerleştirin
Izgara Düzenleri: Birden fazla resmi verimli şekilde görüntüleyin

Resim Yolu Çözümleme

Resimler otomatik olarak /assets/static/images/ dizininden çözümlenir. Sadece dosya adını kullanın:

data-src="example.png" → /assets/static/images/example.png
Mutlak yollar için / ile başlayın: data-src="/custom/path/image.png"
Harici resimler için tam URL kullanın: data-src="https://example.com/image.png"

Temel Kullanım¶

Basit Resim¶

En temel kullanım - sadece resim kaynağını sağlayın:

Altyazılı Resim¶

Resimlerinize altyazılarla bağlam ekleyin:

Boyut Varyantları¶

Resimlerinizin görüntüleme boyutunu kontrol edin:

Küçük Resim¶

Orta Resim (Varsayılan)¶

Büyük Resim¶

Tam Genişlik Resim¶

Metinle Konumlandırma¶

Resimler metin içeriğinizle akacak şekilde konumlandırılabilir:

Sola Hizalanmış Resim¶

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Sağa Hizalanmış Resim¶

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lightbox etkin resimlere tıklayarak tam ekranda görüntüleyin:

Resim Izgarası¶

Birden fazla resimi tepkisel (responsive) ızgara düzeninde görüntüleyin:

Resim Karşılaştırması¶

İki resmi yan yana karşılaştırın:

Gelişmiş Kullanım¶

Resimlerle Eğitim¶

Adım 1: Ayarları Aç

İlk olarak, sağ üst köşedeki dişli simgesine tıklayarak ayarlar sayfasına gidin. Ayarlar sayfası uygulamanız için tüm yapılandırma seçeneklerini içerir.

Genel ayarlar, görünüm ve gelişmiş seçenekler dahil çeşitli bölümler bulacaksınız.

Adım 2: Seçenekleri Yapılandır

Yapılandırma panelinde, ihtiyaçlarınıza göre çeşitli ayarları düzenleyebilirsiniz. Her seçeneğin işlevini açıklayan bir araç ipucu vardır.

Sayfadan ayrılmadan önce değişikliklerinizi kaydettiğinizden emin olun.

Özellik Vitrini¶

Gelişmiş Resim İşleme

Resim bileşenimiz belgelerinizdeki resimleri görüntülemek için son teknoloji özellikler sağlar:

Performans için otomatik lazy loading
Responsive boyutlandırma ve konumlandırma
Yerleşik lightbox işlevselliği

Yapılandırma Seçenekleri¶

Veri Öznitelikleri¶

Öznitelik	Tür	Varsayılan	Açıklama
`data-src`	string	gerekli	Resim kaynak URL'i
`data-alt`	string	""	Erişilebilirlik için alternatif metin
`data-caption`	string	null	Resim altında altyazı metni
`data-size`	string	"medium"	Boyut varyantı: small, medium, large, full
`data-position`	string	"center"	Konum: left, right, center
`data-loading`	string	"lazy"	Yükleme stratejisi: lazy, eager
`data-lightbox`	boolean	false	Tıklamada lightbox etkinleştir

Hata Durumları¶

Başarısız Resim Yüklemesi¶

Bir resim yüklenemediğinde, bileşen net bir hata mesajı görüntüler:

Yükleme Durumu¶

Resimler yüklenirken bir spinner görüntülenir. İşte yükleme durumunu gösteren daha büyük bir resim örneği:

En İyi Uygulamalar¶

Her zaman alt metin sağlayın: Erişilebilirlik ve SEO için gereklidir
Uygun boyutları kullanın: İçeriğiniz için doğru boyut varyantını seçin
Detaylı resimler için lightbox etkinleştirin: Gerektiğinde kullanıcıların tam çözünürlüğü görmesini sağlayın
Bağlam için altyazı ekleyin: Kullanıcıların neye baktıklarını anlamalarına yardımcı olun
Resimlerinizi optimize edin: Uygun formatları ve sıkıştırmayı kullanın
Mobil kullanıcıları düşünün: Resimlerin küçük ekranlarda nasıl göründüğünü test edin

Sorun Giderme¶

Resim Yüklenmiyor¶

data-src geçerli bir resim URL'ini işaret ettiğini kontrol edin
Resim dosyasının var olduğunu ve erişilebilir olduğunu doğrulayın
Hata mesajları için tarayıcı konsolunu kontrol edin
Yerel resimler için /docs/assets/static/images/ içinde olduklarını doğrulayın

data-lightbox="true" ayarlandığını doğrulayın
JavaScript'in etkin olduğunu kontrol edin
phantom-image.js yüklendiğini doğrulayın
Resmin başarıyla yüklendiğini onaylayın (lightbox başarısız resimler için devre dışı bırakılır)

Düzen Sorunları¶

Ana kapsayıcıların uygun genişliğe sahip olduğunu kontrol edin
Farklı ekran boyutlarında tepkisel (responsive) davranışı test edin