[TUTORIAL] Cara Layout Image (Insert-Resize-Link)

Beberapa waktu lalu saat mereview di thread bantuan, beberapa kali saya mendapati pada thread atau post sebagian member yang notabene levelnya diatas Jr. Member, gambar yang dicantumkan tidak terlihat dan bahkan ada yang ekstension filenya tidak ada.
Seharusnya setelah posting tentu akan terlihat ada kejanggalan dalam thread/Reply nya.
Jelas informasi yang dicantumkan pun tentu tidak sampai ke pembacanya.
Dan beberapa kali itu juga saya coba mengarahkan untuk diperbaiki.

Contoh diantaranya:

Mudah-mudahan tutorial ini bisa sedikit banyak memberikan gambaran bagi yang belum mengetahui bagaimana cara menampilkan gambar pada thread/post di forum ini (dan juga cara memodifikasi settingan lainnya).

NOTE:

Berlaku untuk Jr. Member keatas
Untuk Level Newbie (normal) belum bisa menggunakan fitur ini.
Kecuali jika mendaftar menjadi Copper Member untuk menghilangkan batasan tersebut.
https://bitcointalk.org/index.php?topic=2385104.msg24371150#msg24371150
Pastikan untuk menyertakan sumber gambar, jika anda hendak menggunakan gambar milik orang lain/dari website lain.

Upload Gambar

Lewati langkah ini (upload), jika anda mencantumkan gambar menggunakan link dari website lain.

Sebelum upload gambar, perhatikan poin-poin berikut:

Gunakan format gambar ber-extension *.png atau *.jpg/jpeg (Color mode: RGB).
Saya lebih menyarankan format *.png, karena berdasarkan percobaan saya sebelumnya,
untuk format *.jpg/jpeg gambar yang dihasilkan sedikit blur meskipun file size tidak terpaut jauh dengan gambar yang sama namun menggunakan format *.png
Jangan mengupload gambar dengan file size yang terlalu besar. (Usahakan masih dibawah 1 mb.)
Karena jika file size terlalu besar, tentu akan membuat loading/download gambar tersebut menjadi lebih lama.
Gunakan aplikasi pengolah gambar untuk me-resize file nya (Photoshop, GIMP, dan sejenisnya).

Ada banyak website yang menyediakan layanan untuk upload gambar secara gratis,
beberapa diantaranya anda bisa temukan disini : http://bfy.tw/HlGX
Yang biasa saya gunakan adalah https://imgur.com/

Mari kita mulai.

- Siapkan gambar yang akan di-upload

Saya mencontohkan dengan gambar berikut :

Sumber : https://en.bitcoinwiki.org/wiki/BitcoinTalk

Format asli ber-extension jpg,
namun dalam contoh kali ini saya rubah menjadi png.
File size (png): 97 kb
Image size (original): 617 pixels x 289 pixels

- Buka Website https://imgur.com

Klik tombol New post (Anda masih bisa post tanpa sign in ke websitenya).
Klik Browse atau drag file gambar yang akan di upload
Tunggu upload selesai 100%, (anda bisa menambahkan file yang lainnya dengan klik + Add another image)

Cara Mendapatkan BBCode Link Gambar

a. Cara singkat:

Klik kanan pada gambar yang sudah diupload tadi kemudian Copy Image Adress
Pada contoh gambar diatas hasil link nya (bila di paste) seperti ini : https://i.imgur.com/6NqgTHr.png

Link tersebut lah yang nantinya kita paste diantara Tags Image

Code:

[img]https://i.imgur.com/6NqgTHr.png[/img]

Hasilnya seperti ini:

b. Cara lebih detail:

Arahkan kursor pada gambar, di sudut kanan atas akan muncul tombol dropdown, pilih Get share links

Akan muncul windows Share Option, pilih Copy pada BBCode (Forums)

Note:
Untuk gambar yang kita dapat dari link website lain, caranya lebih mudah (jadi kita tidak perlu upload lagi).
Tinggal di Copy saja link website nya pada Tags Image.

Contoh link dari website lain: https://en.bitcoinwiki.org/upload/en/images/f/fc/Bicointalk-log.jpg
Maka penempatan kode nya seperti berikut:

Code:

[img]https://en.bitcoinwiki.org/upload/en/images/f/fc/Bicointalk-log.jpg[/img]

Merubah ukuran (resize) Gambar

a. Cara pertama (sedikit ribet, saya sarankan cara kedua)

Edit gambar menggunakan aplikasi pengolah gambar (Photoshop, GIMP, atau yang semisalnya).
Ubah ukuran gambar (diperbesar / diperkecil).
Setelah itu upload seperti cara yang telah saya sebutkan diatas.
Cara ini saya katakan sedikit ribet, karena jika sewaktu-waktu anda ingin merubah ukuran gambar, anda mesti upload kembali file hasil editnya.

b. Cara kedua (lebih simpel, karena hanya merubah di BBCode nya saja)

Tambahkan kode width= pada BBCode image (titik-titik diisi dengan ukuran dalam pixel yang kita inginkan).
Untuk height otomatis menyesuaikan secara proporsional.

Contoh:

Code:

[img width=200]https://i.imgur.com/6NqgTHr.png[/img]

Anda bisa bereksperimen dengan menambahkan height=... pada BBCode

Note :
Tidak dianjurkan menggunakan gambar yang tidak proporsional (antara width dan height) apalagi terkait dengan logo.
Berikut ini hanyalah sekedar contoh bagaimana cara mengubah ukuran melalui BBCode saja.

