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..
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..
Yararlı bir bilgi olmuş teşekkür ederim.Burada css tanımlaması yaptın da o css tanımlaması yaptığın divi nasıl buldun başka bir temada yapılmak istedirse bu div nerededir nereden bileceğiz ?
@mesutturan.com; Genelde konu/içerik bölümüne post, entry yada content etiketi kullanılır eğer style dosyasında boğulmak istemiyorsanız firefox tarayıcısı için Colorzilla eklentisini kullanabilirsiniz yada single.php dosyasında content kısmına göz atabilirsiniz.. Yanlışım yoksa rumuz kısmına yazdığınız sitenin temasında içerik kısmı sadece p etiketi ile işaretli, o temada resim boyutlandırma yapmak istiyorsanız single.php’de içerik kodunu bulup css eklemesi yapmalısınız.
Örneğin: < div class="content">< ?php the_content(); ?>< /div>
Bu şekilde olunca style.css’ye;
.content img{ max-width: 450px; height : auto; }
Eklemeniz yeterli olur.
Bir katkı da benden olsun, yazıya ekleyebilirsin. Aşağıdaki kodun, kullanılan temanın style.css dosyasına eklenmesiyle görseller küçültülürken en-boy oranı da korunmuş olur. Kodun mantığı, maksimum genişliğin, içerik alanının %98'i kadar olacak şekilde görselin daraltılması ve yüksekliğin de otomatik olarak orjinal en-boy oranına göre tekrar ayarlanması.
img {max-width:98%; height: auto;}
Teşekkürler :)
Kodlar için çok sağol hocam benim bir sorum olacaktı. İnternette sadece bu kod işime yaradı. Ancak resimleri ortalamak için center kodlarını eklediğimde kod çalışmıyor. Ben bu kodu nasıl düzenlersem resimler ortalanır. Temamdan kaynaklı sanırım kod çalışıyor ancak sola dayalı çıkıyor resimler,teşekkürler.
@teoman; Merhaba. Eğer temanın style dosyasından kaynaklı bir reset durumu olmazsa kodu aşağıdaki gibi kullanmanız halinde tüm resimler hem otomatik ufaltılır hemde sayfada ortalanırlar.
.content img{
max-width: 500px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
hocam ben resimleri kendi sunucumda tutmuyorum resmi baska siteden alıyorum kink olarak ornek
baska siteden aldıgım resimlerinde boyutunu otomatik yapabiliyormuyuz acaba.. size style.css dosyaımıda kopyalayım nereye kod koyulacaksa söylermisiniz o sekil ayarlayayım
@Erkan; Eğer temada resimler için özel bi tablo yapısı felan yoksa sorun çıkmaz, kodu aynen kullanırsınız. Ama imagedata, imagedatacontainer ve post css kodları farklı bir sonuç çıkarabilirler o zaman onlarda ufak değişiklikler yapmanız gerekebilir. Şuan için yapılacak değişiklik şu;
#content img { padding: 5px; border: 1px solid #ccc; margin: 5px;
}
css koduna konuda paylaştığım kodlar eklenecek ve genişlik, yükseklik kafanıza göre ayarlanacak.
#content img { padding: 5px; border: 1px solid #ccc; margin: 5px; max-width: 450px; height : auto; }
Değişiklikten sonra yeni css düzeni için F5 yapmayı unutmayın. Eğer kod çalışmaz ise css dosyasındaki “post” kodları altına yeni “post img” ekleyip verdiğim kodları birde orada deneyin.
Yararlı bilgilerin için teşekkür ederim. Sayende sıkıntılarımı giderdim.
Merhaba konuyu hortlatır gibi oluyorum fakat bir sorunum var size danışmak istedim.
WordPress son sürüm kurulu bi websitem var,google supporttan fotoğraf boyutlarıyla ilgili bir uyarı aldım acaba şuan /wp-content/uploads/ klasörümde yüklü olan sitemde sergilediğim fotoğrafların boyutunu nasıl değiştirebilirim acaba yardımcı olabilirmisiniz,ve yaparsam eğer bunu sabit bir şekilde olurmu yeni ekleyeceğim fotoğraflarda buna göre ayarlanabilirmi karışık gibi oldu biraz ama aydınlatırsanız minnettar olurum saygılar sevgiler.
@Can Yener; Merhaba. Muhtemelen telefon veya fotoğraf makinası ile çektiğiniz resimleri doğrudan yüklediğiniz için resimler 2-3 mb boyutlarındadır, bu da sitenin açılış hızını etkiler. En basitinden (çok fazla yazı ve resim yoksa) wp-content/uploads klasöründeki tüm resimleri indirip tinypng.com'dan sıkıştırıp ftp'ye aynı isimleriyle geri gönderin.
Bu yöntemden sonuç alamazsanız yani resimler sıkıştırıldığında boyutlarından kazanç yapamıyorsanız; Türk geliştiriciye ait WP Fastest Cache uygulamasının premium sürümünü satın alın. Eklentinin paralı sürümü ftp'deki resimleri sıkıştırabiliyor.
https://wordpress.org/plugins/wp-fastest-cache/