Macam-macam Ukuran Gambar Pada WordPress

Photo by Yayan Kurnia Akbar

Saat Anda mengunggah gambar ke situs web WordPress Anda, WordPress secara otomatis akan menambahkan macam-macam ukuran gambar pada WordPress, sehingga akan muncul salinan gambar dengan berbagai macam ukuran, Kenapa seperti itu? Karena WordPress tidak hanya menggunakan satu ukuran gambar yang sama di mana pun pada situs Anda, contohnya :

  • Dalam postingan
  • Dalam portofolio
  • Di munculan
  • Sebagai posting thumbnail di halaman arsip
  • Pada widget
  • Pada tampilan administrasi dll

Jadi, WordPress memungkinkan Anda untuk menggunakan gambar ukuran penuh pada halaman posting dan ukuran 150×150 (misalnya) gambar pada halaman arsip.

Perlu Anda ingat bahwa semakin banyak ukuran gambar terdaftar yang Anda miliki, semakin banyak file yang ada di situs web Anda dan semakin banyak waktu yang diperlukan untuk memproses gambar selama pengunggahan.

Link MangcodingUkuran Gambar WordPress Default

WordPress mendukung beberapa ukuran gambar secara default. Anda dapat menemukan dan mengubahnya di area administrator Pada “Pengaturan > Media”.

Images Default Mangcoding

Bagaimana jika Anda tidak ingin WordPress membuat salinan gambar untuk setiap ukuran. Anda dapat memasukkan kode dibawah berikut ke dalam tema Anda pada functions.php.

Namun Anda harus ingat bahwa jika tema WordPress Anda menerima pembaruan, lebih baik Anda gunakan tema child (anak) atau plugin khusus agar tema yang sudah anda rubah tidak tertimpa dengan tema hasil pembaruan WordPress.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes');
 
function misha_turn_off_default_sizes( $default_image_sizes) {
 
    unset( $default_image_sizes['thumbnail']); // turn off thumbnail size
    unset( $default_image_sizes['medium']); // turn off medium size
    unset( $default_image_sizes['large']); // turn off large size
 
    return $default_image_sizes;
 
}

 

Link MangcodingUkuran gambar sedang – besar

Ukuran medium_large gambar muncul di WordPress 4.4 bersamaan dengan fitur gambar responsif. Ini memiliki lebar tetap 768px dan tinggi proporsional.

Anda dapat menonaktifkan ukuran gambar medium_large secara sederhana dengan menambahkan kode dibawah ini :

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large');
 
function misha_deactivate_medium_large( $default_image_sizes ){
 
    $default_image_sizes['medium_large'];
    return $default_image_sizes;
 
}

 

Link MangcodingBagaimana Mendapatkan Semua Ukuran Gambar?

Terkadang Anda harus mencari informasi tentang daftar ukuran gambar yang tersedia pada situs web. Sayangnya tidak ada cara untuk merubah ukuran gambar default dan khusus, jadi, Jika Anda memerlukan daftar ukuran gambar default, Anda dapat menggunakan get_intermediate_image_sizes(), maka dengan langkah ini Anda bisa mengembalikan array dengan ukuran gambar default, contoh :

print_r( get_intermediate_image_sizes() );
/*
 Array ( [0] => thumbnail [1] => medium [2] => medium_large [3] => large )
 */

 

Jika Anda harus mencantumkan ukuran gambar terdaftar, Anda bisa mendapatkannya dari $_wp_additional_image_sizes variabel global, dan kami dapat memberi tahu Anda lebih banyak lagi langkahnya, Anda juga bisa mendapatkan dimensi gambar dari sana, contoh :

global $_wp_additional_image_sizes;
print_r( $_wp_additional_image_sizes );
/*
Array
(
    [my-image-size-name] => Array
        (
            [width] => 400
            [height] => 400
            [crop] => 1
        )
 
    [twentyseventeen-featured-image] => Array
        (
            [width] => 2000
            [height] => 1200
            [crop] => 1
        )
)
*/

 

Link MangcodingFungsi

Cukup mudah untuk menggunakan ukuran gambar WordPress di area administrator, yang harus Anda lakukan hanyalah memilih ukuran gambar yang Anda butuhkan dari dropdown. Dan ada beberapa fungsi yang bisa Anda Lihat :

Link MangcodingA. the_post_thumbnail()

Ini merupakan Urutan pertama pada daftar kami, karena kami menggunakannya lebih sering daripada yang lainnya.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

 

