Ilustrasi AI tentang komposisi foto potret pada kartu artikel; bukan tampilan produk atau hasil pengujian nyata.
Template Blogger yang cocok untuk foto potret perlu menjaga bagian penting foto tetap terbaca ketika masuk ke kartu artikel. Saat menelusuri pilihan tema di temablogger.com, perhatikan wajah, objek, dan konteks yang tersisa pada thumbnail, selain susunan berandanya. Foto yang terlihat lengkap di artikel bisa kehilangan bagian penting ketika ditempatkan dalam kotak mendatar.
Keputusan awalnya sederhana: apakah foto masih menjelaskan berita setelah dipotong? Panduan ini membantu menjawabnya sebelum memilih template. Penjelasan teknis merujuk dokumentasi CSS yang diperiksa pada 26 Oktober 2026. Contoh foto dan catatan keputusan di bawah bersifat rekaan untuk latihan, bukan laporan pengujian produk tertentu.
Tentukan bagian foto yang harus tetap terlihat
Bayangkan redaksi memiliki foto vertikal seorang perajin yang mengangkat hasil karyanya. Wajah berada dekat bagian atas, sedangkan benda yang dibahas berada di bawah. Jika kartu hanya menampilkan bagian tengah, pembaca mungkin melihat tangan tanpa memahami siapa dan apa yang menjadi pokok berita.
Sebelum membuka demo template, tulis dua unsur yang wajib bertahan: wajah perajin dan bentuk karya. Tambahkan unsur pendukung bila diperlukan, seperti papan nama tempat. Tidak semua detail harus masuk thumbnail; yang dipertahankan ialah informasi yang membuat foto tetap sesuai dengan judul.
Gunakan salinan foto milik sendiri atau yang penggunaannya diizinkan. Simpan berkas asli. Untuk latihan, tandai unsur penting pada salinan terpisah agar Anda mempunyai pembanding saat membaca potongan kartu. Tanda itu menjadi bahan pemeriksaan, bukan bagian gambar yang akan diterbitkan.
Bedakan tiga penyebab gambar terlihat keliru
Berkas yang diterima sudah terpotong
Bandingkan foto asli dengan berkas yang benar-benar dimuat untuk thumbnail. Jika bagian atas sudah tidak ada pada berkas tersebut, menggeser tampilan melalui CSS tidak dapat mengembalikannya. Masalah perlu ditelusuri pada pemilihan atau pembentukan berkas thumbnail. Jangan menyimpulkan gambar asli ikut rusak hanya dari tampilan kartu.
Foto lengkap, tetapi kotak menampilkan sebagian
Dalam CSS, object-fit: cover mempertahankan perbandingan lebar dan tinggi gambar sambil memenuhi kotaknya. Ketika rasio foto berbeda dari kotak, sebagian gambar dapat terpotong. Sebaliknya, contain mempertahankan seluruh gambar di dalam kotak, dengan ruang kosong bila rasionya berbeda. Penjelasan ini mengikuti dokumentasi object-fit MDN.
Gambar utuh, tetapi proporsinya berubah
Wajah yang tampak melebar atau benda yang memanjang menunjukkan persoalan berbeda. Nilai fill dapat meregangkan isi gambar mengikuti ukuran kotak ketika rasionya tidak sama. Menggeser posisi potongan tidak menyelesaikan perubahan proporsi. Bedakan gejalanya sebelum meminta penyesuaian kepada pembuat template.
Jangan menganggap semua thumbnail memakai mekanisme CSS yang sama. Implementasi bisa memakai elemen gambar, gambar latar, atau berkas khusus. Jika belum dapat membuktikan penyebabnya, catat gejala yang terlihat dan minta penjelasan, bukan langsung menempel aturan CSS.
Baca satu foto di beberapa tempat
Periksa foto yang sama pada gambar pembuka artikel, kartu beranda, halaman label, dan artikel terkait apabila bagian tersebut tersedia. Mulailah dengan mencatat mana yang lengkap dan mana yang kehilangan unsur penting. Lakukan pemeriksaan pada lebar ponsel dan desktop karena bentuk ruang gambar dapat berbeda.
Dalam latihan perajin tadi, buat catatan seperti ini: “Artikel: wajah dan karya terlihat. Kartu mendatar: karya terlihat, wajah terpotong. Kartu kecil: bentuk karya sulit dikenali.” Itu contoh cara mencatat, bukan hasil dari template yang dijual. Sertakan alamat halaman, bagian kartu, lebar layar, dan tangkapan layar ketika melakukan pemeriksaan nyata.
Jika berkas yang dimuat ternyata berbeda antartempat, lanjutkan dengan panduan audit gambar responsif Blogger. Pemeriksaan tersebut membantu menelusuri sumber gambar. Di sini, keputusan utamanya tetap apakah komposisi yang tersisa cukup untuk kebutuhan pembaca.
Pahami posisi potongan lewat percobaan lokal
Contoh berikut hanya untuk halaman HTML latihan di komputer sendiri. Buat dua elemen gambar memakai salinan foto yang sama. Beri keduanya kelas contoh-thumbnail, lalu tambahkan kelas utuh pada gambar kedua. Letakkan CSS berikut di bagian gaya halaman latihan tersebut. Nama kelas hanyalah contoh, bukan selector template Blogger tertentu.
/* Halaman latihan lokal saja */
.contoh-thumbnail {
width: 240px;
height: 180px;
object-fit: cover;
object-position: 50% 25%;
}
.contoh-thumbnail.utuh {
object-fit: contain;
object-position: 50% 50%;
}Kotak 240 × 180 piksel sengaja tetap agar perbedaannya mudah diamati; ukuran ini bukan anjuran untuk gambar produksi atau tampilan ponsel. Blok di artikel ini adalah teks contoh dan tidak menjalankan CSS. Jangan menempelkannya ke tema aktif atau menjadikannya aturan untuk semua gambar.
Gambar pertama memenuhi kotak dengan potongan yang posisinya diatur. Gambar kedua memperlihatkan seluruh foto dengan kemungkinan ruang kosong. Menurut dokumentasi object-position MDN, properti itu mengatur perataan isi gambar dalam kotak. Angka 25% bukan perintah memotong 25 persen foto, juga bukan koordinat wajah yang berlaku untuk semua gambar.
Bandingkan posisi awal dengan 50% 50%, lalu amati unsur yang muncul dan hilang. Satu posisi mungkin menyelamatkan wajah tetapi menghilangkan karya. Sebagaimana dijelaskan dalam spesifikasi CSS Images, isi gambar tetap dibatasi kotaknya. Pengaturan posisi tidak memperluas berkas maupun memulihkan bagian yang sudah dibuang.
Putuskan berdasarkan kebutuhan foto redaksi
Jika unsur penting bisa bertahan melalui penyesuaian posisi yang memang didukung template, tanyakan bagaimana pengaturannya dilakukan: per foto, per kartu, atau sekaligus untuk semua gambar. Dukungan itu harus dikonfirmasi; tersedianya properti CSS tidak membuktikan sebuah produk menyediakan pengaturan tersebut.
Jika wajah dan karya tetap tidak muat bersamaan, pertimbangkan foto mendatar lain, komposisi thumbnail khusus, atau bentuk kartu yang berbeda. Simpan versi artikel yang lengkap. Jangan mengubah fakta visual dengan menghilangkan konteks penting hanya demi memenuhi kotak. Pemilihan foto alternatif sering lebih masuk akal daripada memaksa satu potongan untuk semua tempat.
Sebelum membeli, kirim pertanyaan melalui kontak TemaBlogger dengan contoh foto yang boleh dibagikan serta bagian tampilan yang dimaksud. Minta konfirmasi cara thumbnail dibentuk dan pilihan penyesuaiannya. Pilihan template menjadi lebih jelas ketika kebutuhan visual dapat dijelaskan dengan bukti, tanpa mengandalkan label fitur atau menganggap tampilan thumbnail menjamin hasil pencarian tertentu.
Komentar
Posting Komentar