WordPress’te Medya Yükleme Boyutlarını Özelleştirme: add_image_size Kullanımı

Tarafındankomut
0 Comments

WordPress ile ciddi anlamda uğraşan herkes er ya da geç şu soruyla yüzleşir: “Bu resimler neden bu kadar yer kaplıyor?” ya da tam tersi “Neden görseller bu kadar pixelli görünüyor?” İşte bu iki uç arasındaki dengeyi kurmak, add_image_size() fonksiyonunu doğru kullanmaktan geçiyor. Medya kütüphanene yüklediğin her görsel, WordPress tarafından otomatik olarak birkaç farklı boyutta kopyalanıyor. Peki sen bu boyutları kontrol edebiliyor musun? Evet, edebiliyorsun ve bu yazıda tam olarak bunu konuşacağız.

WordPress Görsel Boyutlandırma Sistemi Nasıl Çalışır?

WordPress’in medya işleme sistemi, bir görsel yüklediğinde arka planda sessiz sedasız devreye girer. Orijinal görselin yanı sıra WordPress, varsayılan olarak birkaç farklı boyut üretir. Bunları wp-content/uploads dizininde açıp baktığında, aynı görselin resim-150x150.jpg, resim-300x200.jpg, resim-1024x683.jpg gibi versiyonlarını görürsün.

Varsayılan boyutlar şunlardır:

  • thumbnail: 150×150 piksel, kırpmalı
  • medium: En fazla 300×300 piksel, orantılı
  • medium_large: En fazla 768 piksel genişlik, orantılı
  • large: En fazla 1024×1024 piksel, orantılı
  • full: Orijinal boyut

Bu boyutlar çoğu zaman yeterli gelmez. Özellikle özel temalar veya WooCommerce mağazaları geliştirirken, tasarımına özgü boyutlara ihtiyaç duyarsın. İşte add_image_size() tam bu noktada devreye giriyor.

add_image_size() Fonksiyonu: Temel Kullanım

Fonksiyonun sözdizimi oldukça basit:

add_image_size( $name, $width, $height, $crop );

Parametreler:

  • $name: Boyuta vereceğin benzersiz isim (string)
  • $width: Piksel cinsinden genişlik (integer)
  • $height: Piksel cinsinden yükseklik (integer)
  • $crop: Kırpma davranışı (boolean veya array, varsayılan false)

En basit kullanım örneği şu şekilde:

function custom_image_sizes() {
    add_image_size( 'hero-banner', 1920, 600, true );
    add_image_size( 'card-thumbnail', 400, 300, true );
    add_image_size( 'team-photo', 300, 300, true );
}
add_action( 'after_setup_theme', 'custom_image_sizes' );

Bu kodu functions.php dosyana ekledikten sonra, medya kütüphanesine yüklediğin her yeni görsel bu üç boyutta da otomatik olarak oluşturulacak.

Önemli not: Bu boyutlar sadece bundan sonra yüklenecek görseller için geçerlidir. Mevcut görseller için Regenerate Thumbnails eklentisini kullanman ya da WP-CLI’dan wp media regenerate komutunu çalıştırman gerekir.

Kırpma Parametresini Doğru Anlamak

$crop parametresi, çoğu geliştiricinin yüzeysel geçtiği ama aslında çok kritik bir detay. Boolean true ya da false geçebileceğin gibi, kırpmanın nereden yapılacağını belirten bir array da geçebilirsin.

Boolean Kullanımı

// Kırpma yok, orantılı küçültme
add_image_size( 'wide-banner', 800, 400, false );

// Tam kırpma, tam boyut garantili
add_image_size( 'square-thumb', 200, 200, true );

false kullandığında WordPress görseli orantılı olarak küçültür. Yani 1600×900 piksellik bir görsel, 800×400 boyutunda hedeflendiğinde tam 800×450 olarak kaydedilir. Neden? Çünkü orijinal en-boy oranı korunur.

true kullandığında ise WordPress belirttiğin boyutu garanti eder. Bunun için görseli önce boyutlandırır, sonra fazlalıkları keser. Bu özellikle grid düzenler ve kart bileşenleri için çok önemlidir, çünkü tüm kartların aynı yükseklikte olmasını garanti eder.

Array ile Odak Noktası Belirleme

Bu, birçok geliştiricinin bilmediği ama çok işe yarayan bir özellik:

