Drupal Image Eklentisi ile Galeri yapımı

Bu yazımda Drupal Image eklentisi ile fotoğraf galerisi yapımını inceleyeceğiz. Eklentinin en önemli özelliği fotoğrafların bir node olarak sisteme eklenmesi. Bildiğiniz gibi node içerik oluşturmak için kullandığımız temel özellik. Page, Story gibi içerik türleri node temellidir. Bu içerik türlerinin yanında bir de Image içerik türümüz olacak. Bu da bize taksonomi ile galerileri organize etme, views ile galerilerin görünümlerini düzenleme gibi imkanlar sağlıyor. Birçok eklentide olduğu gibi henüz Drupal 6 için geliştirilme aşamasında olsa da yine de gerekli şartları sağlayarak kullanabilmemiz mümkün. Views 2.0 eklentisi iki gün öncesine kadar rc durumunda olduğu için eklentiyi views eklentisi ile birlikte çalıştırmak biraz güçtü ve Views 2.0 eklentisinin kararlı sürümünün yayınlanması bekleniyordu. Artık Views 2.0 eklentisinin kararlı sürümü yayınlandığı için kısa zaman içerisinde bu entegrasyon probleminin de çözüleceğini düşünüyorum. Bu konularda da gelişme sağlandıkça yeni yazılarla nasıl kullanılacağını anlatacağım. Şimdilik biz standart özellikleri kullanarak pratik bir şekilde nasıl fotoğraf galerisi oluşturabileceğimizi görelim.

Eklentiyi http://drupal.org/project/image adresinden indiriyoruz. Şu an için ben 6.x-1.0-alpha3 sürümünü kullanacağım. Eğer siz bu yazıyı okurken daha yeni bir sürümü varsa onu indirirsiniz. İndirdiğimiz paketi ./sites/all/modules dizininde açtıktan sonra Site Kurulumu > Eklentiler sayfasına geçiyoruz. Bu sayfada bu eklenti paketinin aslında 4 ayrı eklentiyi birden içerdiğini göreceğiz. Bu eklentiler şu işe yarıyor:

  • Image: Temel eklenti paketi. Image türünde bir node oluşmasını, bu node'a imaj yüklenmesi, başlık verilmesi gibi temel özellikleri içeriyor.
  • Image Attach: Image türündeki node'ların başka türdeki içeriğe eklenebilmesini sağlıyor. Aslında biz imajları farklı şekilde ekleyeceğimiz için kullanmayacağız ama özelliğini öğrenmek açısından şimdilik aktifleştiriyoruz.
  • Image Gallery: Taksonomiden faydalanarak fotoğraf galerileri oluşturmamıza yarayan eklenti.
  • Image Import: Galerilere topluca fotoğraf yüklemek için kullanacağımız faydalı bir eklenti.

Bu eklentileri aktifleştirdiğimiz zaman yönetim panelimizde Site Ayarları > Images menüsünü göreceğiz. Şimdi ayarları yapmak üzere bu sayfaya geçelim.

Ayar sayfasına ilk geldiğimizde Files and Sizes sayfasına geliyoruz. Buradaki ilk seçeneğimiz yükleyeceğimiz fotoğrafların maksimim büyüklüğü olacak. 800 KB gayet yeterli hatta kullanıcılarınıza fotoğraf ekleme şansı verecekseniz biraz daha aşağı çekebilirsiniz. Bu arada hatırlatayım yükleyeceğiniz fotoğraflarında ölçü olarak çok büyük olmaması gerekiyor. Bu imajları boyutlandırmak için kullanılan PHP eklentisinin en çok ne kadar sunucu hafızası kullanabileceği ayarı ile ilgili bir konu. Çok büyük imajlar hafızanın dolmasına neden olabilir.

