Jika Anda adalah seorang developer yang sering berkecimpung dengan WordPress, maka Anda pasti sudah tidak asing lagi dengan wp.media js. wp.media js adalah library JavaScript yang digunakan oleh WordPress untuk mengelola media, seperti gambar, video, audio, dan dokumen. Library ini sangat berguna dan fleksibel, karena Anda bisa menggunakannya untuk berbagai keperluan, seperti:
- Membuat media modal yang bisa digunakan untuk memilih media dari library, mengupload media baru, mengedit media, dan lain-lain
- Membuat custom media frame yang bisa digunakan untuk menampilkan media sesuai dengan kebutuhan Anda, misalnya untuk membuat gallery, slider, atau carousel
- Membuat custom media controller yang bisa digunakan untuk mengatur perilaku media modal atau media frame, misalnya untuk menambahkan filter, sorting, atau pagination
- Membuat custom media view yang bisa digunakan untuk menampilkan media dengan tampilan yang Anda inginkan, misalnya untuk menambahkan atribut, meta data, atau action button
Dengan menggunakan wp.media js, Anda bisa membuat pengalaman pengguna yang lebih baik dan lebih kaya dalam mengelola media pada WordPress. Namun, tidak ada yang sempurna di dunia ini, termasuk wp.media js. Library ini juga memiliki beberapa bug yang bisa menyebabkan masalah.
Salah satu bug yang sering terjadi adalah ketika Anda mengupload gambar atau file baru menggunakan wp.media js, gambar atau file tersebut tidak tampil pada daftar gambar di media modal. Hal ini bisa sangat mengganggu, karena Anda tidak bisa melihat gambar atau file yang baru saja Anda upload, dan tidak bisa memilihnya untuk digunakan pada konten Anda.
Pada artikel ini, saya akan menjelaskan apa penyebab masalah ini dan bagaimana cara mengatasinya dari sisi seorang developer.
Apa Penyebab Masalah Ini?
Masalah ini disebabkan oleh salah satu fitur wp.media js yang bernama collection. Collection adalah kumpulan dari model media yang digunakan untuk menyimpan dan menampilkan data media pada daftar gambar di media modal. Collection memiliki beberapa properti yang bisa digunakan untuk mengatur data media, seperti:
- type: jenis dari collection, misalnya image, video, audio, atau document
- order: urutan dari collection, misalnya date, title, or random
- orderby: cara pengurutan dari collection, misalnya ASC (ascending) atau DESC (descending)
- search: kata kunci pencarian dari collection
- filter: filter dari collection, misalnya uploadedToPost (hanya menampilkan media yang diupload ke post tertentu) atau all (menampilkan semua media)
- ignore: nilai acak dari collection yang digunakan untuk merefresh daftar gambar di media modal
Properti ignore inilah yang menjadi penyebab masalah ini. Properti ignore ini berguna untuk merefresh daftar gambar di media modal setiap kali ada perubahan data media. Caranya adalah dengan mengubah nilai ignore menjadi nilai acak setiap kali ada perubahan data media. Dengan begitu, daftar gambar di media modal akan terupdate dan menampilkan data media terbaru.
Namun, ternyata properti ignore ini tidak berfungsi dengan baik ketika Anda mengupload gambar atau file baru menggunakan wp.media js. Properti ignore ini tidak berubah menjadi nilai acak ketika Anda mengupload gambar atau file baru. Akibatnya, daftar gambar di media modal tidak terupdate dan tidak menampilkan gambar atau file baru.
Bagaimana Cara Mengatasinya?
Untuk mengatasi masalah ini, Anda perlu menambahkan fungsi success pada wp.Uploader.prototype. Fungsi success ini berguna untuk merefresh daftar gambar di media modal setelah upload selesai. Caranya adalah dengan mengubah properti ignore dari collection menjadi timestamp saat ini. Dengan cara ini, daftar gambar akan terupdate dan gambar atau file baru akan tampil.
Untuk menambahkan fungsi success pada wp.Uploader.prototype, Anda bisa menggunakan kode berikut:
// bugfixing if when use wp.media not working properly
$.extend( wp.Uploader.prototype, {
success : function(e, b){
// Refresh the media library
wp.media.frame.content.get().collection.props.set({ignore: (+ new Date())});
}
});
Kode ini akan menambahkan fungsi success yang akan merefresh daftar gambar di media modal dengan mengubah properti ignore dari collection menjadi timestamp saat ini. Anda bisa menempatkan kode ini pada file JavaScript custom yang Anda buat untuk memanggil wp.media js.
Kesimpulan
wp.media js adalah library JavaScript yang sangat berguna dan fleksibel untuk mengelola media pada WordPress. Namun, library ini juga memiliki beberapa bug yang bisa menyebabkan masalah, salah satunya adalah ketika upload gambar atau file baru menggunakan wp.media js, gambar atau file tersebut tidak tampil pada daftar gambar di media modal.
Masalah ini disebabkan oleh properti ignore dari collection yang tidak berubah menjadi nilai acak ketika upload gambar atau file baru. Untuk mengatasi masalah ini, Anda perlu menambahkan fungsi success pada wp.Uploader.prototype yang akan merefresh daftar gambar di media modal dengan mengubah properti ignore dari collection menjadi timestamp saat ini.
