Mangcoding

icon chat
Yayan Kurnia Akbar - Monday, 15 May 2023 - 1years ago

Membuat responsif gambar utama pada WordPress

single image
Photo by Tim Gouw On Pexels

Apakah Anda sudah menggunakan WordPress versi 4.4 atau bahkan versi yang terbaru? Semua gambar baru yang disisipkan dalam posting setelah pemutakhiran WP memiliki atribut scrset. Tunggu dulu, sebelum Mangcoding membahas lebih dalam tentang bagaimana cara Membuat responsif gambar utama pada WordPress, mari kita pelajari atribut scrset terlebih dahulu.

Link Mangcoding

Bagaimana scrset dan atribut ukuran bekerja?

srcset Atribut ands sizes berisi informasi untuk membantu browser menentukan ukuran/file gambar mana yang terbaik yang akan digunakan, silahkan perhatikan kode dibawah ini !

<img src="image.jpg" srcset="image-300x188.jpg 300w, image-700x600.jpg 700w, 
image-1024x640.jpg 1024w, image-1200x750.jpg 1200w" sizes="(max-width: 709px) 85vw, 
(max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">

Penjelasan :

  • scrset : Jika lebar gambar pada halaman adalah 300px atau kurang, maka browser akan memuat dan menampilkan image-300×188.jpg, jika lebih dari 300px dan kurang dari 700px maka browser akan memuat dan menampilkan 700×600.jpg dll.
  • ukuran : lebar gambar maks untuk kueri media yang diberikan, sebenarnya mirip dengan pernyataan if-else – jika lebar viewport adalah 709px atau kurang, lebar gambar maksimum adalah 85% dari viewport, jika tidak ada pernyataan yang benar, maka maks lebar gambar adalah 840px.
Link Mangcoding

Gambar responsif — fitur baru WordPress 4.4

WordPress menggunakan the_content untuk menambahkan atribut responsif ke gambar yang Anda unggah, penjelasannya sebagai berikut :

  • Jika gambar Anda memiliki kelas wp-image-{ATTACHMENT_ID}.
  • Jika gambar Anda belum memiliki scrset atribut.

Bagaimana cara meminta WordPress untuk tidak menambahkan atribut responsif ke semua gambar konten?

Salah satu caranya adalah Anda dapat menghapus kelas wp-image-{ATTACHMENT_ID} dari lampiran tertentu atau menonaktifkan gambar responsif secara global dengan menambahkan kode dibawah ini ke theme Anda pada file functions.php

remove_filter( 'the_content', 'wp_make_content_images_responsive' );

Bagaimana cara menambahkan atribut scrset dan ukuran ke lampiran WordPress dalam kode ? Silahkan perhatikan kode dibawah ini !

<img src="<?php echo wp_get_attachment_image_url( $attachment_id, 'medium' ) ?>" 
  srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ?>" 
  sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'medium' ) ?>" />

Mari kita lihat setiap fungsi secara terpisah.

  1. wp_get_attachment_image_url() mengembalikan URL gambar dengan ukuran gambar yang diberikan (dalam contoh — medium).
  2. wp_get_attachment_image_srcset() fungsi mengulang semua ukuran gambar dan menambahkan setiap ukuran di scrset dalam format berikut: image-{WIDTH}x{HEIGHT}.jpg {WIDTH}w. Harap dicatat, bahwa fungsinya mengabaikan:
    • jika rasio gambar yang diubah ukurannya berbeda dari aslinya lebih dari 0,002
    • jika ukuran gambar telah diedit
    • jika lebar gambar yang diubah ukurannya lebih dari lebar gambar scrset maksimum (secara default 1600 tetapi dapat dikaitkan)
  3. wp_get_attachment_image_sizes() jika tema atau plugin tidak mengaitkan fungsi ini, fungsi ini mengembalikan berikut (max-width: {WIDTH}px) 100vw, {WIDTH}px, di mana {WIDTH} adalah lebar faktual file.
Link Mangcoding

Cara menggunakan gambar dengan rasio berbeda untuk perangkat seluler

Lihatlah gambar di bawah ini. Gambar mana yang menurut Anda terlihat lebih baik di iPhone 5 ini?

Gambar responsif wordpress Mangcoding

Anda mungkin memperhatikan bahwa rasio gambar (lebar/tinggi) berbeda, jadi, WordPress tidak akan menambahkan ukuran gambar yang tepat ke scrset atribut. Cara yang bisa Anda lakukan adalah Menambahkan kode dibawah ini :

function misha_sources($sources, $size_array, $image_src, $image_meta, $attachment_id) {
    $image_size_name = 'square500'; // add_image_size('square500', 500, 500, true);
    $breakpoint = 500;
    $upload_dir = wp_upload_dir();
    $img_url = $upload_dir['baseurl'] . '/' . str_replace(basename($image_meta['file']), $image_meta['sizes'][$image_size_name]['file'], $image_meta['file']);


    $sources[$breakpoint] = array(
        'url' => $img_url,
        'descriptor' => 'w',
        'value' => $breakpoint,
    );


    return $sources;
}


add_filter('wp_calculate_image_srcset', 'misha_sources', 10, 5);

Untuk pengalaman pengguna yang lebih baik, Anda dapat menggunakan plugin Manual Image Crop untuk memotong gambar seperti yang Anda inginkan.

Tampilan Plugin Image Crop Mangcoding

Itulah artikel Membuat responsif gambar utama pada WordPress yang bisa Mangcoding sharing. Mudah-mudahan ini bisa bermanfaat dan dapat membantu Anda. Silahkan Anda coba praktekkan apa yang Mangcoding jelaskan pada Artikel diatas. Dan jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui email dan media sosial Mangcoding.

Terimakasih.

Referensi : Membuat responsif gambar utama pada WordPress

Link Copied to Clipboard