WordPress’te Otomatik Resim Boyutlandırma

Wordpress'te Otomatik Resim Boyutlandırma

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 birkaç yöntem vardı onları denedim ve şimdi bu yöntemleri sizlerle de paylaşıyorum..

nCode Image Resizer:

https://wordpress.org/plugins/ncode-image-resizer/#screenshots

Birinci yöntem Vbulletin ve Mybb forumlardaki gibi otomatik resim boyutlandıran eklenti kullanmak, bunun için wordpress sitesinde birkaç eklenti var onlardan birincisi “nCode Image Resizer”.

Eklenti Vbulletin’den uyarlanmış ama ufak bir kusuru var, eklentiyi kullandığınızda eğer konu içerisinde center kullanıyorsanız resimlerin üzerinde çıkan uyarı kısmı kötü bir görünüme neden oluyor, bunun haricinde eklenti güzel çalışıyor..Otomatik olarak sitedeki büyük boyutlu resimleri en büyük genişlik limitine ufaltıyor ve üzerinde de bir uyarı beliriyor..

Wordpress'te Otomatik Resim Boyutlandırma

Image Resize Wizz:

https://wordpress.org/plugins/image-wizz/

Yine WordPress için geliştirilmiş bir başka resim boyutlandırma eklentisi var, onun adı da “Image resize wizz”..Bu eklentinin üzerinde bir uyarı çıkmıyor, admin panelinde ayarlar bölümünden maksimum boyutları giriyorsunuz ve resimlerin hepsini otomatik boyutlandırıyor ancak bu eklentinin de sitede belirgin bir yavaşlamaya sebep olduğunu fark ettim ve bunu rahatsız etti bu eklentiden de böylelikle vazgeçtim..

İki eklentiyi de kullanmadım. Peki resim taşmaları için ne yaptım?

İki eklentide aradıklarımı tam karşılamadığı için eklenti yerine temanın css şablonuna bir css kodu ekledim, eklediğim kod ile konu içerisindeki tüm resimlere maksimum genişlik ve 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üleniyor..

Uyguladığımız son 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, hemde 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;  }

Yazımın başında verdiğim eklentilerden birincisinin resim ortalama sorunu, ikinci eklentinin gecikme sorunu haricinden sorunları yok, eğer resimleri ortalamıyorsanız veya biraz php + js bilginiz varsa ortalama sorununu halledebilir yada birinci eklentide resimlerin üzerinde çıkan uyarı kısmını tamamen kaldırabilirsiniz..

Eğer sizinde bildiğiniz WordPress içerik resimlerini yeniden boyutlandıran eklentiler varsa buradan bizimle yorum olarak paylaşabilirsiniz..