From abe1f34481a710463cc302b90936e49c780ef14c Mon Sep 17 00:00:00 2001
From: Mas Budi Kusuma <admin@masbudi.my.id>
Date: Wed, 16 Sep 2026 08:19:45 +0700
Subject: [PATCH] feat(ui/admin): tambah tooltip panduan rekomendasi resolusi
 gambar pada pengaturan tema dan CPT slider

---
 inc/admin-menu.php | 16 ++++++++--------
 inc/cpt-slider.php | 11 +++++++++++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/inc/admin-menu.php b/inc/admin-menu.php
index 8d1948f..ea4219a 100644
--- a/inc/admin-menu.php
+++ b/inc/admin-menu.php
@@ -250,7 +250,7 @@ function edukarsa_settings_page_html() {
                         </div>
                         <div class="edukarsa-card-body">
                             <div class="form-field-group">
-                                <label><?php echo esc_html( edukarsa_t( 'Logo Website (Header)', 'Website Logo (Header)' ) ); ?></label>
+                                <label><?php echo esc_html( edukarsa_t( 'Logo Website (Header)', 'Website Logo (Header)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Tinggi 110px, lebar proporsional (contoh: 300x110px). Format PNG Transparan/WebP.', 'Recommended: 110px height, proportional width (e.g. 300x110px). Transparent PNG/WebP.' ) ); ?></span></span></label>
                                 <div class="input-with-button">
                                     <input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" placeholder="https://...">
                                     <button type="button" class="button btn-upload" data-target="#edukarsa_header_logo"><?php echo esc_html( edukarsa_t( 'Pilih Logo', 'Select Logo' ) ); ?></button>
@@ -364,7 +364,7 @@ function edukarsa_settings_page_html() {
                             </div>
                             <div id="about-settings-box">
                                 <div class="form-grid-2">
-                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Foto Pimpinan (Portrait 3:4)', 'Leader Photo (Portrait 3:4)' ) ); ?></label><div class="input-with-button"><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
+                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Foto Pimpinan (Portrait 3:4)', 'Leader Photo (Portrait 3:4)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Minimal 600x800 piksel (Rasio pasti 3:4) agar presisi.', 'Recommended: Min 600x800 pixels (Strict 3:4 ratio) for precision.' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
                                     <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Nama Lengkap & Gelar', 'Full Name & Degree' ) ); ?></label><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>"></div>
                                 </div>
                                 <div class="form-grid-2">
@@ -440,18 +440,18 @@ function edukarsa_settings_page_html() {
                             </div>
                             <div id="video-settings-box">
                                 <div class="form-grid-2">
-                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar Parallax', 'Parallax Background Image' ) ); ?></label><div class="input-with-button"><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><button type="button" class="button btn-upload" data-target="#mid_bg_image"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
+                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar Parallax', 'Parallax Background Image' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1920x1080 piksel (Resolusi tinggi, format JPG/WebP terkompresi).', 'Recommended: 1920x1080 pixels (High res, compressed JPG/WebP).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><button type="button" class="button btn-upload" data-target="#mid_bg_image"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button></div></div>
                                     <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Warna Overlay Parallax', 'Parallax Overlay Color' ) ); ?></label><div style="display:flex; align-items:center; gap:10px;"><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"><code><?php echo esc_html(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?></code></div></div>
                                 </div>
                                 <div class="form-grid-2">
                                     <div class="stat-config-box">
                                         <h4>Video 1</h4>
-                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 1', 'Video 1 Thumbnail' ) ); ?></label><div class="input-with-button"><input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button></div></div>
+                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 1', 'Video 1 Thumbnail' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1280x720 piksel (Rasio 16:9).', 'Recommended: 1280x720 pixels (16:9 Ratio).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button></div></div>
                                         <div class="form-field-group" style="margin-bottom:0;"><label><?php echo esc_html( edukarsa_t( 'URL Video 1', 'Video 1 URL' ) ); ?></label><input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=..."></div>
                                     </div>
                                     <div class="stat-config-box">
                                         <h4>Video 2</h4>
-                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 2', 'Video 2 Thumbnail' ) ); ?></label><div class="input-with-button"><input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button></div></div>
+                                        <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Thumbnail Video 2', 'Video 2 Thumbnail' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1280x720 piksel (Rasio 16:9).', 'Recommended: 1280x720 pixels (16:9 Ratio).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button></div></div>
                                         <div class="form-field-group" style="margin-bottom:0;"><label><?php echo esc_html( edukarsa_t( 'URL Video 2', 'Video 2 URL' ) ); ?></label><input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=..."></div>
                                     </div>
                                 </div>
@@ -492,7 +492,7 @@ function edukarsa_settings_page_html() {
                             <div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
                                 <h4><?php echo esc_html( edukarsa_t( 'Konfigurasi CTA PPDB / PMB', 'Admission CTA Configuration' ) ); ?></h4>
                                 <div class="form-grid-2">
-                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar CTA', 'CTA Background Image' ) ); ?></label><div class="input-with-button"><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><button type="button" class="button btn-upload" data-target="#cta_bg">Up</button></div></div>
+                                    <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Gambar Latar CTA', 'CTA Background Image' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: 1920x800 piksel (Lanskap memanjang).', 'Recommended: 1920x800 pixels (Wide landscape).' ) ); ?></span></span></label><div class="input-with-button"><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><button type="button" class="button btn-upload" data-target="#cta_bg">Up</button></div></div>
                                     <div class="form-field-group"><label><?php echo esc_html( edukarsa_t( 'Teks Tombol CTA', 'CTA Button Text' ) ); ?></label><input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang')); ?>"></div>
                                 </div>
                                 <div class="form-grid-2">
@@ -609,7 +609,7 @@ function edukarsa_settings_page_html() {
 
                             <div class="form-grid-2">
                                 <div class="form-field-group">
-                                    <label><?php echo esc_html( edukarsa_t( 'Banner Poster Sidebar (Opsional)', 'Sidebar Banner Poster (Optional)' ) ); ?></label>
+                                    <label><?php echo esc_html( edukarsa_t( 'Banner Poster Sidebar (Opsional)', 'Sidebar Banner Poster (Optional)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Lebar 600px, tinggi bebas. Maksimal 300KB.', 'Recommended: 600px width, flexible height. Max 300KB.' ) ); ?></span></span></label>
                                     <div class="input-with-button">
                                         <input type="text" id="edukarsa_sidebar_banner_img" name="edukarsa_sidebar_banner_img" value="<?php echo esc_url(get_option('edukarsa_sidebar_banner_img')); ?>" placeholder="https://...">
                                         <button type="button" class="button btn-upload" data-target="#edukarsa_sidebar_banner_img"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button>
@@ -647,7 +647,7 @@ function edukarsa_settings_page_html() {
 
                             <div class="form-grid-2">
                                 <div class="form-field-group">
-                                    <label><?php echo esc_html( edukarsa_t( 'Logo Footer (Opsional)', 'Footer Logo (Optional)' ) ); ?></label>
+                                    <label><?php echo esc_html( edukarsa_t( 'Logo Footer (Opsional)', 'Footer Logo (Optional)' ) ); ?> <span class="tooltip-hint">?<span class="tooltip-text"><?php echo esc_html( edukarsa_t( 'Rekomendasi: Gunakan varian logo terang/putih dengan latar transparan.', 'Recommended: Use a light/white logo variant with transparent background.' ) ); ?></span></span></label>
                                     <div class="input-with-button">
                                         <input type="text" id="edukarsa_footer_logo" name="edukarsa_footer_logo" value="<?php echo esc_url(get_option('edukarsa_footer_logo')); ?>" placeholder="https://...">
                                         <button type="button" class="button btn-upload" data-target="#edukarsa_footer_logo"><?php echo esc_html( edukarsa_t( 'Pilih', 'Select' ) ); ?></button>
diff --git a/inc/cpt-slider.php b/inc/cpt-slider.php
index f247676..2d529a5 100644
--- a/inc/cpt-slider.php
+++ b/inc/cpt-slider.php
@@ -73,3 +73,14 @@ function edukarsa_register_galeri_cpt() {
     ));
 }
 add_action( 'init', 'edukarsa_register_galeri_cpt', 0 );
+
+// --- NOTIFIKASI PANDUAN RESOLUSI SLIDER ---
+function edukarsa_slider_admin_notice() {
+    $screen = get_current_screen();
+    if ( isset($screen->post_type) && $screen->post_type === 'slider' ) {
+        echo '<div class="notice notice-info is-dismissible" style="border-left-color: #0b4a8e;">
+            <p><strong>💡 Panduan Resolusi Gambar:</strong> Untuk tampilan terbaik tanpa pecah, gunakan gambar beresolusi <strong>1920x1080 piksel (16:9)</strong> pada kotak <em>Gambar Unggulan (Featured Image)</em> di sisi kanan bawah.</p>
+        </div>';
+    }
+}
+add_action('admin_notices', 'edukarsa_slider_admin_notice');