Salah satu keunggulan Drupal 8 ialah ketersedian file browser saat kita menggunakan fasilitas wysiwyg (what you see is what you get) editor saat sedang menulis artikel. Dengan demikian jika Anda ingin menambahkan gambar tidak perlu upload lalu menambahkan alamatnya melainkan bisa langsung upload dari text editor tersebut.
Praktis, tapi sayangnya hal seperti ini tidak ada dalam core module Drupal 7. Dengan kata lain di Drupal 7, Anda harus menambahkan sendiri fasilitas wysiwyg dan juga file browser (file manager) untuk upload gambar dari wysiwyg editor tersebut. Salah satunya dengan menggunakan modul TinyBrowser yang dapat Anda tambahkan pada modul wysisyg yang Anda gunakan.
Modul TinyBrowser memungkinkan Anda untuk membuka file manager ketika Anda klik menu image pada wysiwyg. Di file manager itu Anda dapat memilih atau mengunggah gambar atau file yang ingin Anda tambahkan.
TinyBrowser
Sebelum menggunakan modul ini maka ada beberapa hal yang harus Anda perhatikan yaitu:
-
Pastikan Clean URL diaktifkan (Enable clean URLs) melalui Administration » Configuration » Search and metadata » Clean URL
- Aktifkan variabel $cookie_domain di settings.php (biasanya di sites/defautl/settings.php). Buka setting.php lalu cari $cookie_domain, hapus tanpa # dan ganti .example.com menjadi nama domain anda. Setelah itu save atau upload kembali setting.php. Jika Anda tidak melakukan hal ini maka jendela TinyBrowser tidak akan terbuka.
- Set PHP safe_mode OFF. Jika di hosting Anda PHP safe_mode ON maka Anda dapat menghubungi penyedia hosting untuk mengubah supaya menjadi OFF.
- Ada baiknya Anda menonaktifkan Aggregate JavaScript files. di menu Administration » Configuration » Development » Performance. Walaupun sebenarnya TinyBrowser tetap akan bekerja dengan baik ketika Aggregate JavaScript files di aktifkan
Setelah semua siap maka langkah selanjutnya ialah instal dan aktifkan modul TinyBrowser TinyBrowser bisa digunakan untuk TinyMCE, FCKeditor dan CKEditor namun dalam tulisan ini akan difokuskan untuk TinyMCE yang digunakan dengan modul WYSIWYG
Konfigurasi TinyBrowser
Konfigurasi TinyBrowser dapat dilakukan melalui Administration » Configuration » Media » TinyBrowser. Di halaman ini sudah disediakan 2 profil yaitu Admin dan Sample. Anda bisa mengijinkan sebuah role untuk sebuah profil. Pada dasarnya profil ini berisi pengaturan berapa ukuran file yang boleh diunggah, file apa saja yang boleh diunggah, dan berbagai pengaturan lainnya. Untuk menambahkan profil baru silakan klik Add New Profile. Berikut penjelasan ringkas setiap kolom
TinyBrowser: Add New Profile
- Profile name: nama profil yang baru dibuat
- Maximum size of the file your can upload: Ukuran maksimal file / gambar yang bisa diunggah dalam ukuran byte. Ukuran maksimal juga bergantung dari ukuran maksimal yang diizinkan di konfigurasi PHP. Biarkan bagian ini juga Anda kesulitan menen
- Maximum image resolution : Ukuran besaran gambar yang diizinkan, apabila gambar lebih besar maka ukuran akan disesuaikan dengan ukuran yang sudah ditentukan.
- Directory options: Lokasi penyimpanan file yang diunggah yang berupa file pada umumnya (File directory), gambar (Image directory) dan media seperti lagu dan video (Media directory). Terdapat juga pengaturan alokasi kuota yang diperbolehkan di direktori tersebut (Directory quota)
-
Permitted operations : Hak akses yang nanti akan diberikan kepada pengguna TinyBrowser yang meliputi (centang untuk mengizinkan pengguna menggunakan hak akses tersebut)
- Upload files: Izinkan pengguna untuk mengunggah file.
- Edit files (rename, resize, rotate): Izinkan pengguna untuk mengedit file (terutama gambar) yang ada.
- Use subfolders (create, rename, move): Izinkan pengguna untuk membuat folder, mengganti atau memindahkan ke folder lainnya.
- Delete files and folders: Izinkan pengguna untuk menghapus file dan folder.
- Use TinyBrowser at user account page: Izinkan pengguna menggunakan TinyBrowser di halaman user. Sebuah tab TinyBrowser akan muncul di halaman user bila hal ini diizinkan.
- Image style support: Izinkan pengguna mengunggah gambar dengan style bukan gambar original.
Kemudian klik tombol Save Configuration untuk menyimpan profil baru. Proses edit profil pada dasarnya juga sama dengan proses menambahkan profil baru.
TinyBrowser: Role-profile assignments
Selanjutnya Anda menuju bagian Role-profile assignments untuk menentukan role apa mendapatkan profile apa. Di sini Anda bisa saja membuat profil yang hanya mengijinkan pengguna untuk upload dan menentukan folder upload lalu profil ini diperuntukkan bagi authenticated user atau user yang lain.
TinyBrowser: WYSIWYG editor
Setelah itu Anda menentukan TinyBrowser akan digunakan di script wysiwyg apa pada modul wysiwyg. Hal ini dapat dilakukan di bagian WYSIWYG editor
TinyBrowser: Extensions
Bagian berikutnya ialah Extensions untuk menentukan tipe file apa yang boleh dan tidak boleh diunggah. Tipe file ini dikategorikan menjadi
- Permitted image file extensions: Menentukan tipe file gambar apa yang boleh diunggah.
- Permitted media file extensions: Menentukan tipe file media (video, lagu) apa yang boleh diunggah.
- Prohibited extensions: Menentukan tipe file apa yang tidak boleh diunggah, diedit, atau dilihat jika tipe file yang dimaksud ada di dalam folder yang dimaksud.
TinyBrowser: General settings
Berikutnya adalah pengaturan secara umum atau General settings yang meliputi:
- Enable inline image/file insertion into plain textareas Anda masih dapat menggunakan TinyBrowser sekalipun Anda tidak mengaktifkan modul WYSIWYG. Caranya tinggal memasukkan id textarea dimana Anda ingin mengaktifkan TinyBrowser
- Absolute URLs: Jika diaktifkan maka url penuh termasuk nama domain akan disertakan saat menampilkan gambar.
-
Default behavior for existing files during file uploads: Pilihan apabila nama file yang diunggah sudah ada di server. Apakah file akan
- Replace the existing file with the new one: File lama akan ditumpuki (diganti) dengan yang baru.
- Keep the existing file and rename the new one: Simpan file lama dan ganti nama file yang baru.
- Keep the existing file and reject the new one: Pertahankan file lama dan tolak file yang baru.
- Thumbnail size: Ukuran (tinggi, lebar) thumbnail, untuk tampilan di file manager TinyBrowser, jika Anda mengganti ukuran thumbnail maka Anda perlu mengubah ukuran semua thumbnail yang ada yaitu dengan klik tombol Flush all thumbnail
TinyBrowser: Advanced settings
Pengaturan yang terakhir adalah Advanced settings yang meliputi:
- Default view for the image browser: Model tampilan di file manager TinyBrowser apakah thumbnail atau detail dari file.
- Default sort mode: Daftar file akan disortir berdasarkan apa.
- Number of files per page: Jumlah file yang ditampilkan per halaman di file manager TinyBrowser. Ganti menjadi 0 jika Anda ingin menyatukan semua file ke dalam satu tampilan.
- TinyBrowser window size: Pengaturan besarnya ukuran jendela file manager TinyBrowser yang akan dibuka nanti.
- Maximum size of the image cropping window: Ukuran maksimal gambar saat di-crop-ing.
Setelah selesai dengan semua pengaturan selanjutnya klik tombol Save configuration untuk menyimpan pengaturan. Sebagai catatan, apabila Anda mengalami kebingungan dalam memahami berbagai pengaturan tersebut sebaiknya Anda biarkan saja sesuai konfigurasi bawaan dari modul TinyBrowser.
Mengaktifkan Tombol TinyBrowser di WYSIWYG
Setelah selesai melakukan konfigurasi maka langkah selanjutnya ialah mengaktifkan tombol TinyBrowser di wysiwyg. Caranya masuk ke halaman pengaturan profil wysiwyg di Administration » Configuration » Content authoring » WYSIWYG Profile lalu klik edit pada bagian text format yang Anda pasangi script wysiwyg.
TinyBrowser: Mengaktifkan Tombol TinyBrowser di WYSIWYG
Buka bagian Buttons and plugins, cari pilihan TinyBrowser (biasanya pada bagian paling bawah) lalu aktifkan atau centang pilihan tersebut. Pastikan juga Anda telah mengaktifkan tombol Image and plugin Advanced Image di bagian ini. Setelah selesai klik tombol Save
Mencoba TinyBrowser di WYSIWYG
Selanjutnya Anda harus mencoba apakah file manager ini berjalan atau tidak. Caranya ialah dengan mencoba membuat konten baru atau mengedit artikel yang sudah ada.
- Pada bagian textarea (body) pilih text format yang telah Anda pilih untuk dipasangi script wysiwyg.
-
Klik pada tombol Insert/edit Image.
TinyBrowser: Insert/edit Image -
Pada jendela baru klik gambar di dekat kolom Image url.
TinyBrowser: Image Url - Jendela file manager TinyBrowser akan terbuka. Di jendela tersebut Anda bisa mengunggah file / gambar, membuat folder, dll sesuai dengan izin di konfigurasi profil.
-
Untuk memilih gambar klik 2x pada gambar; jendela file manager otomatis akan tertutup dan Anda akan dibawa ke jendela sebelumnya.
TinyBrowser: Insert Image/File -
Klik tombol Insert dan Anda akan dibawa ke halaman create / edit artikel dengan gambar yang sudah terpasang.
TinyBrowser: Hasilnya - Lalukan proses create / edit artikel seperti biasanya.
Selamat Mencoba!