function advanced_image_sizes() {
    // Üstten kırp (başlık fotoğrafları için ideal)
    add_image_size( 'portrait-top', 400, 500, array( 'center', 'top' ) );

    // Alttan kırp (ayakta duran figürler için)
    add_image_size( 'portrait-bottom', 400, 500, array( 'center', 'bottom' ) );

    // Soldan kırp
    add_image_size( 'landscape-left', 800, 300, array( 'left', 'center' ) );

    // Sağdan kırp
    add_image_size( 'landscape-right', 800, 300, array( 'right', 'center' ) );
}
add_action( 'after_setup_theme', 'advanced_image_sizes' );

Array parametresinde kullanabileceğin değerler:

  • Yatay eksen için: left, center, right
  • Dikey eksen için: top, center, bottom

Örneğin bir haber sitesi yapıyorsun ve manşet fotoğraflarının yüzleri kesmemesini istiyorsun. array( 'center', 'top' ) kullanmak, görselin üst-orta bölgesinden itibaren kırpma yapmasını sağlar. Bu, insan yüzlerini içeren fotoğraflarda çok daha iyi sonuç verir.

Gerçek Dünya Senaryosu 1: Blog Teması

Bir blog teması geliştirdiğini düşün. Anasayfada büyük öne çıkan görseller var, bir de yan yana sıralanmış küçük makale kartları. Hem de tek bir makalede tam genişlikte bir banner olacak.

function blog_theme_image_sizes() {
    // Anasayfa hero slider
    add_image_size( 'blog-hero', 1200, 500, array( 'center', 'center' ) );

    // Makale listesi kartları (3'lü grid)
    add_image_size( 'blog-card', 380, 250, true );

    // Sidebar küçük görseller
    add_image_size( 'blog-sidebar', 80, 80, true );

    // Tek makale içi banner
    add_image_size( 'blog-single-banner', 900, 350, array( 'center', 'top' ) );

    // Öne çıkan yazı (büyük kart)
    add_image_size( 'blog-featured', 700, 450, true );
}
add_action( 'after_setup_theme', 'blog_theme_image_sizes' );

Bu boyutları template dosyalarında kullanmak için the_post_thumbnail() ya da get_the_post_thumbnail() fonksiyonlarını kullanıyorsun:

// Kart görselini çağırmak için
the_post_thumbnail( 'blog-card' );

// Ya da daha fazla kontrol istiyorsan
echo get_the_post_thumbnail( get_the_ID(), 'blog-hero', array(
    'class' => 'hero-image',
    'alt'   => get_the_title(),
    'loading' => 'lazy'
) );

Gerçek Dünya Senaryosu 2: WooCommerce Mağazası

WooCommerce kendi görsel boyut sistemine sahip olsa da özelleştirme ihtiyacı çok daha sık çıkıyor. Diyelim ki bir giyim mağazası yapıyorsun. Ürün görselleri farklı sayfalarda farklı boyutlarda görünmeli.

function woocommerce_custom_image_sizes() {
    // Ürün listesi sayfası (catalog)
    add_image_size( 'woo-catalog', 300, 400, true );

    // Ürün detay sayfası ana görsel
    add_image_size( 'woo-single', 600, 800, true );

    // Ürün thumbnail küçük önizleme
    add_image_size( 'woo-thumb', 100, 130, true );

    // Sepet ve checkout sayfası
    add_image_size( 'woo-cart', 80, 80, true );

    // Kategori banner görseli
    add_image_size( 'woo-category-banner', 1200, 300, array( 'center', 'center' ) );

    // Upsell ve related products
    add_image_size( 'woo-related', 250, 330, true );
}
add_action( 'after_setup_theme', 'woocommerce_custom_image_sizes' );

WooCommerce’in kendi görsel boyutlarını da bu şekilde override edebilirsin:

function override_woocommerce_image_sizes() {
    // WooCommerce'in varsayılan boyutlarını değiştir
    add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
        return array(
            'width'  => 120,
            'height' => 160,
            'crop'   => 1,
        );
    } );
}
add_action( 'after_setup_theme', 'override_woocommerce_image_sizes' );

Mevcut Görsel Boyutlarını Kaldırmak

Bazen varsayılan WordPress boyutları gereksiz disk alanı tüketir. Özellikle paylaşımlı hosting ortamlarında disk kotası kritik olabilir. remove_image_size() fonksiyonu ile gereksiz boyutları kaldırabilirsin:

