Cara Mudah Mengelola File Gambar di Drupal
Oleh: wendy (Mon, 2006-09-25 07:41).
* All <http://www.drupal-id.com/tutorial/all>
* Editor <http://www.drupal-id.com/tutorial/editor>
tinymce with browserSaat membuat isi website terutama blog maka anda
pasti ingin memasukkan gambar ke dalam tulisan anda, sayangnya editor
popular seperti TinyMCE tidak menyediakan cara yang mudah untuk
memasukkan gambar, artinya, anda harus melakukan upload gambar dahulu
dan mengetik lokasi file gambar secara manual. Hal ini bukan saja
terjadi pada Drupal tetapi semua CMS yang memakai TinyMCE karena secara
default TinyMCE tidak menyediakan plugin image browser / manager secara
gratis. Anda dapat membelinya di sini:
http://tinymce.moxiecode.com/plugins.php dengan nama MCImageManager.
Tetapi ada banyak programmer yang menyediakan plugin atau module
tambahan gratis, yang terkenal di antaranya IMCE
<http://drupal.org/project/imce> , iBrowser
<http://net4visions.com/dev/ibrowser/ibrowser.php> dan sebuah proyek
yang bernama TinyMCPUK
<http://p4a.sourceforge.net/?DokuWiki=c21a0dd18bd9e1749cc45d7705ffb25f>
. Yang akan saya tunjukkan di sini adalah penggunaan IMCE, saya memilih
IMCE karena module ini memiliki kelebihan sebagai berikut:
1. Selain dapat menggunakan sebuah folder image secara bersama-sama
(shared folder), IMCE dapat membuat folder untuk masing-masing user.
2. Jumlah file gambar dan besarnya kuota dapat ditentukan. Juga
ukuran gambar dapat dibatasi sehingga gambar yang diupload tidak
merusak penampilan website. Untuk menentukan lebar gambar maksimum
anda sebaiknya menggunakan aturan ukuran gambar pada banner. Saya
biasanya memilih lebar 468 px karena aman untuk website yang
memiliki 3 kolom, di mana lebar website untuk kolom isi pada
tampilan layar 800 px membutuhkan lebar gambar yang aman, jika
tidak maka tampilan website akan rusak.
3. Terintegrasi dengan Image Manager milik TinyMCE. Yang dilakukan
oleh IMCE hanyalah mengaktifkan browser link pada Image Manager.
Sebuah icon kecil akan muncul di samping baris isian yang
membutuhkan browser.
iBrowser
iBrowser
Mengenai iBrowser, plugin ini meskipun membuat icon sendiri dan tidak
memiliki fasilitas user folder dan quota tetapi memiliki banyak fungsi
untuk mengolah gambar, seperti: membuat thumbnail otomatis, rotasi
gambar, dan resize. Fungsi resize pada iBrowser mampu mengubah ukuran
gambar secara permanen, jadi tidak hanya mengubah ukuran tampilannya saja.
Plugin iBrowser dapat diintegrasikan pada TinyMCE, SPAW, FCKeditor,
Xinha, and HTMLarea. Karena iBrowser mampu menampilkan thumbnail maka
untuk mengelola fle gambar yang sangat banyak dan besar, iBrowser sangat
cepat sekali untuk urusan yang satu ini.
Instalasi IMCE
Langkah-langkah instakasi ICME:
1. Download dahulu module IMCE di bagian: http://drupal.org/project/imce
2. Extract file imce-x.y.z.tar.gz sehingga menjadi folder imce/
beserta file-filenya.
3. Upload folder imce/ ke folder modules/ pada server Drupal anda.
Saat anda memasuki bagian *Administer-Modules* Drupal maka
otomatis module IMCE ini muncul.
*TIPS:* *Jika anda menggunakan CPanel maka anda dapat langsung melakukan
upload tanpa perlu meng-extract file karena CPanel punya fungsi untuk
melakukan extract file. Hal ini berguna untuk menghemat bandwidth anda
dan membuat proses upload lebih cepat.*
SETTING IMCE
Langkah-langkah untuk mengaktifkan IMCE pada TinyMCE:
1. Masuk ke Drupal: *Administer - Modules*, aktifkan ICME dan jangan
lupa klik *Save Configuration*.
2. Masuk ke bagian *Administer - Acces Control*. Di sini anda dapat
mengatur *Group* mana saja yang diberikan hak untuk /delete/,
/limitation/, /upload /dan /view /gambar. Lihat gambar berikut ini
untuk lebih jelasnya:
icme_access_control
3. Tahap terakhir adalah menentukan aturan pada IMCE. Masuk ke bagian
*Administer-Settings-IMCE*. Di sini anda dapat mengatur maksimum
ukuran gambar, ukuran file gambar (KB), total kuota per user (KB),
prefik/awalan personal folder, shared folder dan non-image file
support. Ukuran gambar sebaiknya dibatasi sampai 50 KB atau
sekecil mungkin agar website lebih efisien.
Prefik atau awalan jika tidak diisi maka yang dipakai adalah user id.
Jadi folder yang dibuat akan menjadi seperti: files/1/, files/2/, dan
seterusnya. Jika anda mengisi dengan awalan "anggota_" maka folder yang
dibuat adalah: files/angota_1/, files/angota_2/, dan seterusnya.
Cara Pakai IMCE
Klik pada icon *Insert / Edit Image* maka akan muncul Image Manager
TinyMCE, perhatikan bahwa di kiri baris isian *Image URL* muncul icon
Browser, klik icon ini sehingga muncul tampilan yang kira-kira seperti ini:
imce_browser Pada windows popup ini ditampilkan /filename/, /size/,
/dimensions/, /operations /dan juga /preview /dari gambar. Operations
*delete* akan muncul jika anda membukanya pada bagian Access Control di
*Administer - Acces Control - IMCE*.
Untuk melakukan Upload gambar maka klik pada bagian Browse kemudian
pilih gambar (atau file, karena kita juga dapat menentukan ektensi file
apa saja yang boleh diupload di bagian Administer - Settings - IMCE),
dan klik Upload File.
Di bagian bawah window tersebut juga tertera ukuran maksimim file yaitu
50 KB dengan dimensi 468 x 468 px dan quota yang terpakai adalah 71,02
KB dan total quotanya adalah 2.000 KB.
Khusus untuk Administrator akan muncul tulisan "*No limits for you!*",
artinya kuota tidak berlaku untuk Administrator.
Dan jangan lupa, karena default *Input Format* Drupal adalah *Filtered
HTML* maka jika anda tidak mengijinkan tag IMG maka anda harus memilih
Input Format = *Full HTML*.
ICME versi Drupal-ID.com
Pada versi aslinya jika ada user dengan nama "wendy" yang id nya "35"
maka folder yang terbentuk adalah files/35/. Karena cukup bingung
melihatnya maka IMCE ini saya modifikasi sehingga folder yang muncul
adalah files/wendy/, artinya langsung username yang dipakai sehingga
mudah untuk membaca folder tersebut milik siapa. Versi modifikasi dapat
anda download di bagian www.drupal-id.com/download/module
<http://www.drupal-id.com/download/module> . Selamat mencoba. (*wendy*).