wp_get_attachment_image( int $resim_dosyasının_id_değeri, string|array $boyutları = 'thumbnail', bool $icon = false, string|array $attr = '' )

Açıklaması:

Veritabanında (ortam kütüphanesinde) kayıtlı olan bir resmi, hazır bir HTML img elemanı şeklinde getirir.

Parametreleri:

$resim_dosyasının_id_değeri

(int – Zorunludur ) Getirilmek istenilen resmin ID değeridir.

Bir resmin ID değerini bulmanın yollarında biri, yönetim panelinden Ortam->Kütüphane sayfasına giderek, resme tıklamak ve açılan sayfanın adres çubuğuna dikkat etmektir. Adres çubuğunda şuna benzer bir URL ifadesi görülecektir:

https://sitecenneti.com/wp-admin/upload.php?item=14

Yukarıda görülen URL ifadesindeki 14 sayısı, ekrandaki resmin ID değeridir.

$boyutları

(string|array) Getirilmek istenen resmin boyutlarıdır. Bu parametre, değer olarak, daha önceden kayıtlı resim boyutlardan birinin adını alabilir ya da pixel cinsinden, resmin için belirlediğimiz genişlik ve yükseklik değerlerini -sırasıyla- içeren basit bir dizi de kabul edebilir.

$boyutları parametresine, varsayılan olarak, küçük boyutlardaki resimlerin ismi olan 'thumbnail' değeri ayarlanmıştır.

WordPress kurulumu ile birlikte gelen resim boyutları hakkında daha detaylı bilgi sahibi olmak için ortam ayarları başlığımızı okuyabilirsiniz.

Bir resmi, özel bir boyut ile çağırmak isteyebiliriz. Bu durumda, önce, bu boyut için belirlediğimiz genişlik ve yükseklik değerini, add_image_size() fonksiyonu yardımı ile, bir isim vererek kaydedebiliriz. Sonra da verdiğimiz ismi, bu parametrede kullanarak resmi çağırabiliriz. Bu, yukarıdaki örnekte olduğu gibi, bir dizi kullanmaktan daha doğru bir yaklaşımdır. Çünkü add_image_size() fonksiyonu, resmi tam olarak belirtilen boyutlarda düzenler ve istersek de kırpar.

Örnek-1

Wp_get_attachment_image() fonksiyonunun, $boyutları parametresine basit bir dizi (array) değeri atanarak kullanımı şöyledir:

<?php echo wp_get_attachment_image( 1827, array('700', '500'), "", array( "class" => "img-responsive" ) );  ?>

Yukarıdaki kod, ID değeri 1827 olan resmi, oranını bozmadan ve 700×500 boyutlarına en yakın şekilde getirip ekrana basmıştır. Bu kodun, temamızda ürettiği HTML img elemanı şu şekildedir:

<img
   width="667" height="500"
   src="https://sitecenneti.com/wp-content/uploads/2019/06/Hydrangeas.jpg" 
   class="attachment-700x500 size-700x500" alt="Ortanca çiçeği"
   srcset="https://sitecenneti.com/wp-content/uploads/2019/06/Hydrangeas.jpg 1024w, https://sitecenneti.com/wp-content/uploads/2019/06/Hydrangeas-300x225.jpg 300w, http://localhost/wordpress/wp-content/uploads/2019/06/Hydrangeas-768x576.jpg 768w"
   sizes="(max-width: 667px) 100vw, 667px"
>

Aynı fonksiyonu, WordPress döngüsü içinde kullanmak istersek şöyle kullanırız:

<?php echo wp_get_attachment_image( get_the_ID(), array('700', '500') ) );  ?>

$icon

(bool) Resmin bir ikon olarak kullanılacağını ya da kullanılmayacağını belirtir. true/false değerlerini alır. Varsayılan olarak, false değeri ayarlanmıştır ve resim bir ikon olarak kullanılmaz.

$attr

(string|array) Resmimizi gösteren img elemanına, id veya name veya başka bir takım özellikler (attribute) eklemek istersek, bu parametreyi kullanırız. Varsayılan değeri “” olarak ayarlanmıştır.

Örnek-1

Aşağıdaki örnek resmi; küçük boyutta, id ve name özellikleri ekleyerek çağırır:

<?php

echo wp_get_attachment_image( 1995, "thumbnail", "", array( "id"=>"img-1995", "name" =>"img-1995") );

?>

Aynı kodu şu şekilde de kullanabiliriz:

<?php

echo wp_get_attachment_image( 1995, "thumbnail", "", "id=1995&name=img-1995" );

?>

Döndürdüğü değer:

Wp_get_attachment_image() fonksiyonu, bir HTML elemanı olan img elemanını döndürür. Resmi bulamazsa boş karakter döndürür.

