Articles

website murah

Menyisipkan gambar lewat TDOMF plugins

By brokencode ⋅ October 12, 2008 ⋅ Email This Post Email This Post ⋅ Print This Post Print This Post ⋅ Post a comment

Karena ada pertanyaan dari seorang rekan mengenai cara menyisipkan gambar kepostingan dan link ke single page postingan tersebut oleh unregistered user lewat TDO mini form khususnya blog yang menawarkan iklan baris gratis. Dijelasi via YM bakal alot dan panjang, jadi lebih baik ditulis, sapa tau ada rekan-rekan lainnya juga yang mencari tau. Sorry kalo tulisan sedikit ngacoh, maklum, SMS …. :D

Masuk ke menu TDO Mini Forms > Form Widgets, lalu tambahkan widget untuk fungsi upload pada form yang akan digunakan user. Lakukan setting seperlunya seperti ukuran dan jenis file yang akan diijinkan untuk dapat diupload oleh user dengan mengklik button configure pada widget tersebut, dan pada field Name of Custom Key: berikan key yang akan digunakan untuk menampilkan sebuah custom field. Contoh; image. Custom field itu apa? Udah ikutin aja. Jelasin custom field nya entar aja ya.

Lalu masuk ke theme editor untuk memasukan perintah agar menampilkan image yang diupload user dengan sebuah penanda key custom field tadi. Sisipkan sebelum baris perintah untuk menampilkan content.

<?php if ( get_post_meta($post->ID,’image’, true) ) { ?>
<a title=”Permanent Link to <?php the_title(); ?>” href=”<?php the_permalink() ?>”><img src=”<?php echo get_post_meta($post->ID, “image”, $single = true); ?>” alt=”<?php the_title(); ?>” /></a>
<?php } ?>

Dengan perintah tersebut diatas, gambar yang diupload user akan ditampilkan dengan ukuran asli yang akan merusak layout. Anda bisa mengatur ukuran agar layout terlihat lebih rapih dengan mengaturnya ukuran lewat css secara fix baik lebar maupun tingginya. Gambar akan diresize sesuai ukuran yang dideklarasikan di css secara tidak proposional. Gambar tersebut akan terlihat lucu.

Untuk mengantisipasi hal tersebut, Anda dapat menggunakan file timthumb, yaitu sebuah file PHP yang berfungsi melakukan resize atau cropping ukuran namun tetap mempertahankan proposional gambar.

  • Download file timthumb disini.
  • Upload file timthumb.php kedalam folder theme yang sedang digunakan.
  • Masih pada folder theme tersebut, buat sebuah folder bernama ‘cache’ dan berikan permission writeable (666 atau 777 biar pasti).
  • Baris perintah yang digunakan untuk menampilkan image adalah :

<?php if ( get_post_meta($post->ID,’image’, true) ) { ?>
<div class=”thumb”><a title=”Permanent Link to <?php the_title(); ?>” href=”<?php the_permalink() ?>”><img src=”<?php echo bloginfo(’template_url’); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, “image”, $single = true); ?>&amp;h=50&amp;w=50&amp;zc=1&amp;q=80″ alt=”<?php the_title(); ?>” /></a></div>
<?php } ?>

div class=”thumb” adalah fungsi cssnya. Contoh saya ingin gambar ditampilkan dengan float kiri.

