Jika gambar lebih lebar dari kolom konten utama—seperti yang sering terjadi di layar yang lebih kecil—DevSite akan otomatis membatasinya ke lebar kolom. Namun, jika gambar memiliki atribut width dan height yang ditetapkan, hanya lebar yang diubah ukurannya, sehingga menyebabkan gambar terdistorsi. Oleh karena itu, jangan tetapkan height gambar. Artinya, halaman dapat digambar ulang jika gambar lambat dimuat (menyebabkan lompatan), tetapi hal ini lebih baik daripada gambar yang tidak sesuai dengan layar.
Anda dapat menerapkan class="screenshot" ke gambar untuk memberinya batas yang memisahkannya dari teks di dekatnya. Ini biasanya digunakan untuk screenshot yang memiliki latar belakang putih dan akan hilang di halaman. Jangan menggunakannya untuk gambar yang tidak memerlukannya.
Mengambang di samping teks
Gambar di sebelah kanan juga memiliki class="attempt-right", yang mengapung gambar di sebelah kanan pada layar yang lebih besar, tetapi memaksa gambar ke tata letak vertikal pada layar yang lebih kecil, tablet, dan yang lebih kecil, tempat mengambang ke kanan akan menyebabkan masalah. class="attempt-left" juga tersedia. Untuk menggunakan attempt-left dan attempt-right secara bersamaan, pastikan elemen attempt-left muncul terlebih dahulu.
Jika mengambang, gambar tidak boleh melebihi 50% lebar kolom. Jika demikian, ukurannya akan diubah.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Anda dapat menggunakan class yang sama untuk mengapung elemen lain, seperti <figure> yang berisi gambar dan teks:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Menghapus teks yang mengambang
Untuk mencegah teks dibungkus di sekitar elemen yang mengambang dan ditampilkan pada lebar aslinya, Anda dapat menambahkan class clear ke elemen yang terpengaruh yang mengikuti elemen yang mengambang.
<p class="clear">Hello world.</p>
Contoh dengan class clear
Dalam contoh ini, paragraf kedua menyertakan class clear.
Paragraf ini melingkupi gambar yang mengambang . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraf ini memiliki class yang jelas dan tidak menggabungkan gambar yang mengambang. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Contoh tanpa class clear
Dalam contoh ini, kedua paragraf melingkupi gambar yang mengambang.
Paragraf ini melingkupi gambar yang mengambang. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraf ini melingkupi gambar yang mengambang. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Gambar tema gelap
DevSite menyediakan sekumpulan kecil nama class yang dapat diterapkan ke gambar untuk mengubah tampilannya saat tema gelap diaktifkan.
Penggelapan gambar
Secara default, semua gambar kecuali file SVG sedikit digelapkan dalam tema gelap.
Untuk menghapus penggelapan default dari gambar saat tema gelap diaktifkan, tambahkan class tanpa filter ke gambar:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Menginversi gambar
Untuk gambar dengan palet warna monokrom hitam atau gelap, tambahkan class invert ke gambar agar menampilkan warna putih/terang dalam tema gelap:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Untuk halaman _index.yaml, tambahkan invert ke kolom classname untuk item baris:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Gambar varian tema gelap terpisah
Jika Anda ingin memberikan gambar terpisah yang hanya ditampilkan saat tema gelap diaktifkan, gabungkan elemen <img> yang ada dalam elemen <picture> dan tambahkan elemen <source> untuk varian tema gelap.
Pada contoh di bawah, ada dua file SVG untuk kata Google dalam elemen <picture>. Jika tema gelap dinonaktifkan, file gambar dalam elemen <img> akan ditampilkan, yang menampilkan kata dengan empat warna merek Google. Saat tema gelap diaktifkan, file gambar dalam elemen <source> akan ditampilkan, dengan kata merek berwarna putih sepenuhnya dan tidak memiliki warna merek.
Contoh
Kode
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Catatan
Karena tema gelap diaktifkan di balik tanda fitur, perhatikan hal berikut tentang atribut elemen <source>:
Elemen <source> harus menyertakan class devsite-dark-theme, yang menyediakan hook untuk frontend DevSite guna memperbarui atribut media dan nilainya bergantung pada opsi tema gelap yang dipilih pengguna: light, dark, atau device.
Atribut media harus menyertakan kueri media (prefers-color-scheme: dark) dalam nilainya.
Jika Anda sudah memiliki elemen <source> dengan kueri media di atribut media, tambahkan kueri media yang ada dengan dan (prefers-color-scheme: dark) atau tambahkan elemen <source> baru yang nilai atribut medianya adalah (prefers-color-scheme: dark). Kueri media dan nilainya akan dihapus atau diganti, bergantung pada opsi tema gelap yang dipilih pengguna.
Meskipun nama file gambar varian tema gelap dalam atribut srcset secara teknis dapat berupa apa saja, sebaiknya tambahkan -dark-theme ke nama file gambar yang ada.