Perlu diketahui, bahwa fungsi ini mencetak (img) tag, bukan URL.

$size
Inilah yang dapat Anda gunakan sebagai nilai parameter :

  • Pengidentifikasi ukuran gambar (nama) – medium, custom dll, secara default thumbnail,
  • Ukuran kustom array( width, height ). Jika Anda menggunakannya, ukuran gambar yang paling sesuai akan ditampilkan.
  • Anda dapat memberikan full nilai ke parameter ini dan gambar asli akan ditampilkan.

$attr
Anda dapat mengirimkan atribut HTML apa pun di sini sebagai larik, Anda bahkan dapat menulis ulang src atribut!

Link MangcodingB. get_the_post_thumbnail()

Fungsi ini sangat mirip dengan the_post_thumbnail() , perbedaannya adalah :

  • Yang pertama get_the_post_thumbnail() adalah ID pos, yang lainnya sama
  • Ini mengembalikan gambar, bukan mencetaknya

Contoh get_the_post_thumbnail()

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

 

Link MangcodingC. wp_get_attachment_image_src()

Fungsi ini memungkinkan untuk mendapatkan URL gambar.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

 

Harap diperhatikan, bahwa ID lampiran bukanlah ID kiriman. Tapi Anda bisa dengan mudah mendapatkannya, misalnya jika Anda membutuhkan ID gambar unggulan, Anda bisa menggunakan get_post_thumbnail_id() fungsi.

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $image_array[0];

 

Link MangcodingCara Menambahkan Ukuran Gambar Kustom

Proses ini sangat sederhana dan terdiri dari dua langkah. Langkah yang pertama adalah :

Link MangcodingA. add_image_size()

Untuk mendaftarkan ukuran gambar di WordPress Anda dapat menggunakan fungsi ini di tema Anda saat ini pada functions.php atau di tema (child) anak functions.php atau bahkan di plugin khusus.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

 

Penjelasan :
$size_name
Anda tidak dapat menggunakan Size Name gambar yang dicadangkan, seperti : thumb, thumbnail, post-thumbnail, medium, medium_large, large, full.
$widht
Lebar dalam piksel, atur 0 – lebar tidak terbatas.
$height
Tinggi dalam piksel, atur 0 – tinggi tidak terbatas.
$crop
Sebelumnya parameter ini hanya dapat menerima perintah false atau true, tetapi sekarang ada perubahan dan jauh lebih diperluas, jadi berikut adalah penjelasan nilai yang dapat digunakan :

Value Description
false (default) The image won’t be cropped, just resized for your custom dimension
true The image will be resized and cropped exactly by provided resolution, the central part of the image will be used.
position_X accepts:

  • Center
  • Left
  • Right
array( position_X, position_Y ) position_Y accepts:

  • Center
  • Top
  • Bottom

Ini adalah contohnya :

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

 

Untuk menjaga agar gambar terlihat bagus dan sederhana, kami sarankan untuk menggunakan ukuran persegi dalam contoh ini. Karna jika gambar Aslinya berupa gambar dengan ukuran horizontal, maka bagian kiri gambar akan tetap ada, tetapi untuk bagian kanan akan terpotong, sama halnya dengan ukuran gambar vertikal, bagian bawah gambar yang akan dipotong.

Atau Anda bisa melakukan pemotongan gambar secara manual menggunakan plugin ” Manual Image Crop”.

Tapi jangan membuat banyak ukuran gambar :

  • Semakin banyak ukuran gambar yang Anda buat, maka semakin banyak file yang ada di folder unggahan Anda.
  • Semakin banyak waktu yang dibutuhkan untuk mengunggah gambar ke situs Anda.
Link MangcodingB. Cara Menambahkan Ukuran Gambar Kustom Anda ke Pengunggah Media dan Gutenberg

Saat Anda memasukkan gambar ke widget dan postingan, WordPress (3.5+) memungkinkan Anda memilih ukuran gambar yang akan digunakan :

Custom Images Mangcoding

Seperti yang Anda lihat, Anda dapat menambahkan ukuran khusus di sana :

add_filter('image_size_names_choose', 'misha_new_image_sizes');
 
function misha_new_image_sizes($sizes) {
    $addsizes = array(
        "my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)"
    );
    $newsizes = array_merge( $sizes, $addsizes );
    return $newsizes;
}

 

