Cara Menambahkan dan Mengatur Posisi Gambar di WordPress Block Editor (Gutenberg)

Gambar membawa kehidupan ke postingan dan halaman WordPress Anda dengan membuatnya lebih menarik. Tapi banyak pemula kesulitan dalam mengatur posisi gambar sesuai keinginan.

WordPress block editor (Gutenberg) yang baru memecahkan masalah ini dengan membuat lebih mudah menambahkan dan mengatur posisi gambar di WordPress.

Kali ini, kita akan mencari tahu bagaimana cara mudah menambahkan dan mengatur posisi gambar di WordPress untuk menciptakan layout konten yang cantik.

Pengaturan gambar di WordPress editor

Sebelumnya WordPress menggunakan area teks dengan tombol editing sebagai default editor. Satu masalah di editor lama adalah pengaturan posisi gambar.

Meski ada pilihan untuk gambar bisa rata kiri, kanan, atau tengah, tampilannya tidak selalu bagus. Kadang gambar tidak sejajar, tidak di ukuran yang tepat, atau terlihat janggal.

WordPress 5.0 memperkenalkan WordPress post editor yang disebut Gutenberg block editor. Post editor ini memperbaiki beberapa masalah di editor lama, termasuk masalah pengaturan posisi gambar.

Kita lihat bagaimana mudahnya Anda bisa menambahkan dan mengatur posisi gambar di editor yang baru untuk menciptakan layout yang cantik untuk postingan dan halaman situs.

Menambahkan dan mengatur posisi gambar di WordPress

Editor yang baru punya blok berikut yang bisa Anda gunakan untuk menambahkan gambar ke postingan dan halaman WordPress:

• Gambar
• Inline image
• Galeri
• Media dan teks
• Cover

Kita mulai dengan blok gambar simpel lebih dulu.

Klik pada tombol “Add new block” atau ketik /image di post editor untuk memasukkan blok gambar.

Anda akan lihat tombol 3 titik di dalam blok gambar kosong.

Anda bisa upload gambar dari komputer, memilih gambar yang sudah di-upload dari media library, atau memasukkan gambar dengan menyediakan file URL gambar.

Selanjutnya, klik, tombol “Upload” dan lalu pilih gambar yang Anda ingin upload dari komputer.

Setelah Anda memilih gambar, WordPress akan meng-upload-nya ke media library dan memasukkannya ke image block.

Sekarang, Anda akan lihat toolbar pada bagian atas gambar dan beberapa pengaturan blok gambar di kolom kanan. Untuk mengatur posisi gambar, Anda bisa menggunakan toolbar yang muncul di atas gambar.

Blok gambar memberi Anda pilihan pengaturan berikut sebagai tombol di toolbar:

• Align left
• Align Center
• Align Right
• Wide Width
• Full Width

Bila gambar Anda lebih kecil ukurannya, maka sejajar kiri atau kanan akan membawa teks ke dekat gambar. Pilihan sejajar di tengah akan menunjukkan gambar di baris sendiri tanpa teks di sisi-sisinya.

Memilih pilihan wide width akan membuat gambar lebih luas dari area teks, dan pilihan full width akan mendorongnya ke pinggir kanan dan kiri layar browser.

Cara tepat mengatur posisi gambar di sebelah teks

Sering kali Anda perlu dengan tepat mengatur posisi gambar di sebelah teks. WordPress block editor membuat ini lebih mudah dengan menambahkan blok media dan teks.

Blok ini pada dasarnya menambahkan dua area kolom. Satu kolom untuk gambar dan kolom kedua untuk konten teks.

Cukup upload gambar dan lalu tambahkan teks yang Anda inginkan untuk ditampilkan di sebelahnya.

Setelah menambahkan gambar dan teks, Anda akan lihat beberapa pilihan untuk blok. Anda bisa buat seluruh blok lebih luas atau full width, Anda bisa juga ganti menjadi gambar-teks sejajar.

Pengaturan posisi gambar akan secara otomatis menyesuaikan dengan ketinggian teks di kolom selanjutnya.

Cara mengatur posisi gambar galeri di WordPress

WordPress post editor memiliki blok untuk menambahkan galeri gambar. Ini membantu Anda dengan mudah menampilkan gambar di baris dan kolom.

Blok galeri memiliki pilihan pengaturan serupa di toolbar.

Anda bisa buat seluruh blok galeri rata ke kiri, tengah, atau kanan. Anda bisa juga membuatnya lebar atau menggantinya menjadi full dalam baris.

Fitur default di galeri WordPress cukup bagus. Tapi bila Anda secara teratur menambahkan foto galeri ke postingan dan halaman WordPress, maka Anda bisa manfaatkan plugin photo gallery seperti Envira Gallery.

Plugin ini akan memberi Anda lebih banyak pilihan untuk mengatur posisi gambar di galeri foto serta menampilkannya dalam popup.

Cara menambahkan dua gambar sejajar di WordPress

Cara paling mudah menampilkan dua gambar sejajar di postingan WordPress adalah dengan menambahkan kedua gambar di blok Gallery.

Cukup pilih layout 2 kolom untuk blok gallery untuk menampilkan kedua gambar yang saling sejajar. Anda bisa centang pilihan “crop thumbnail” untuk memastikan kedua gambar di ukuran yang sama.

Beberapa cara lain untuk menambahkan dan mengatur posisi gambar di WordPress

Selain gambar, media dan teks, serta blok gallery, Anda bisa juga gunakan blok Cover untuk menambahkan cover image.

Di desain web moderen, cover image digunakan untuk menciptakan layout konten yang sangat menarik. Gambar-gambar ini digunakan sebagai highlight bagian-bagian halaman.

Blok untuk cover image punya pilihan pengaturan gambar yang sama seperti blok gambar. Anda bisa tambahkan teks pada gambar atau memilih warna dari pengaturan blok. Bagian yang menarik adalah Anda bisa centang pilihan “Fixed Background” yang akan menciptakan efek background yang paralaks.

Kita telah membahas tentang menambahkan gambar langsung ke postingan dan halaman. Bagaimana dengan gambar dari situs pihak ketiga?

Block editor membuat ini mudah juga. Block editor dilengkapi dengan blok embed untuk social sharing, termasuk situs Instagram, Flickr, Imgur, Photobucket, dan banyak lagi.

Bila Anda ingin menambahkan foto Instagram, maka cukup tambahkan blok Instagram ke post editor dan masukkan URL postingan yang Anda ingin bagikan.

WordPress secara otomatis akan mengambil postingan Ingtagram dan meng-embed-nya untuk Anda. Setelah itu, Anda bisa gunakan pilihan alignment pada toolbar.

Blok embed juga membantu Anda dengan mudah meng-embed video di WordPress. Setelah itu Anda bisa gunakan pilihan yang sama di toolbar untuk mengatur posisi video di WordPress.

Semoga artikel ini membantu Anda dengan mudah menambahkan dan mengatur posisi gambar di block editor WordPress.