Bu sayfadaki diğer ayar grubu imaj ölçülerini tanımladığımız alan. Gri olarak gördüğümüz Original, Thumbnail ve Önizleme ölçüleri öntanımlı yani standart bulunması gerekli ve silemeyeceğimiz ölçüler. Original zaten imajın kendi ölçüsü, üzerinde bir değişiklik yapılmıyor, Thumbnail küçük resim ölçüsü. Öntanımlı değeri 100 x 100 ama ben bunu 170 x 170 olarak değiştirdim. Önizleme küçük resime ilk tıklandığında gelecek orta büyüklükteki fotoğraf büyüklüğü. Direk orjinal büyüklükteki imajı göstermek bant genişliği kaynaklarımızı çabuk tüketeceği için 640 x 640 büyüklüğünde bir ara imaj göstermek daha mantıklı. Eğer ziyaretçimiz bu büyüklükten tatmin olmaz da daha büyük görmek isterse o zaman orjinal büyüklüğe tıklayabilir.

Bu büyüklüklerin yanı sıra kapadokya.tc sitesine eklediğim yazıların içinde kullanmak üzere bir ara ölçü daha tanımlıyorum. Buna da InsideText adı verdim. Etiketi ingilizce vermemin nedeni eklentinin ara ölçüdeki imajları otomatik olarak oluştururken dosya isimlerini dosyaadı.ölçüadı.jpg düzeninde oluşturması. Eğer Yazı İçi olarak tanımlarsam bu büyüklükteki dosya isimleri örneğin image1.yazı içi.jpg gibi bir isim alacağı için Türkçe karakterlerin sorun çıkarma ihtimali var. Drupal 6 içinde entegre gelen Content Translation çeviri eklentisi ile daha sonra bu kelimeleri Türkçe'ye çevireceğim. Preview kelimesi önceden çevrilmiş olduğu için o Önizleme olarak görünüyor.

Burada bahsetmemiz gereken son özellik Operation ayarı. Burada Scale Image ve Scale and Crop image olarak görünen iki adet seçenek var. Eğer Scale Image seçeneğini seçersek eklenti diğer ölçülerdeki imajları oluştururken uzun kenar hangisiyse o boyutta imajı küçültür. Yani biz 640 x 640 ölçüsünü verdiğimizde eklenti yüklediğimiz imajın en uzun kenarını 640'a düşürür ve diğer kenar da orantısal olarak küçülür. Eğer 800 x 600 ölçüsünde yatay dikdörkgen görünümde bir imaj yüklersek boyutu 640 x 480 olacaktır. Diğer seçenek ise Scale and Crop image bu seçeneği seçtiğimizde ise eklenti önce bir önceki seçenekteki işlemi yaparak uzun kenar orantısında imajı küçültür ve sonrasında da kısa kenarı her iki köşesinden eşit keserek boyutu diğer ölçüye göre ortalayarak eşitler. Kısacası yukarıdaki ayarlara göre thumbnail ölçüsündeki imajlar 170 x 170 kare olacak diğerleri ise verilen ölçülere göre orantısal olarak küçültülecek. Yine kapadokya.tc sitesinden bir örneğe bakalım

Diğer sayfalar daha basit ayarlar içeriyor. Hemen onlara da bir göz atalım.

Image Attach: Bu sayfadan image türündeki node'ların diğer içerik türlerine eklenme özelliğini aktifleştirip pasifleştirebiliyoruz. Enabled kalsın.

Image Gallery: Bu sayfada bir galeri sayfasında kaç imaj gösterileceğini belirliyoruz. 6 öntanımlı değeri, ben sitemin tasarımına uygun olarak 9 seçtim. Image Display Sort Order grubundan da galerideki imajların neye göre sıralanacağını seçiyoruz.

Image Import: Bu sayfada ise toplu yükleme için kullanacağımız dizini seçiyoruz. Öntanımlı değeri sites/default/files/images/import. Böyle kalmasını tavsiye ediyorum ama değiştirmek isterseniz değiştirebilirsiniz. Bu dizin otomatik olarak oluşturulmadığı için sunucumuzda oluşturmamız gerekiyor. Kısaca söylemek gerekirse imajlarımızı bu dizine yükleyip sonra otomatik olarak node'ların oluşmasını sağlayacağız.