.thumb img { float: left; padding: 0; margin: 1em 0.5em 0.2em 0; border: 1px solid #999; }

h=50 adalah tinggi image yang dikehendaki, w=50 adalah lebar, dan q=80 adalah kualitas gambar. Sesuaikan dengan keinginan Anda.

Biar kompak, Anda dapat memberikan sebuah file gambar default yang berfungsi untuk mengganti gambar yang ditampilkan apabila user tidak mengupload gambar. Siapkan sebuah file default dan letakan pada folder theme yang sedang digunakan. Pada contoh perintah, gambar tersebut terdapat pada folder images dengan nama file thumbnail.jpg.

<?php if( get_post_meta($post->ID, “image”, true) ): ?>
<div class=”thumb”><a href=”<?php the_permalink() ?>” title=”Permanent Link to <?php the_title(); ?>”><img src=”<?php echo bloginfo(’template_url’); ?>/thumb.php?src=<?php echo get_post_meta($post->ID, “image”, $single = true); ?>&amp;h=70&amp;w=70&amp;zc=1&amp;q=80″ alt=”<?php the_title(); ?>” /></a></div>
<?php else: ?>
<div class=”thumb”><a href=”<?php the_permalink() ?>” title=”Permanent Link to <?php the_title(); ?>”><img  src=”<?php bloginfo(’template_url’); ?>/images/thumbnail.jpg” alt=”Default thumbnail” /></a></div>
<?php endif; ?>

Posting lain yang kemungkinan berhubungan :
Print This PostTags: , , ,

Discussion

58 comments for “Menyisipkan gambar lewat TDOMF plugins”

  1. Tips berguna, baru mau nanya Mas sejak mudik kemarin :D

    Posted by rizhal | October 12, 2008, 4:02 am

  2. BBrp themes kyknya sdh ada fasilitas ini. TIps yg bagus nih buat theme yg blm support image key.

    Posted by MasterClickCom | Dollar Contest On | October 12, 2008, 4:20 am

  3. waks! infonya benar-benar hotz, abiz..thank master! :D

    Posted by JOBS PANAS | October 12, 2008, 5:56 am

  4. Wuiiihh, bookmark dulu nih. Lumayan kan kalo mau buat situs jual beli :D

    Posted by utchanovsky | October 12, 2008, 7:23 am

  5. seeeeep bozzzzz…thx

    Posted by ontria | October 12, 2008, 9:53 am

  6. Kantongin dulu… soale nunggu moment yang tepat tuk menerapkannya.

    Posted by tukang sapu radio | October 12, 2008, 12:03 pm

  7. Hoho,baru tau bs ky gt.biasanya saya ngubah ukuran gambarnya manual. Makasih mas brokencode.he2

    Posted by EEng | October 12, 2008, 1:03 pm

  8. info yang sangat berguna sekali..
    makasih om infonya..

    Posted by kidedfith | October 12, 2008, 2:05 pm

  9. bos, keknya code hack plugin nya salah.. warnanya merah tuh… ( just kidding bos ;) )

    btw gmn caranya posting code ky gini bos.. biar ga kebaca browser

    Posted by ode | October 12, 2008, 3:29 pm

  10. pussssingggg…..gak ngertiiii…

    Posted by infosingkat | October 12, 2008, 4:01 pm

  11. Terima kasih tipsnya. akan saya aplikasikan ;)

    Posted by Lucky | October 12, 2008, 11:39 pm

  12. Trim’s Tipsnya ya tipsnya bagus sekali.Salam kenal.

    Posted by budi | October 13, 2008, 1:30 am

  13. wah info keren nih

    Posted by dunia tkiI | October 13, 2008, 5:32 am

  14. wah keren tuuh tipsnya thank ya om

    Posted by badoer | October 13, 2008, 5:36 pm

  15. Wah baru tahu kalau TDOMF bisa di sisipin gambar. Tq bos tutor nya ;-)

    Posted by tanahsirah | October 14, 2008, 3:01 am

  16. hmmm…coba ah..
    Thx 4 the tips

    Posted by bakpia | October 14, 2008, 3:00 pm

  17. Ternyata yang selama ini kucari ada disini.
    Tengkyu boss :)

    Posted by Adellia | October 14, 2008, 5:11 pm

  18. thanks bos share nya :)

    Posted by bocah | October 14, 2008, 6:04 pm

  19. Wah, ini yang dicari-cari aku dan teman… ternyata ada di sini yach…

    Thx Bos…

    Posted by Gin Vegas | October 15, 2008, 3:44 am

  20. wah makasi sharingannya pak… maw coba coba dulu neh… sapa taw nanti bisa buat bikin situs iklan gratis.. heheheh..

    Posted by DigiArtBali | October 15, 2008, 5:37 am

  21. Btw tempat buat cari template situs iklan baris dimana ya ?

    Posted by Ardian | October 15, 2008, 1:30 pm

  22. Maaf mas itu selain untuk situs iklan baris, bisa di pake juga untuk situs dengan tema lain nya ? atas jawabannya saya mengucapkan makasih :)

    Posted by dedi | October 15, 2008, 5:17 pm

  23. apa bisa untuk wordpress?
    Maaf ni new bie

    Posted by upie | October 16, 2008, 12:51 am

  24. masa sih bisa? tapi kok ribet yah

    Posted by amrinz | October 16, 2008, 12:53 am

  25. wah.. masih beul ngeh nih soal ginian… bisanya masukin gambar di blogspot doang :)

    Posted by therunk | October 17, 2008, 5:56 am

  26. Tak simpan neeh halaman.. Sangat berguna.. Thankz Om broken

    Posted by Dhimas | October 18, 2008, 8:48 am

  27. Numpang bookmark dulu mas. Saya lg cari2 ilmu ttg ini, eh untung ketemu. thx bgt deh

    Posted by ponsel quran | October 20, 2008, 2:10 pm

  28. di cobaaaa……ternyata setelah melanglang buana, jawabannya ada disini :D

    Posted by baladika | October 21, 2008, 6:50 am

  29. Eh, thanx ya mas.
    Dapat ilmu baru nih.

    Posted by fans_theblues | October 21, 2008, 4:00 pm

  30. akhirnya ketemu juga ;)

    Posted by Lucky | October 21, 2008, 4:10 pm

  31. walahh… jadi mumet mas.. tapi lumayan tambah ilmu jg nihh

    Posted by herry | October 21, 2008, 10:03 pm

  32. soryy mas, comment lagi,
    download file timthumb nya di mana ya, kok tidak ada?

    Posted by herry | October 21, 2008, 10:12 pm

  33. melihatnya kayak ribet nih.. ntar aja deh dicoba.. thanks Mas yah..

    Posted by Kang Iwan | October 22, 2008, 5:02 am

  34. lom dOnK juga aku.. :))

    Posted by raiderhost | October 22, 2008, 1:20 pm

  35. waduh …
    jujur saya gak ngerti.
    TDOMF itu apa sih?
    Mohon petunjuk buat newbie…

    thanks…

    Posted by peluang bisnis online | October 22, 2008, 6:43 pm

  36. makasih pencerahannya meskipun belum ngerti WP :D

    Posted by dianna | October 22, 2008, 10:28 pm

  37. kaga ngerti nih.
    mohon pencerahan…

    Posted by fans_theblues | October 23, 2008, 3:54 am

  38. Terima kasih infonya bagus sekali

    Posted by furniture | October 24, 2008, 4:50 am

  39. wew ,… nyerah deh bang ga mudeng nih

    Posted by babbicool | October 24, 2008, 11:05 am

  40. sama bos download file timthumb nya dimana yah ?

    Posted by dedi | October 24, 2008, 1:25 pm

  41. wah ini yang saya cari-cari om
    makasih beud emg jago dah sih om ^^

    Posted by Supomo Gosady Faisal | October 25, 2008, 1:54 am

  42. ILMU BARU AMAL BARU, JANGAN BOSEN BOSEN BAGI ILMU:)

    Posted by gusbud | October 25, 2008, 5:30 am

  43. tambah info neh … lagi persiapan bikin wp neh :)
    thx

    Posted by Keris | October 25, 2008, 6:46 pm

  44. kbtulan baru bkin blog.. boleh dicoba neh

    Posted by galihrock | October 25, 2008, 7:56 pm

  45. promobebas.com udah dukung iklan bergambar berarti donk om?
    hehehe :D

    Posted by izandi | October 26, 2008, 4:12 pm

  46. sptnya codingnya agak miss ya ?

    coding mas brokencode
    —————
    ID, “image”, true) ): ?>
    <a href=”” title=”Permanent Link to ”><img src=”/thumb.php?src=ID, “image”, $single = true); bla…bla…bla….
    ————————-

    saya rubah dari thumb.php menjadi timthumb.php

    saat ini saya menggunakan wp 2.6.2 dan TDO 0.12.5 , saya telah mengikuti step by stepnya, gambar default muncul “(thumbnail.jpg) . tetapi apabila kita masukin gambar, gambar tsb tidak muncul dan yang muncul tetap thumbnail.jpg.

    Mohon pencerahannya mas brokencode

    Thanks

    Posted by zika | October 27, 2008, 10:53 pm

  47. nice tips….:)

    Posted by schatzi | October 28, 2008, 12:58 am

  48. Weks. Bahasa tingkat tinggi nieh…
    Kirain membahas apaan…
    Salam kenal bung!

    Posted by BuLe | October 29, 2008, 9:34 am

  49. wah trims bos tips nya
    masih gak mudeng soal TDOMF

    Posted by papa deddy | October 29, 2008, 4:19 pm

  50. Apakah plugins ini hanya buat situs iklan baris aja trus apa bedanya dengan pilihan thumbnail gambar yang muncul di wordpress waktu kita upload gambar,
    kalo ada yg paham jawab dong mumpung broken codenya lagi liburan.

    Posted by Entertainment art | October 30, 2008, 6:10 am

  51. mak nyusssss, sip bozzz

    Posted by Free Shipping | October 31, 2008, 9:23 am

  52. Haloooo mas brokencode ? aku tanya nih diatas, mohon di jawab dong, atau rekan rekan lain ada yang mengalami hal yang sama ?

    Brokencode wrote :

    Zika, saya sudah email jawabannya ;) Semoga membantu

    Posted by zika | October 31, 2008, 1:58 pm

  53. mantab mas postingannya sangat bermanfaat. tks ya mas sharingnya. semoga tambah sukses ya.

    Posted by muslim names | October 31, 2008, 5:03 pm

  54. wah sangat bermanfaat nih postingannya. makasih ya mas.

    Posted by grosir jilbab | October 31, 2008, 5:04 pm

  55. mas… gmn caranya beberapa kategori saja ingin yg kita tampilkan.. misal. saya ada 10 kategori, cukup 5 saja kategori yg saya tampilkan di combox nya … plis ya mas… gmn caranya

    Posted by Aeris | November 28, 2008, 9:57 am

  56. Aeris, masuk aja ke bagian HACK CODE nya. Terus cari baris untuk menampilkan dropdown kategori. Hapus saja kategori yang tidak ingin ditampilkan, dengan terlebih dahulu lihat ID kategori masing-masing, soalnya disana tidak ditampilkan Name kategorinya, melainkan hanya ID nya saja.

    Posted by brokencode | November 29, 2008, 3:11 am

  57. saya bingung dengan thimthumb ini. kalo saya pake the_excerpt(), thimthumbnya gak keluar gambarnya.

    gimana solusinya mas..

    Posted by chodirin | November 29, 2008, 3:26 am

  58. chodirin, kamu harus sisipkan code untuk panggil timthumbnya sebelum panggil excerpt diantara loop.

    Posted by brokencode | November 29, 2008, 5:10 am

Post a comment (Do-Follow, please be wise !)

Bloggers Unite
Livecommunity powered by six groups