Blogger'da Resimlerinizi Yanyana Sıralayın

Merhaba bu gün resimler benden değil, Heniala's isimli blogdan. Yukarıda görüldüğü üzere resimlerin düzenlemesi, yan yana bitişik alt alta vs değişik şekillerde yapılabiliyor. Bir süredir de bir yastıkta için böyle resimler koyuyorum. Çok resimli postlarda daha hoş bir görüntü veriyor.

Şimdi böyle fotoğraf yerleşiminin nasıl yapıldığını anlatacağım. Pek tabi fotoğrafı, fotoğraf programlarında bu şekilde kolajlayıp da sunabilirsiniz. Ancak benim yaptıklarım sadece kodlarla yerleşimin ayarlanması ile ilgili.

Biliyorsunuz kayıt oluştururken, bir kayıt oluştur bir de html yi düzenle penceresi var. Kayıtlarımı genelde html düzenle kısmından ayarlarım, böylece gözüm kodlara daha da alışmış oluyor. Zaten web tasarımını da bu şekilde öğrenmiştim. Dreamweaver'da çalışırken, pencerenin kod ve görsel diye ikiye ayrılması için bir seçenek var, ben sürekli onu kullanırdım ve kodları göre göre, yaptığım değişikliklerin kodlardaki karşılıklarını öğrendim.

Neyse, bütün bu resimler alıntı olduğu için url ile resim ekleme kısmından resimlerimizi giriyoruz. İki tip yazı düzenleyicimiz var biri eski olan biri güncelleştirilmiş olan. Genelde eski olanda daha kolay ayarlama yapılabiliyor. Güncelleştirilmiş düzenleyici kimi zaman resmin en ve boy oranını koda yansıtmıyor ki bizim asıl değiştireceğimiz kısım orası. Bu yüzden eski güncelleştirici üzerinden anlatacağım.

Öncelikle yazı alanınızın genişliğinin kaç piksel olduğunu bilmeniz gerekiyor. (Bazı geniş yazı alanı olan bloglar var, sağ ve soldan kenarlara yaslanmış şekilde yazıları olan. Bu blog teması biraz sorunlu bir temadır. Çünkü ekran genişliğine göre kendini genişletip daraltır, bu yüzden A bilgisayarında çok geniş, B bilgisayarında dar görünebilir. Bu durumda konacak oan resimler bilgisayardan bilgisayara farklı şekilde sıralanmış olacaktır.) Yazı alanının genişliğini keşfettikten sonra resimlerinizi koyacağınız genişliğ bulmanız lazım. Genelde bordür çizgisi kenarlardan 5 piksel boşluk bırakıyor. Bu durumda koyacağınız resim sayısına göre kenarlardan o kadar boşluğu hesaplamak gerekiyor.

İlk seferinde bu ayarlama biraz zaman alabilir, ancak sonra artık kafanızda ne kadar genişlik olacağı oturacak ve daha sonra hızlanacak.

Bir süredir eski düzenleyicide resimleri yüklerken sol, sağ, orta seçeneğinden başka " yok" seçeneği mevcut. Resimleri yüklerken o seçenek seçili olmalı. Ardından url ile resimlerimizi ekliyoruz (ya da gözat ile de olur, aynı şeyler geçerli olacak)

Yukarıdaki resimlerin düzenlemesini kendi genişliklerim üzerinden anlatacağım. Benim yazı alanım 640 px ve bordürleri de sayarsak en fazla 620 piksel genişliğe yükleyebilirim, biraz boşluk kalsa da olur.

Resimleri yükledikten sonra html düzenleye geliyoruz, burada her bir resim küçük işareti ve a ile başlar a ardından büyük işareti ile biter. Aynı link verme kodu gibi zaten o da resmin linkini gösteriyor. Daha önceki yazılarımda göstermiştim.

Resimleri yüklediğimizde her bir resim başlangıcı satır başında yer alacaktır. Bu her bir resmin enter ile bir alt satırda olması demek. Eğer aradaki boşluğu silip de ikinci resmin başlangıcını diğer resmin bitişine taşırsanız, resimler yanyana gelecektir. Resimler küçük ise, yazı alanınızı dolduracak kadar çok resmi yanyana koyabilirsiniz. Mesela 10 resmi yanyana getirdiniz yazı alanıza maksimum 4 resim sığdı diyelim diğer 4 resmi alt sıraya, diğer 2 resmi alt sıraya otomatikman atacaktır. Her ne zaman siz enter deyip alt satıra geçerseniz zorunlu olarak altta yer almasını sağlamış olursunuz.

Yani kısaca aradaki boşlukları silip resim kodlarını yanyana getiriyoruz. Eğer bu yanına getirme sırasında arada bir space bırakırsanız resimler birbirinden ayrı, hiç space bırakılmasza yapışık resimler elde edilir.

Şimdi gelelim daha düzgün görünmler elde etmeye, zira resimlerin bazıları dikey, bazıları yatay çekilmiş olabilir. Şimdi sırasıyla benim yukardaki resimleri inceleyelim. 

Birinci satırdan başlayalım. Biri yatay biri dikey resim ama ikisinin de yüksekliği eşit olsun istiyorum. Kodun içinde en (width) ve boy (height) piksel değerleri gözükecek. Buradan her bir resmin eni ve boyunu görüyoruz. Ben birinci satırdaki resimler için ikisinin de yüksekliğini 295 px ayarladım. Yüksekliğini değiştirdiğim için width=XXXpx yazan yeri siliyoruz. Eğer o ifade kalırsa resminiz eski genişlikte yeni yükseklikte çarpık bir resim olacaktır. Kodun içinde hangisini değiştirecekseniz (en yada boy) değiştirip diğerini siliyoruz. Bu durumda ilk satırdaki resimlerde yatay resim ve dikey resim yükseklikleri 295 olacak şekilde kendilerini ayarladılar.

2 satırda tek bir resim olsun istedim ve resim genişliğini benim resim alanım olan değere ayarladım 640px yazıp yüksekliği sildim. Burada dikkat edilecek bir husus daha gerçek boyutları büyük olan resimleri küçültüp, küçük olan resimleri büyütmemek. O zaman resim flu gözükecektir. Muhakkak en fazla orjinal boyutunda olmalı, daha küçülebilir ama büyümesin.

3. satırda dikey halde iki resmi yanyana koymak istedim. bu iki resim de aynı en boy oranına sahipti. İkisinin de genişliğini 310px ayarladım, yüksekliklerini sildim.

4. satıra yine 640 px genişliğinde bir tek resim koydum.

5. satıra dikey resimlerden 3 tane yerleştirdim. Deneyerek gördüm ki yüksekliklerini 287 ayarlarsam hepsi bir satıra sığacaktı. Genişliklerini de yaralayabilirdim ancak en boy oranı farklı olan resimlerde, genişlikleri aynı olunca yükseltilerinde farklılık oluşuyor ve kimisi daha kısa görünüyor. Bu durumda yüksekliği ayarlamak daha iyi. Bir de bu satırdaki resimler arasında boşluk yok. Benim bordürüm olduğu için iç kısmdaki bordürler üstüste gelmiş görünüyor, bordürsüz temalarda resimler boşluksuz yapışacaktır.

6. satırda yine aynı ebatlara sahip iki resmin genişliğini 310 px ayarladım.

Şimdi çok karmaşıkmış gibi görünebilir ama değil. Özellikle sitesinden satış yapanların, pörtfoy sunanların bu görünüm özelliklerine dikkat etmesi iyi olacaktır.

Açık yazmaya çalıştım ama anlaşılmayan birşey olursa sorabilirsiniz.