Kerennya, kode diatas juga berfungsi untuk blok gambar Gutenberg.

Link MangcodingCara Membuat Ulang Gambar setelah Mengubah Ukurannya atau Mengubah Tema

Mungkin Anda mengetahui situasi ketika setelah mengubah add_image_size() parameter atau setelah mengubah tema situs web Anda, WordPress tidak secara otomatis menghasilkan ukuran gambar dengan resolusi lama yang masih ditampilkan di situs.

Apa yang harus Anda lakukan dalam situasi seperti ini? Jika hanya ada 2-3 gambar di folder unggahan Anda, Anda cukup mengunggahnya kembali. Tapi apa yang harus dilakukan jika ada Ribuan gambar?

Ada dua cara untuk mengatasi situasi ini, yaitu dengan bantuan plugin dan dengan kode :

Link MangcodingA. Regenerasi Thumbnail dengan Plugin

Ok, kami dapat merekomendasikan Anda dua plugin sederhana yaitu :

  • Ajax Thumbnail Rebuild
  • Force Regenerate Thumbnail

Dari kedua plugin diatas masing-masing memiliki kelebihan dan kekurangannya sendiri, jadi mungkin untuk situasi yang berbeda Anda dapat memilih plugin mana yang lebih cocok untuk Anda.

Link MangcodingB. Regenerasi Thumbnail Secara Terprogram

Di sini kami hanya ingin menunjukkan kepada Anda kode yang memungkinkan untuk membuat ulang gambar, bagaimana Anda akan menggunakannya, silahkan perhatikan kode dibawah :

$attachment_id = 5; // pass your attachment ID here
 
$path = get_attached_file( $attachment_id );
$meta = wp_generate_attachment_metadata( $attachment_id, $path );
wp_update_attachment_metadata( $attachment_id, $meta );

 

Link MangcodingCara Membuat Thumbnail Ukuran Gambar Tertentu Hanya untuk Jenis Posting Kustom

Bayangkan situs web Anda memiliki 10 jenis posting kustom terdaftar, dan masing-masing menggunakan 2-3 ukuran gambar pada halaman situs web. Sangat mudah untuk memahami bahwa ketika kami mengunggah gambar apa pun di situs web, WordPress membuat 20-30 salinannya!

Tidak ada cara untuk menggunakan add_image_size() untuk jenis kiriman khusus, tetapi di sini ada cara sederhana untuk menyisipkan kode yang memecahkan masalah ini. Kode ini memberi tahu WordPress kapan harus membuat salinan resolusi gambar tertentu dan kapan tidak.

Keduanya bisa menggunakan intermediate_image_sizes dan intermediate_image_sizes_advanced hook untuk masalah ini. Contoh super sederhana di bawah ini, setelah Anda memasukkan kode ke functions.php file thumbnail Anda my-image-size-name tidak akan dibuat untuk gambar, tetapi diunggah dari custom post type page.

add_filter( 'intermediate_image_sizes_advanced', function( $sizes ){
 
    if( isset( $_REQUEST['post_id'] ) && 'page' == get_post_type($_REQUEST['post_id'] ) ) {
        unset( $sizes['my-image-size-name'] );
    }
 
    return $sizes;
 
} );

 

Contoh yang sedikit rumit, tetapi fungsinya masih sama :

/*
 * this hook will be fired while you uploading a picture
 */
add_filter( 'intermediate_image_sizes', 'misha_reduce_image_sizes' );
 
function misha_reduce_image_sizes( $sizes ){
    /*
     * $sizes - all image sizes array Array ( [0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail )
     * get_post_type() to get post type
     */
    $type = get_post_type($_REQUEST['post_id']); // $_REQUEST['post_id'] post id the image uploads to
 
    foreach( $sizes as $key => $value ){
 
        /*
         * use switch if there are a lot of post types
         */
        if( $type == 'page' ) {
            if( $value == 'regionfeatured' ){ // turn off 'regionfeatured' for pages
    				unset( $sizes[$key] );
    			}
        } else if ( $type == 'region' ) {
            if( !in_array( $value, array('regionfeatured','misha335') ) ){ // for regions turn off everyting except 'regionfeatured' and 'misha335'
    				unset( $sizes[$key] );
    			}
        } else {
            if( $value != 'thumbnail' ){ // turn off everything except thumbnail
    				unset( $sizes[$key] );
    			}
        }
    }
    return $sizes;
}

 

Referensi : Rudrastyh