function cleanup_image_sizes() {
    // WordPress varsayılan boyutlarını kaldır
    remove_image_size( 'medium_large' ); // 768px genişlik, çoğu temada kullanılmaz

    // Eğer thumbnail kullanmıyorsan
    // remove_image_size( 'thumbnail' );

    // Öte yandan, kendi oluşturduğun boyutları da kaldırabilirsin
    // remove_image_size( 'blog-card' );
}
add_action( 'after_setup_theme', 'cleanup_image_sizes' );

Buna ek olarak, WordPress’in belirli boyutları tamamen üretmesini engellemek için:

function disable_default_image_sizes( $sizes ) {
    // medium_large boyutunu devre dışı bırak
    unset( $sizes['medium_large'] );

    // 2x boyutları devre dışı bırak (retina)
    // unset( $sizes['1536x1536'] );
    // unset( $sizes['2048x2048'] );

    return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'disable_default_image_sizes' );

Özel Boyutları WordPress Medya Kütüphanesiyle Entegre Etmek

Editörler ve içerik yöneticilerin medya ekle diyalogunda “Boyut seç” dropdown menüsünde senin özel boyutlarını görmesi için ek bir adım gerekiyor:

function add_custom_sizes_to_media_chooser( $sizes ) {
    return array_merge( $sizes, array(
        'blog-hero'          => 'Blog Hero (1200x500)',
        'blog-card'          => 'Blog Kartı (380x250)',
        'blog-sidebar'       => 'Sidebar Küçük (80x80)',
        'blog-single-banner' => 'Makale Banner (900x350)',
        'blog-featured'      => 'Öne Çıkan (700x450)',
    ) );
}
add_filter( 'image_size_names_choose', 'add_custom_sizes_to_media_chooser' );

Bu eklentiyi yapmadan da boyutlar üretilir, ama editörler görsel eklerken bu boyutları seçemez. Editörlerle çalışıyorsan bu adımı atlama.

WP-CLI ile Toplu Görsel Yeniden Oluşturma

Yeni boyutlar ekledikten sonra mevcut görsellerin de bu boyutlarda oluşturulması lazım. Regenerate Thumbnails eklentisi iş görse de sunucu tarafında WP-CLI çok daha hızlı çalışır:

# Tüm görselleri yeniden oluştur
wp media regenerate --yes

# Sadece belirli bir ID'deki görseli yeniden oluştur
wp media regenerate 42

# Sadece eksik boyutları oluştur (mevcut dosyaların üzerine yazma)
wp media regenerate --only-missing --yes

# İşlemi arka planda çalıştır (büyük siteler için)
wp media regenerate --yes > /tmp/regenerate.log 2>&1 &

# Kaç adet görsel var, önce kontrol et
wp media regenerate --dry-run

Büyük bir e-ticaret sitesinde binlerce ürün görseli varsa bu işlem saatler sürebilir. --only-missing parametresi var olan dosyaların üzerine yazmaz, sadece eksik boyutları tamamlar. Bu sayede gereksiz işlemi atlarsın.

Performans Optimizasyonu: Akıllı Boyut Planlaması

Her boyut eklemek disk alanı ve yükleme süresi anlamına gelir. 1000 ürünlük bir WooCommerce sitesinde her ürünün 5 farklı görsel boyutu varsa, medya kütüphanesinde toplam 5000 ek dosya demek. Bu ciddi bir boyut farkı yaratır.

Boyutları planlarken şunları göz önünde bulundur:

  • Aynı ya da yakın boyutları tek bir boyutta birleştir
  • Responsive design için CSS ile ölçeklendirme yeterli olabilir
  • Retina ekranlar için 2x boyut üretmek mi, yoksa SVG kullanmak mı daha verimli?
  • Gerçekten kullanılmayan boyutları hemen kaldır
function optimized_image_sizes() {
    // Kötü: Birbirine çok yakın boyutlar
    // add_image_size( 'card-sm', 300, 200, true );
    // add_image_size( 'card-md', 320, 213, true ); // Bu gereksiz!

    // İyi: Temiz, birbirinden anlamlı ölçüde farklı boyutlar
    add_image_size( 'thumb-small', 150, 150, true );
    add_image_size( 'thumb-medium', 400, 300, true );
    add_image_size( 'thumb-large', 800, 600, true );
    add_image_size( 'banner-wide', 1200, 400, array( 'center', 'center' ) );
}
add_action( 'after_setup_theme', 'optimized_image_sizes' );

