Bagaimana cara membuat tampilan gambar menjadi responsif dengan menggunakan Bootstrap 3
Artikel ini saya tulis untuk para pengguna platform Bootstrap, khususnya Bootstrap versi 3.
Pada beberapa waktu yang lalu, saya mendapatkan pertanyaan dari pengguna ekstensi Opencart 3.0.2.0 Modification yang saya buat.
Artikel ini bisa membantu Anda yang baru menggunakan platform Bootstrap khususnya versi 3 untuk website Anda. Pada artikel ini saya akan memberikan sedikit pengetahuan bagaimana caranya membuat konten gambar menjadi lebih responsif.
Karena artikel ini tips mengenai Bootstrap, pastikan bahwa Anda sudah meletakan kode HTML dasar untuk penggunaan Bootstrap 3 (baca selengkapnya di: Getting Started Bootstrap 3). Dan artikel ini berhubungan dengan ekstensi saya di atas, maka Anda tidak perlu lagi menambahkan/meletakan kode HTML tersebut pada template saya.
Jika Anda telah menginstal ekstensi saya di atas, dan Anda mendapatkan bahwa gambar yang Anda masukan pada konten website Anda tidak tampil responsive, maka Anda hanya perlu menambahkan kode HTML class="img-responsive" pada kode HTML gambar Anda. Sebagai hasilnya maka akan seperti berikut;<img src="http://websiteanda.com/image/catalog/gambaranda.jpg" class="img-responsive" />.
Untuk lebih jelasnya dalam penggunaan ekstensi di atas adalah pada gambar di bawah ini;
Silahkan klik gambar untuk gambar yang lebih jelas.
Pada halaman Admin untuk membuat atau mengubah konten, silahkan klik tombol gambar seperti pada gambar di atas untuk mengambil atau memasukan gambar Anda pada konten halaman situs Anda.
Setelah Anda memasukan gambar tersebut, maka tampilannya akan seperti di atas.
Kemudian, klik tombol seperti gambar di atas untuk mengubah tampilan gambar menjadi responsif.
Pada halaman Admin untuk membuat atau mengubah konten, silahkan klik tombol gambar seperti pada gambar di atas.
Silahkan diubah pada kode HTML style="width: 800px;" menjadi class="img-responsive".
Jangan lupa untuk klik kembali tombol tampilan kode seperti gambar di atas sebelum Anda menyimpan konten ini. Setelah selsai, silahkan klik simpan dan lihat pada halaman situs Anda melalui tampilan mobile.
