WordPress bloglarda resim boyutlandırma bazen tam bir baş belası olabiliyor. Bugün yine öyle bir bela ile uğraşırken uyguladığım sistemi daha önce sitemde paylaşmadığımı fark ettim ve en kısa sürede bu bu eksiği kapatmam gerektiğine karar verdim.
WordPress’de yazılarımıza eklediğimiz resimleri her zaman o anki temamıza göre düzenleriz, örneğin temanın genişliği 900 piksel sidebar 300 piksel ve content (yani içerik) alanı 600 piksel ise resimleri de hep genişliği 600 pikseli geçmeyecek şekilde ayarlarız, ama yazıları eklerken ileride tema değişebileceğimizi hesaba katmayız.
Böyle bir durum bugün bir kez daha başıma geldi, bundan 1 sene önce blog kurduğum arkadaşım domain ve tema değişimi talep etti bu taleplerini yerine getirdiğimde yeni beğendiği temanın content kısmının eskisine göre daha dar olduğunu ve resimlerin hepsinin sağ sidebar’a taşdığını gördüm.
Eski temada content genişliği 700 piksel iken yeni temadaki content genişliği 450 piksel olduğundan bu durumun olması gayet doğaldı ama sitedeki tüm eski konuları tek tek düzenleme şansıda yoktu buna çözüm olarak şöyle bir yöntem denedim ve başarılı oldum..
CSS Komutu ile Resim Boyutlandırma!
Birkaç eklenti denedim ve istediğim sonucu alamayınca, eklenti yerine temanın css şablonuna bir css kodu eklemeye karar verdim ve eklediğim kod ile konu içerisindeki tüm resimlere maksimum genişlik + otomatik yükseklik tanımladım.
Yani konu içeriği için kullanılan div “theposts” idi, tam altına “theposts img” div’ini ekledim..
.theposts img{
max-width: 450px;
height : auto; }
Yukarıdaki ekleme ile tüm yazı içi resimler 450 piksel genişliğe indi, buna ek olarak Lightbox 2 eklentisi ile resimlere lightbox özelliği verdiğinizde yeni pencerede açılması gereken tüm resimler lightbox’da orijinal boyutuyla veya sizin belirlediğiniz boyutta lightbox efekti ile görüntüleniyordu..
Uyguladığımız bu yöntemde resimlerin orijinal boyutları bozulmadığından ilerleyen süreçte yeni bir tema değişiminde maksimum genişliği tekrar ayarlayabiliyor ve resimleri temaya uyarlayabiliyoruz..
Ekleme:
Resimlerin hepsi hem otomatik ufalsın, hem de ortalansın istiyorsanız kodu aşağıdaki şekilde kullanabilirsiniz;
.theposts img{ max-width: 450px; height: auto; display: block; margin-left: auto; margin-right: auto; }
Eğer sizin de bildiğiniz WordPress içerik resimlerini yeniden boyutlandıran yöntemler, eklentiler varsa buradan bizimle yorum olarak paylaşabilirsiniz..