Blogger yayınlarına eklediğimiz resimleri nasıl uyumlu yaparız?

Birkaç sosyal içeriğin ardından Blogger kullanıcılarını yakından ilgilendiren güzel bir içerikle daha karşınızdayım dostlarım. Bu yazımda Blogger yayınlarına eklenen resimleri nasıl tam boyutta gösteririz bundan bahsettim. Aslında görselleri tam boyut yapmak değil amacımız, görselleri tüm teknolojik cihazlarda uyumlu göstermek. Nasıl mı? ↴

Blogger içerik editöründe yer alan "Resim ekleyin" butonuyla kolayca yazılarımızın arasına resim ekleyebiliyoruz.

Görsel ekledikten sonra ise karşımıza aşağıdaki gibi bir görüntü çıkıyor:

Bu seçenekler ile eklediğimiz resimlerin boyutlarını ayarlayabiliyoruz. Örneğin ben eklediğim resimleri "Çok Büyük" seçeneği ile tam sayfa genişliği olacak şekilde gösteriyorum. Asıl sorunda tam olarak bu noktada başlıyor.

Örneğin resimler için "Orjinal boyut" seçeneğini seçtiğimizde, resimler metin alanının dışına taşabiliyor. Ya da bazı blogger dostlarımızın blogunda "Çok büyük" seçeneği resmi metin alanını dolduracak kadar geniş olamayabiliyor. Tabi yapacağımız yanlış boyut seçimi mobil cihazlarda da sorunlu bir görüntüyle karşılaşmamıza neden olabilir. Tıpkı aşağıdaki örnekteki gibi:

Yazı içerisine eklenen resim yayın alanının dışına taşmış. Yani öyle büyük bir sorun değil ama hoş bir görüntü de değil.

Bu sorunu çözmek için ise eklememiz gereken basit bir kod var. İçeriğimizi hazırladıktan sonra hemen sol üst köşede yer lan HTML butonuyla kodların yer aldığını alana ulaşıyoruz. Kodların arasından görseller için oluşan şu kodlara ulaşıyoruz:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_e-xMsBL_H7Y3XPxwfSOOiABWaaoEe50n4ng_zSjAM9CgROQX0xlKfOEuO33afqvhHmcih4WTwWmetY-tOFrtuYJi3kcKfP3d42gn31cIMksa-4tLHOmNI4memjxer7SA297Of-_dLs/s1600/blogger-gorsel-ekleme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="45" data-original-width="703" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_e-xMsBL_H7Y3XPxwfSOOiABWaaoEe50n4ng_zSjAM9CgROQX0xlKfOEuO33afqvhHmcih4WTwWmetY-tOFrtuYJi3kcKfP3d42gn31cIMksa-4tLHOmNI4memjxer7SA297Of-_dLs/s640/blogger-gorsel-ekleme.png" width="640" /></a></div>

Her görsel için yukarıdaki gibi bir div otomatik olarak oluşur. Burada yapmamız gereken ise genişlik ve yükseklik değerlerini

width="100%"
height="auto"

yukarıdaki gibi yapmak. Genişlik olarak 100% değerini vererek görselin bulunduğu alanı tam olarak kaplamasını, yüksekliğe auto değerini vererek ise genişlik değeriyle birlikte otomatik olarak hareket etmesini sağlıyoruz.

Bu konuda bu kadardı dostlarım. Oldukça basit, bir o kadarda ihtiyacımız olan bir kod. Konuyla ilgili sorularınız olursa yorum yaparak bildirebilirsiniz.