Özel Boyutları Srcset ile Kullanmak

Modern WordPress, responsive images için srcset attribute’ünü otomatik üretir. Özel boyutlarını da bu sisteme dahil edebilirsin:

function include_custom_sizes_in_srcset( $sources, $size_array, $image_src, $image_meta ) {
    // Özel boyutunu srcset dizisine ekle
    if ( isset( $image_meta['sizes']['blog-card'] ) ) {
        $card_size = $image_meta['sizes']['blog-card'];
        $upload_dir = wp_upload_dir();
        $sources[ $card_size['width'] ] = array(
            'url'        => $upload_dir['baseurl'] . '/' . $card_size['file'],
            'descriptor' => 'w',
            'value'      => $card_size['width'],
        );
    }
    return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'include_custom_sizes_in_srcset', 10, 4 );

Bu sayede tarayıcı, ekran genişliğine ve piksel yoğunluğuna göre en uygun boyutu seçer. Sayfa yükleme hızı açısından ciddi bir kazanım sağlar.

Hata Ayıklama: Hangi Boyutlar Aktif?

Hangi boyutların tanımlı olduğunu görmek için bu kodu geçici olarak kullanabilirsin:

function debug_image_sizes() {
    if ( current_user_can( 'administrator' ) && isset( $_GET['show_image_sizes'] ) ) {
        $sizes = wp_get_registered_image_subsizes();
        echo '<pre>';
        print_r( $sizes );
        echo '</pre>';
        die();
    }
}
add_action( 'init', 'debug_image_sizes' );

Tarayıcıda siten.com/?show_image_sizes=1 adresine gittiğinde tüm kayıtlı boyutları görebilirsin. Tabii ki bu kodu production’da aktif bırakma, debug işi bitince kaldır.

WP-CLI ile de hızlıca listeleyebilirsin:

# PHP ile kayıtlı boyutları listele
wp eval 'print_r( wp_get_registered_image_subsizes() );'

# Belirli bir görselin hangi boyutlarının üretildiğini gör
wp eval 'print_r( wp_get_attachment_metadata( 123 ) );'

Sık Yapılan Hatalar

  • functions.php dışında tanımlamak: add_image_size() mutlaka after_setup_theme hook’una bağlanmalı. Direkt dosyanın üst kısmına yazmak bazen çalışır gibi görünse de güvenilir değil.
  • Çok fazla boyut tanımlamak: Her yeni boyut, yükleme süreci sırasında sunucu üzerinde işlem yükü oluşturur. 10’dan fazla boyuta ihtiyacın varsa tasarımı gözden geçirmek gerekebilir.
  • Mevcut görseller için regenerate yapmayı unutmak: Yeni boyut ekledikten sonra eski görseller o boyutta bulunmaz. WordPress full boyutuna döner ya da en yakın boyutu kullanır.
  • Benzersiz olmayan isimler: Eğer bir eklenti zaten featured adında bir boyut tanımlamışsa ve sen de aynı ismi kullanırsan, biri diğerinin üzerine yazar. İsimlendirmede tema adını prefix olarak kullan: mytheme-featured.

Sonuç

add_image_size() fonksiyonu, WordPress görsel yönetiminin belki de en sık kullanılan ama en az anlaşılan araçlarından biri. Doğru kullanıldığında hem tasarım tutarlılığını hem de performansı ciddi ölçüde iyileştirir. Yanlış kullanıldığında ise gereksiz disk kullanımı ve karmaşık bir medya kütüphanesine yol açar.

İyi bir strateji şu şekilde özetlenebilir: Tasarımda gerçekten kaç farklı görsel boyutu kullanıldığını say, bire bir bunları tanımla, image_size_names_choose filtresiyle editörlere sun, ve Regenerate Thumbnails ya da WP-CLI ile mevcut görselleri güncelle. Bu adımları takip ettiğinde, gereksiz boyutlardan arınmış, hızlı ve yönetilebilir bir medya sistemi kurmuş olursun.

Production siteye uygulamadan önce staging ortamında test etmeyi alışkanlık haline getir. Özellikle binlerce görseli olan büyük sitelerde regenerate işlemi ciddi sunucu kaynağı tüketir. Gece saatlerinde ya da trafik düşük olduğunda çalıştırmak akıllıca olur.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir