WordPress responsive thumbnail problemi – Her çözünürlükte farklı görsel sunma - ÇÖZÜM

WordPress’te ne zaman bir yazıya öne çıkarılmış görsel atasanız veya yazı içine görsel ekleseniz WordPress otomatik olarak bu görselin çeşitli varyasyonlarını kaydeder. Tarayıcı çözünürlüğüne göre de en uygun görseli bulup ziyaretçiye gösterir. Responsive tasarım teknolojisi bir görseli siteye yükleyip gerisini WordPress’e bırakmak kadar kolay görünse de görsel boyutlarıyla ilgili bazı sorunları da beraberinde getiriyor.

Problem

Tarayıcılar en uygun görseli seçip size sunmadan önce görselin görüntüleneceği alanın ne kadar büyük olduğunu belirlemek isterler. Bu alanın büyüklüğüyse sizin kullandığınız temaya göre değişiklik gösterir. Bunun sonucunda kullandığınız temada görsel alanlarının boyutları tam olarak belirtilmemişse WordPress işini garantiye almak ister ve kullanılabilecek en büyük görsel boyutunu o alanda kullanılabilmesi için ayırır.
Mesela siz bir yazınız için 1500px genişliğinde bir görsel yüklediyseniz; WordPress anasayfada, yazı içinde ve arşiv sayfalarında o görsel için ayrılmış alanda maksimum 1500px genişliğinde bir görsel görüntüleneceğini varsayar ve ona göre davranır. Bu kısmen doğru olsa da ekran genişliği küçüldükçe sunulan görselin de ona göre kırpılıp küçültülmesi zorluk çıkarır ki zaten WordPress görselleri önceden kırpılmış boyutlara göre sunar.


Biraz sonra öğreneceğiniz çözüm yolu aynı zamanda GTMetrix analizlerindeki “serve scaled images” sorununu da ortadan kaldırır. Yukarıdaki ekran alıntısında görüldüğü gibi ben kendi web sitemde (othemes.net) 369×277 piksellik alan için 1000×750 piksel boyutlarında bir görsel kullanmışım. Bu da siteyi yavaşlatan önemli bir unsur.

Çözüm

Bu problemin çözümü için WordPress; 4.4 güncellemesiyle beraber img srcst özelliğini de yapısına ekledi. Bu özellik sayesinde sayfa yüklenmeden önce tarayıcıdan görsellerin yükleneceği alanın boyutu alınıyor ve tarayıcıda gösterilmesi için sizin belirlediğiniz görsel sunuluyor. Yani seçim işini tarayıcıya bırakmıyorsunuz. Çok mantıklı ama buradaki esas olay hangi çözünürlükte hangi görselin yükleneceğinin belirlenmesi ve bu da tamamen kullandığınız temanın işi.
Bu sorunun nasıl çözüldüğünü daha iyi anlamanız için örneklerimi Yirmi Onaltı teması üzerinden göstereceğim. Böylelikle siz de ne yaptığımızı elinizin altındaki bu temadan takip edebileceksiniz.

Kod Yapısı

Yirmi Onaltı temasında functions.php dosyasını açtığınızda karşınıza iki tane fonksiyon çıkacak. Birincisi yazı ve sayfalarda içerik içine eklediğimiz görselleri sunan “content_image” fonksiyonu:

<?php
function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];


840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';


if ( 'page' === get_post_type() ) {
840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
} else {
840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
}


return$sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );

İkincisi ise sadece öne çıkarılmış görselleri listeleyen “post_thumbnail” fonksiyonu:

<?php
function twentysixteen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
if ( 'post-thumbnail' === $size ) {
is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px';
! is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 88vw, 1200px';
}
return$attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_post_thumbnail_sizes_attr', 10 , 3 );

Öne Çıkan Görsel

Örnek olması açısından öne çıkarılmış görselleri sunan fonksiyona bakalım.
Koda daha dikkatli baktığımızda öne çıkan görselleri sunmak için “wp_get_attachment_image_attributes” fonksiyonunu kullandığını görüyoruz. Bu WordPress’in standart fonksiyonlarından biri. Bazı haber temaları da özel galeriler oluşturmak için bu fonksiyonu kullanır. Burada da fonksiyon kullanılmış ve çıktı filtrelenmiş ( filtre nedir ).

<?phpfunctiontwentysixteen_post_thumbnail_sizes_attr( $attr, $attachment, $size ){// burada resimle ilgili istediğimiz filtreleme işlemini yapacağız  }add_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_post_thumbnail_sizes_attr', 10 , 3 );

Yani olayı sadeleştirirsek: Yazıda kullanılan öne çıkarılmış görselin tüm özelliklerini çeken bir fonksiyon kullanılıyor ve WordPress henüz öne çıkarılmış görseli bize göstermeden çıktı filtrelenip öyle listeleniyor. Yani WordPress’in resim sunma işini kesip bizim filtrelerimize göre yaptıracağız ��
Şimdi örnek üzerinden detaylı inceleyelim:

if ( 'post-thumbnail' === $size ) { // $size gösterilmek istenen görselin boyutunu veriyor, koşula bağlı olarak görsel boyutu hedefleniyor }

* Burada ‘post-thumbnail’ === $size kısmında $size yerine önceden tanımladığınız öne çıkarılmış görsel ismini yazabilirsiniz.

<?php
is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '
(max-width: 709px) 85vw,
(max-width: 909px) 67vw,
(max-width: 984px) 60vw,
(max-width: 1362px) 62vw,
840px';
! is_active_sidebar( 'sidebar-1' ) && $attr['sizes'] = '
(max-width: 709px) 85vw,
(max-width: 909px) 67vw,
(max-width: 1362px) 88vw,
1200px';

Yukarıdaki kodda Yirmi Onaltı temasını yapanlar öne çıkan görsel boyutunu Sidebar’ın aktif olup olmadığına bağlamışlar. Sidebar-1 isimli bileşen alanı aktifse öne çıkarılmış görsel niteliklerinden görsel boyutu ele alınsın ve şu işlem yapılsın değilse şöyle olsun gibi…
Siz de conditional tags dediğimiz bu koşulları kendi ihtiyacınıza göre belirleyebilirsiniz. Eğer anasayfadaysa şöyle olsun, kategori sayfasındaysa şöyle olsun vs vs…
Koşullara buradan bakabilirsiniz: WordPress Conditional Tags

• Eğer viewport 709px ve bundan küçükse; öne çıkarılmış görsel total viewport genişliğinin %85’i kadar bir alanı kaplasın.
• Eğer viewport 709px ile 909px arasında bir genişliğe sahipse; öne çıkarılmış görsel total viewportun %67’si kadar bir alanı kaplasın

Viewport: kullanıcının tarayıcıda görebildiği alan demektir. Kodun en sonunda gördüğümüz 840px ve 1200px değerleri öne çıkarılmış görselin alabileceği maksimum genişlik değerleridir. Buraya öne çıkarılmış görseli eklerken belirlediğiniz genişlik değerini yazmanız önemlidir yoksa resim kendi boyutundan fazla genişler ve bozulur.

Çıktı ve Hazır Kod

Şimdi hepsini toparlayalım ve öğrenmeyi pek sevmeyenler veya okumaktan sıkılanlar için hazır bir şeyler yapalım.
İlk önce temamıza öne çıkarılmış görsel özelliği kazandıralım (yoksa):

<?php
// bu kod ile temamıza öne çıkarılmış görsel desteği sağlıyoruz


if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
  add_image_size( 'gorsel', 1024, 640, array( 'center', 'center' ) );
};

Ardından bu görselimizin anasayfadaki yazılarımızda nasıl görüneceğini belirleyelim:

<?php
function mehmetarik_one_cikan_gorsel_srcst( $attr, $attachment, $size ) {
if ( 'post-thumbnail' === $size ) {
    
    is_front_page() && $attr['sizes'] = '(max-width: 1366px) 50vw, (max-width: 1280px) 60vw, (max-width: 1024px) 82vw, (max-width: 768px) 92vw, 840px';        
    
}
return$attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'mehmetarik_one_cikan_gorsel_srcst', 10 , 3 );

Kodun çıktısı:

<html>
  <img class="alignnone wp-image size-full"
       src="http://example.com/img/deneme.jpg"


       srcset="http://example.com/img/deneme-706x456.jpg 768w,
               http://example.com/img/deneme-840x570.jpg 1024w,
               http://example.com/img/deneme-768x540.jpg 1280w,
               http://example.com/img/deneme-683x384.jpg 1366w"


       sizes="(max-width: 768px) 92vw,
              (max-width: 1024px) 82vw,
              (max-width: 1280px) 60vw,
              (max-width: 1366px) 50vw, 840px" />

Gördüğünüz gibi her çözünürlükte farklı boyutlarda kırpılmış görselleri listeletebiliyoruz. Bunu geliştirmek ve farklı durumlarda farklı şekillerde kullanmak size kalmış. İstediğiniz kadar koşul ekleyip istediğiniz sayıda görseli filtreleyebilirsiniz. Sonuç olarak bu işlem site performansını önemli ölçüde etkileyecek ve sunucu yükünü de aynı oranda azaltacaktır.

Hoşçakalın. Bu ilk yazımdı. Umarım anlatabilmişimdir

Kaynak: https://mehmetarik.com.tr/wordpress-...-gorsel-sunma/