Contoh:

Code:

[img width=200 height=50]https://i.imgur.com/6NqgTHr.png[/img]

Code:

[img width=200 height=105]https://i.imgur.com/6NqgTHr.png[/img]

Menyusun Beberapa Gambar dalam 1 Baris

Cara ke-1
Menempatkan langsung beberapa BBCode image dalam satu baris code (saya hanya menambahkan spasi pada setiap Tag image agar ada jarak diantara gambar).
Perhatikan pada code, saya hanya menggunakan width saja untuk mengubah ukuran gambar.

Code:

[img width=200]https://i.imgur.com/6NqgTHr.png[/img] [img width=200]https://i.imgur.com/sQiU9NV.jpg[/img] [img width=200]https://i.imgur.com/Lk0Okla.jpg[/img]

Cara ke-2
Menggunakan BBCode Tabel.
Perhatikan pada code, saya hanya menggunakan height saja untuk mengubah ukuran gambar.

Code:

[table]
[tr]
[td][/td][td][/td][td][img height=150]https://i.imgur.com/6NqgTHr.png[/img][/td]
[td][/td][td][/td][td][img height=150]https://i.imgur.com/sQiU9NV.jpg[/img][/td]
[td][/td][td][/td][td][img height=150]https://i.imgur.com/Lk0Okla.jpg[/img][/td]
[/tr]
[tr]
[td][/td][td][/td][td][center]Gambar 1[/center][/td]
[td][/td][td][/td][td][center]Gambar 2[/center][/td]
[td][/td][td][/td][td][center]Gambar 3[/center][/td]
[/tr]
[/table]


		Gambar 1			Gambar 2			Gambar 3

Menambahkan Link Pada Gambar

Pada tutorial saya sebelumnya:
Video Tutorial PGP/GPG
Disana saya mencantumkan gambar dengan menambahkan link ke Video Tutorial di Channel Youtube saya.
(Karena Forum Bitcointalk.org masih menggunakan SMF 1.1.19 dan belum bisa menampilkan video youtube secara langsung,
maka saya me-redirect gambar tersebut ke link youtube).

Caranya:

Siapkan link website yang akan kita direct.
Contoh kali ini saya menggunakan link video di Youtube:
https://www.youtube.com/watch?v=ZhsYoR5Tkgc&t
Siapkan link gambar yang sudah diupload untuk dijadikan shortcut ke link website/video tersebut:
https://i.imgur.com/ZiXVHKL.png

Berikut ini contohnya BBCode nya:

Code:

[url=https://www.youtube.com/watch?v=ZhsYoR5Tkgc&t][img width=400]https://i.imgur.com/ZiXVHKL.png[/img][/url]

Seperti ini hasilnya (Silahkan di klik pada gambar untuk melihat direct link nya):

Contoh lain, link gambar saya ambil langsung dari website resminya/Link Original.
(Jadi saya tidak melakukan proses upload gambar) :

Code:

[url=https://image.shutterstock.com/image-vector/conceptual-vector-illustration-global-problems-600w-442116157.jpg][img height=200]https://thumb7.shutterstock.com/display_pic_with_logo/2706775/442116157/stock-vector-conceptual-vector-illustration-global-problems-of-humanity-stop-plagiarism-442116157.jpg[/img][/url] [url=https://www.freepik.com/premium-photo/block-spam-text-on-keyboard-button_1337039.htm#term=spam&page=1&position=9][img height=200]https://image.freepik.com/free-photo/block-spam-text-on-keyboard-button_2227-380.jpg[/img][/url] [url=https://imgur.com/gallery/tBr0G84][img height=200]https://i.imgur.com/tBr0G84.gif[/img]

Referensi bermanfaat :
[LEARN] BBCode Lessons & Tutorials [+tutorial videos!] Thread Started by roslinpl
TUTORIAL Sederhana BBCode Thread Started by manji
Cara edit gambar GIF dengan Photoshop [Gambar bergerak] by ilham nurkarim

Referensi Gambar :
https://www.freepik.com/free-photo/abstract-app-social-web-service-object_1238820.htm
https://en.bitcoinwiki.org/wiki/BitcoinTalk
https://www.cryptocynews.com/blockchain-network-security-korea-telecom/
https://news.bitcoin.com/blockchain-info-to-support-bitcoin-cash/
https://www.shutterstock.com/image-vector/conceptual-vector-illustration-global-problems-humanity-442116157
https://www.freepik.com/premium-photo/block-spam-text-on-keyboard-button_1337039.htm#term=spam&page=1&position=9
https://imgur.com/gallery/tBr0G84

Silahkan jika ada yang ingin menambahkan, meralat atau ada yang ingin ditanyakan.
Mohon untuk tidak Reply Posting yang mengarah ke SPAM.
Mohon untuk tidak mengulang post serupa dengan post member sebelumnya.
Jadi silahkan dilihat-lihat dulu post sebelumnya ya...
Silahkan bagi yang hendak mem-bookmark/save di pc masing-masing,
yang tidak diperkenankan adalah mempublish ulang artikel ini dengan (Plagiarisme/Article Spinner) tanpa seizin Husna QA
atau tanpa mencantumkan sumber ke link artikel ini.
This is a self-moderated topic. If you do not want to be moderated by the person who started this topic, create a new topic.

Terima kasih. Semoga bermanfaat.