Gerekli ayar işlemlerini tamaladıktan sonra hızlıca nasıl imaj yükleyeceğimizi görelim. Ama imaj yüklemek için bir galerimiz olması gerektiği için öncelikli olarak galeri tanımlamamızı yapalım. İçerik Yönetimi > Image Galleries sayfasından bir galeri tanımlıyoruz.

drupal image galeri eklenmesi

Önceden Kapadokya isimli bir galeri tanımlamıştım. Şimdi de restoran fotoğrafları için Bizim Ev Restoran adında bir galeri tanımlıyorum ve Üst Seviye olarak Kapadokya galerisini seçiyorum. Bu sayede hiyerarşik düzende galeriler oluşturabiliyoruz. Galeri tanımlamamızı bitirdikten sonra imaj yüklemeye geçelim. Genellikle imajları topluca yükleyerek node'ları otomatik olarak oluşturacaksınız ama şimdilik biz örnek olarak bir tane ekleyelim.

İçerik Oluştur > Image sayfasından imajlarımız için node oluşturabiliriz. Bu içerik türü eklentiyi yüklediğimizde otomatik olarak geliyor. Node Drupal'in temel bir özelliği olduğu için biz de fotoğrafları içerik olarak ekleyeceğimiz için node ile ilgili diğer tüm özelliklerden de faydalanabileceğiz.

Drupal image ekleme

Burada normal içerikten farklı olarak imajımızın diskteki yerini belirlityoruz. Başlık alanını fotoğraf başlığı, gövde kısmını ise fotoğrafın açıklaması için kullanabiliriz. Hatta pathauto eklentisi yüklü olduğu için fotoğraflarımız için özel URL'ler de tanımlayabiliriz. Kaydet'e tıkladığımızda imajımız sunucuya yüklenecek ve node oluşacaktır.

İşte bu şekilde hoş bir fotoğraf sayfamız oluştu. Sitemizin ana sayfasına döndüğümüzde şöyle bir görüntü ile karşılaşıyoruz.

Imaj türündeki içeriğimiz sitemizin ana sayfasına da eklenmiş oluyor. Bu aslında süper bir özellik ancak ben fotoğrafları yazı içlerinde kullandığım için her yüklediğim fotoğrafın otomatik olarak ana sayfada görünmesini istemiyorum. Bu nedenle önce imaj içeriğini düzenleyerek Yayım Bilgisi ayar grubundan Promoted to front page seçeneğini pasifleştirerek fotoğrafın ana sayfadan kalkmasını sağlıyorum. İkinci olarak da İçerik Yönetimi > İçerik Türleri sayfasından image içerik türünün ayarlarına geçerek workflow settings ayar grubundan Promoted to front page seçeneğini pasifleştirerek yeni ekleyeceğim imajların da ana sayfada görünmesini engelliyorum.

Her içerik türünde olduğu gibi imaj içeriklerini de yayına alabilir, sürüm takiplerini yapabilirim.

Şimdi isterseniz fotoğrafımızı başka bir içerik türüne ekleme özelliğini inceleyelim. Aslında benim sitemde yazı içinde birçok fotoğraf kullanamak istiyorsanız bu tercih edeceğiniz bir özellik değil çünkü içerik ekleme özelliği (Image Attach) her bir içeriğe sadece bir fotoğraf eklemeye izin veriyor. Eğer fotoğraf galerisini normal bir fotoğraf galerisi olarak kullanacaksanız o zaman bu özellik işinize çok yarayacak. Hemen bir deneme yapalım.

Öncelikli olarak hangi içerik türüne imaj eklemek istiyorsak o içerik türünde bu özelliği aktif hale getirmemiz gerekiyor. Ben deneme olarak Story içerik türüne ekleme yapacağım. İçerik Yönetimi > İçerik Türleri sayfasından Story içerik türünün ayarlarına geçtiğimizde altta Image Attach Settings ayar grubunu göreceğiz.

