fix: perbaikan tampilan website ketika slider belum diisi

[pandigresik]

Pull Request: Fix Placeholder Slider Website

Deskripsi

Menambahkan gambar placeholder dan styling minimum height pada komponen slider website untuk menjaga tampilan tetap konsisten ketika belum ada slide yang ditambahkan atau gambar slide tidak ditemukan.

Perubahan yang dilakukan:

1. CSS Enhancement (public/web/css/openkab.css): Menambahkan min-height: 350px pada .header-carousel dan .header-carousel .owl-carousel-item beserta centering layout
2. Blade Template (resources/views/web/partials/slider.blade.php): Menambahkan fallback image placeholder untuk kondisi empty state dan broken image
3. Error Handler (inline): Menambahkan onerror attribute pada img tag untuk menangani kasus gambar slide tidak ditemukan di storage

Alasan perubahan:

• UX Consistency: Tampilan halaman web menjadi berantakan ketika belum ada slide yang dikonfigurasi karena carousel tidak memiliki konten
• Broken Image Handling: Ketika file gambar slide dihapus atau tidak ditemukan di storage, browser menampilkan ikon broken image yang merusak tampilan
• Layout Stability: Tanpa minimum height, carousel collapse dan menyebabkan layout shift pada elemen di bawahnya

Dampak perubahan:

✅ Visual Consistency: Slider selalu menampilkan area dengan tinggi minimum 350px
✅ Graceful Degradation: Placeholder image tampil saat tidak ada data atau gambar hilang
✅ No Breaking Changes: Perubahan hanya pada tampilan, tidak mengubah logic repository atau database

Masalah Terkait (Related Issue)

• Solusi untuk perbaikan terkait issue Tampilan halaman web ketika belum ditambahkan gambar slider tidak tampil dengan baik #1039
• Tampilan halaman web ketika belum ditambahkan gambar slider tidak tampil dengan baik #1039

Langkah untuk mereproduksi (Steps to Reproduce)

Sebelum perbaikan (masalah):

1. Akses halaman website OpenKab
2. Pastikan belum ada data slide di database atau file gambar slide tidak ada di storage
3. Lihat area slider di halaman utama
4. ❌ Area slider kosong/berantakan, layout collapse, atau muncul ikon broken image

Setelah perbaikan (fix):

1. Akses halaman website OpenKab
2. Pastikan belum ada data slide di database atau file gambar slide tidak ada di storage
3. Lihat area slider di halaman utama
4. ✅ Area slider menampilkan gambar placeholder dengan tinggi konsisten 350px

Testing pada fitur lain yang terkait:

• Slider dengan data normal ✅ Tidak terpengaruh, gambar slide tampil normal
• Navigasi carousel (prev/next) ✅ Berfungsi normal
• Responsive layout ✅ Min-height tetap konsisten di semua ukuran layar

Daftar Periksa (Checklist)

• Saya telah mematuhi aturan penulisan script.
• Saya telah mengikuti proses review pull request.
• Testing manual telah dilakukan di environment development
• Tidak ada console error atau warning
• Code sudah di-review oleh developer

Teknis Detail

Penjelasan Teknis

CSS Changes (public/web/css/openkab.css):

.header-carousel {
    min-height: 350px;
}

.header-carousel .owl-carousel-item {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-carousel-item img {
    max-height: 350px;
    object-fit: contain;
}

• min-height pada container mencegah layout collapse
• Flexbox centering memastikan placeholder image berada di tengah
• object-fit: contain menjaga aspect ratio gambar placeholder

Blade Template Changes (resources/views/web/partials/slider.blade.php):

• Menggunakan @forelse dengan @empty block untuk menangani kondisi tidak ada slide
• Variable $placeholderImage di-define di @php block untuk menghindari nested Blade syntax issue di dalam attribute
• onerror handler mengganti src ke placeholder ketika gambar slide gagal dimuat

Konfigurasi yang berubah

Tidak ada

Dependencies yang ditambahkan

Tidak ada dependencies baru

Testing

Manual Testing

• Slider tampil dengan placeholder saat tidak ada data di SlideRepository
• Slider tampil dengan placeholder saat file gambar slide tidak ditemukan di storage
• Slider tampil normal saat ada data slide dan gambar tersedia
• Navigasi carousel (prev/next buttons) berfungsi dengan placeholder
• Responsive layout di mobile (min-height tetap konsisten)
• Regression Testing - fitur CMS slide management tidak terpengaruh

Screenshots / Video

simplescreenrecorder-2026-05-19_14.05.09.mp4

Sebelum:

Area slider kosong atau menampilkan ikon broken image, layout collapse

Sesudah:

Area slider menampilkan gambar placeholder "no-image.png" dengan tinggi konsisten 350px, gambar ter-center di tengah carousel

Breaking Changes

Tidak ada

Migration Guide

Tidak diperlukan

References

• Owl Carousel Documentation
• MDN: object-fit

---

Catatan tambahan: Perubahan ini bersifat visual-only dan tidak mempengaruhi logic bisnis atau data slide di database. Placeholder menggunakan asset yang sudah tersedia di public/assets/img/no-image.png.

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1040