LangTurk | Wordpress resimleri yeniden boyutlandırma, otomatik sığdırma, küçültme

Wordpress resimleri yeniden boyutlandırma, otomatik sığdırma, küçültme

5 Temmuz 2008, Cumartesi 7 pm | Yazan : webdr | 219 okunma |

| 219 okunma

Geçenlerde günlüğü geziyorum, bazı sayfalarda resimlerin yazı alanları dışına taştığını ve günlüğe hoş olmayan bir görüntü verdiğini düşündüm, nasıl yapsamda bunu düzenlesem ve resimleri metin yazdığım alana taşmadan sığdırsam diye düşünüyordum. Daha sonra baktım olacak gibi değil hemen her Türk gencinin yapacağı ve bir kısmınında yapmayacağı gibi eklenti avına düştüm ama eklentiye gerek olmadığını kolay bir css düzenlemesi ile bunun ayarlanabileceğini anlamam uzun sürmedi. Büyük ihtimalle sizinde wordperss tema klasörünüz içinde style.css içinde bir dosya vardır. Bu dosyayı bir metin editörü ile açalım, daha sonra aşağıdaki css kodunu style.css dosyası içine yerleştirelim.

p img {padding: 0; max-width: 100%}

Bundan sonra resimleriniz metin yazdığınız yere sınırlı kalacak, taşmayacak (altta 1024*768 bir masserati’nin nasıl sığdırıldığını göreceksiniz), eğer resim çok büyük bir resim ise resmin üzerine tıklayan kullanıcılarınız, tam resme ulaşabilecekler. Bunun yanında eğer illa resmin altında resim yeniden boyutlandırılmıştır gibi bir ibare istiyorsanız, tabiki javascrpit destekli bir eklentiye ihtiyacınız var ancak ben o kadar eklenti meraklısı değilim, bence sizde olmayın böyle gül gibi geçinip gidiyoruz.

Etiketler: css, eklenti, img, resim, wordpress

İlişkili diğer yazılar

“Wordpress resimleri yeniden boyutlandırma, otomatik sığdırma, küçültme” yazısına 9 yorum var
Bavyeralı demiş ki;

5 Temmuz 2008, Cumartesi 8 pm | Cevapla

Tam olarak style.css’de belirli bir yere koymamız gerekiyor mu ? Ben en altta yapıştır mesela sende ki gibi olmadı.
webdr demiş ki;

5 Temmuz 2008, Cumartesi 9 pm | Cevapla
```
p img {
padding: 0 !important; 
max-width: 100%  !important;
}
```
Şeklinde girdiğinde CSS dosyası içerisinde nereye yerleştirdiğinin pek bir önemi kalmayacaktır ancak diğer ayarlarını etkileyebilir. Yine de denemekte fayda var.
Bunun yanında p selectorünü kaldırarak dene.
```
img {
padding: 0; 
max-width: 100%;
}
```
Bunun yanında yüzde kısmıyla oynayabilirsin, mesela %90 gibi bir değer verebilirsin. Ya da px olarak değer verebilirsin mesela 400 px
```
p img {
padding: 0 !important; 
max-width: 400px  !important;
}
```
Yine aynı şekilde şu kodu da px değerlerinde oynama yaparak deneyebilirsin.
```
p img {
padding: 0; 
max-width: 400px;
width: expression(this.width > 400 ? 400: true);
}
```
Ek olarak cascading nedir adlı yazıya gözatmanı tavsiye ederim, bazı CSS selectörlerinin dosya içerisindeki sırası başta ya da sonda oluşu kodu etkileyecektir, style.css içinde p ya da img ile ilgili bir selectör var mı kontrol edip, kodları var olan selectörlerden önce yerleştirebilirsin.
Bavyeralı demiş ki;

5 Temmuz 2008, Cumartesi 10 pm | Cevapla

bunlar iyi oldu teşekkürler
webdr demiş ki;

6 Temmuz 2008, Pazar 3 am | Cevapla

Aslında şu maserati resmini günlükte görünce hoşuma gitti, bir maserati mi alsam diye düşünmeye başladım, tabi google adsense gelirleri ile yaptığım hesaplamada eğer 1200 sitem olursa 30 yıl içinde alabiliyorum
Fuzbing demiş ki;

7 Eylül 2008, Pazar 3 pm | Cevapla

Style.css içine ekledim oldu ama üzerine tıklanmıyor.Sizdeki gibi üzerine tıklanınca büyümüyor yani.
webdr demiş ki;

7 Eylül 2008, Pazar 3 pm | Cevapla

Onun için temada ilave ayar yapmanıza gerek yok, resimleri html tagları arasında göstermeniz yeterli
```
<a href="resim.jpg" rel="nofollow"><img src="resim.jpg"></a>
```
Fuzbing demiş ki;

7 Eylül 2008, Pazar 6 pm | Cevapla

Mesela ben imageshack.us’dan yararlansam bile resmi direk görüntülüyorum ve kopyala yapıştır yapıyorum o zamanda o html tagları arasına alamıyorum bunu direk yapabileceğim bir şey yokmu?
+İlginize teşekkür ederim.
webdr demiş ki;

8 Eylül 2008, Pazartesi 9 am | Cevapla

Kişisel tecrübelerle sabittir, imageshack vb. resim yüklenen siteleri özellikle kendi siteniz için kullanmayın onun yerine kendi sunucunuzu kullanın, bir resimli anlatım yapıyorsun aradan 3 ay geçmiş hop resimler imageshackden uçmuş, çok güvenmiyorum bu resim vs. yükleme sitelerine. Soruna gelirsek…
Yanılmıyorsam imageshack yüklediğin resime ait adres verdiğinde, en altta direct link şeklinde bir bağlantı daha veriyor, sanırım bunu kullanabilirsin.
Raif demiş ki;

20 Eylül 2008, Cumartesi 7 pm | Cevapla

birkaç sorum olacak
1.ana sayfada resimlerim çıkmıyor.
2.ana sayfada resimleri çıkardıntan sonra bunları nasıl otomatik boyutlandırabilirim.