Yapmamız gereken Attach Images seçeneğini Etkin olarak belirlemek. Diğer ayarlar da faydalı özellikler sunuyor. Bildiğiniz gibi eklediğimiz yazıların ana sayfada görünen özet kısmına teaser, yazı içeriğinin tümüne ise Full node deniyor. Ben ana sayfa özet görünümüne fotoğrafın Thumbnail, tam görünümde ise Önizleme boyutunda olmasını tercih ediyorum. Image Weight seçenekleri ise imajın yazının hangi noktasında konumlanacağını belirlememizi sağlıyor. 0 seçeneği imajın sağa konumlanmasına neden olacaktır.

Bildiğiniz gibi story türü ana sayfada özet olarak yayınlanır. Menümüzden İçerik Oluştur > Story diyerek örnek bir içerik oluşturalım.

Görebileceğiniz gibi Story içerik türüne eklenen Attached Images ayar grubunu kullanarak fotoğrafımızı içeriğimze ekleyebiliyoruz. Ben Existing Image alanından önceki örneğimizde yüklediğimiz Restoran Giriş Alanı fotoğrafını seçtim ama siz isterseniz Upload Image seçeneğini kullanarak o esna da fotoğraf yükleyebilir ve ilgili node'un otomatik olarak oluşmasını sağlayabilirsiniz. Yine bu da fotoğraf yüklemek için alternatif bir seçenek olarak kullanılabilir.

Kaydet'e basıp ana sayfamıza geçtiğimizde içeriğimizin oluştuğunu görebiliriz.

Ana sayfamıza örnekteki gibi bir içerik eklemiş olduk. Yukarda Story özelliklerini ayarlarken kullandığımız Weight özelliğini değiştirerek imajın konumlanacağı yeri değiştirebilmek mümkün. Hatta Views 2.0 eklentisi ile de çok daha farklı görüntüleme seçeneklerine ulaşabiliyoruz. Ziyaretçimiz küçük resime tıkladığında tam içerik sayfasına gidiyor. Tam içerik sayfasında önizleme seçeneğini seçtiğimiz için fotoğrafımız daha büyük boyda görüntüleniyor.

Bu yazı tahmin ettiğimden uzun olduğu için Image Assist eklentisi ile fotoğrafları yazı içine eklemek konusuna yazacağım bir sonraki yazımda değineceğim. Aslında hepsini toplasanız 15 dakikada kurulumu tamamlayabileceğiniz bir sistem ama her detayı anlatmaya kalkınca yazı böyle uzayıp gidiyor. Umarım eklenti hoşunuza gitmiştir. Son olarak bir galeri önizleme sayfası ekran görüntüsü ile yazıya son verelim.

Drupal Image galeri önizleme ekranı

sitede uygulama

merhaba bu uygulamayı http://www.kpsscdegitim.com sitesinde uygulayabilirmiyiz. prestashop olduğu için site nasıl olacağını anlayamadım.

Eklediğim resimler gözükmüyor.

Selam
Image eklentisi ile Resim Galerisi oluşturdum.Kendi local im de yaptığımda sonun yok.Fakat aynı işlemleri sunucuda yapınca resimler gözükmüyor.
Yardımcı olursanız sevinirim.

olmadı

resimleri upload edemedim.Sanırım dosya dizininde bir problem var.çözemedim.Dosya dizini yani images kklasörü nerede ve nasıl oluşturulmalı ?

yükleme olmadı

anlatım çok iyi ancak,
resim yükleme safhasında image yaratma safhasında resmi yüklemiyor.İmage browse kutusu kırmızı çerçeve oluyor.yükleme olmuyor.
Yardımcı olur musunuz ?

imajları topluca yükleme

mrb image konusunu çok iyi anlatmışsınız sağolun.ancak ben bir türlü topluca imaj yükleyemiyorum. image attach eklentisini aktif hale getirmedim.istediğim sadece galeri önizleme sayfasındaki gibi bir galeri oluşturmak. yazdığınız diğer eklentileri etkin hale getirdim.topluca imaj yüklemeyide açıklar mısınız?