Wp_get_attachment_image() fonksiyonunun tek zorunlu parametresi, $resim_dosyasinin_id_degeri parametresidir. Sadece bu parametre ile kullandığımızda fonksiyon şu şekilde görünecektir:

<?php echo wp_get_attachment_image('1995'); ?>

Yukarıdaki haliyle wp_get_attachment_image() fonksiyonu, şu HTML kodunu üretecektir:

<img src="https://sitecenneti.com/wp-content/uploads/2019/06/balonlar-3-150x150.jpg" class="attachment-thumbnail size-thumbnail" alt="" width="150" height="150">

Yukarıdaki çıktı, varsayılan ortam ayarları ile elde edilmiştir.

Kaynak kodu:

Dizini: wp-includes/media.php

function wp_get_attachment_image( $attachment_id, $size = 'thumbnail', $icon = false, $attr = '' ) {
    $html  = '';
    $image = wp_get_attachment_image_src( $attachment_id, $size, $icon );
    if ( $image ) {
        list($src, $width, $height) = $image;
        $hwstring                   = image_hwstring( $width, $height );
        $size_class                 = $size;
        if ( is_array( $size_class ) ) {
            $size_class = join( 'x', $size_class );
        }
        $attachment   = get_post( $attachment_id );
        $default_attr = array(
            'src'   => $src,
            'class' => "attachment-$size_class size-$size_class",
            'alt'   => trim( strip_tags( get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ) ),
        );
 
        $attr = wp_parse_args( $attr, $default_attr );
 
        // Generate 'srcset' and 'sizes' if not already present.
        if ( empty( $attr['srcset'] ) ) {
            $image_meta = wp_get_attachment_metadata( $attachment_id );
 
            if ( is_array( $image_meta ) ) {
                $size_array = array( absint( $width ), absint( $height ) );
                $srcset     = wp_calculate_image_srcset( $size_array, $src, $image_meta, $attachment_id );
                $sizes      = wp_calculate_image_sizes( $size_array, $src, $image_meta, $attachment_id );
 
                if ( $srcset && ( $sizes || ! empty( $attr['sizes'] ) ) ) {
                    $attr['srcset'] = $srcset;
 
                    if ( empty( $attr['sizes'] ) ) {
                        $attr['sizes'] = $sizes;
                    }
                }
            }
        }
 
        /**
         * Filters the list of attachment image attributes.
         *
         * @since 2.8.0
         *
         * @param array        $attr       Attributes for the image markup.
         * @param WP_Post      $attachment Image attachment post.
         * @param string|array $size       Requested size. Image size or array of width and height values
         *                                 (in that order). Default 'thumbnail'.
         */
        $attr = apply_filters( 'wp_get_attachment_image_attributes', $attr, $attachment, $size );
        $attr = array_map( 'esc_attr', $attr );
        $html = rtrim( "<img $hwstring" );
        foreach ( $attr as $name => $value ) {
            $html .= " $name=" . '"' . $value . '"';
        }
        $html .= ' />';
    }
 
    return $html;
}

Örnek kullanım:

Örnek-1

<?php
echo wp_get_attachment_image( get_the_ID(), array('700', '600'), "", array( "class" => "img-responsive" ) );
?>

Yukarıdaki kod, şu HTML kodunu oluşturur:

<img
src="https://sitecenneti.com/wp-content/uploads/2019/06/balonlar-3.jpg"
class="img-responsive"
alt=""
srcset="http://localhost/benimsitem/wp-content/uploads/2019/06/balonlar-3.jpg 1500w, http://localhost/benimsitem/wp-content/uploads/2019/06/balonlar-3-300x220.jpg 300w, http://localhost/benimsitem/wp-content/uploads/2019/06/balonlar-3-768x564.jpg 768w, http://localhost/benimsitem/wp-content/uploads/2019/06/balonlar-3-1024x752.jpg 1024w"
sizes="(max-width: 700px) 100vw, 700px"
width="700"
height="514"
>

Örnek-2

Aşağıdaki kod, ortam kütüphanesinde kayıtlı olan bütün resim dosyalarını başlıkları ile birlikte listeler:

<ul>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
 
        $resimler = get_posts( array(
            'post_type'   => 'attachment',
            'numberposts' => -1,
            'post_status' => null,
            'post_parent' => $post->ID,
			'post_mime_type' => 'image',
        ) );
         
        if ( $resimler ) {
            foreach ( $resimler as $resim ) {
                ?>
                <li><?php echo wp_get_attachment_image( $resim->ID, 'full' ); ?>
                    <p><?php echo apply_filters( 'the_title', $resim->post_title ); ?></p>
                </li>
                <?php
            }
        }
   endwhile; endif;
	wp_reset_postdata(); ?>
</ul>