Page Banner Dynamic Background Image

Tujuan

Membuat area page banner (header setiap halaman) menjadi dinamis:

• Subtitle bisa diisi per halaman/post
• Background image bisa diupload per halaman/post
• Menggunakan ACF custom fields

---

Langkah 1: Buat Field Group "Page Banner"

Di WordPress Admin → Custom Fields → Add New:

Field 1: Subtitle

Setting	Nilai
Field Label	Page Banner Subtitle
Field Name	page_banner_subtitle
Field Type	Text

Field 2: Background Image

Setting	Nilai
Field Label	Page Banner Background Image
Field Name	page_banner_background_image
Field Type	Image
Return Format	Image Array (default)

Location: Tampilkan di SEMUA Post Types

Buat field group muncul di semua post type dengan trik:

• Rule 1: Post Type is equal to Post
• OR
• Rule 2: Post Type is not equal to Post

Salah satu kondisi selalu true → field group selalu muncul.

---

Langkah 2: Tambahkan Image Size untuk Banner

Di functions.php:

function university_features() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
  add_image_size('professorLandscape', 400, 260, true);
  add_image_size('professorPortrait', 480, 650, true);
  add_image_size('pageBanner', 1500, 350, true);  // ← baru
}

add_action('after_setup_theme', 'university_features');

💡 Jangan lupa regenerate thumbnails setelah menambah ukuran baru (Tools → Regenerate Thumbnails).

---

Langkah 3: Tampilkan Custom Fields di Template

Contoh di single-professor.php

<?php
  $pageBannerImage = get_field('page_banner_background_image');
?>

<div class="page-banner">
  <div class="page-banner__bg-image" style="background-image: url(<?php
    echo $pageBannerImage['sizes']['pageBanner'];
  ?>);">
  </div>
  <div class="page-banner__content container container--narrow">
    <h1 class="page-banner__title"><?php the_title(); ?></h1>
    <div class="page-banner__intro">
      <p><?php the_field('page_banner_subtitle'); ?></p>
    </div>
  </div>
</div>

Penjelasan ACF Image Field Return

ACF image field (return format: Image Array) mengembalikan array dengan struktur:

$pageBannerImage = get_field('page_banner_background_image');

// Properti yang tersedia:
$pageBannerImage['url']            // URL gambar original (full size)
$pageBannerImage['sizes']['thumbnail']      // URL ukuran thumbnail
$pageBannerImage['sizes']['pageBanner']     // URL ukuran custom kita
$pageBannerImage['sizes']['professorLandscape']  // URL ukuran lain
$pageBannerImage['alt']            // Alt text
$pageBannerImage['title']          // Title
$pageBannerImage['width']          // Lebar original
$pageBannerImage['height']         // Tinggi original

Tip: Gunakan print_r() untuk Debug

<?php print_r(get_field('page_banner_background_image')); ?>

Ini akan menampilkan seluruh isi array di halaman — sangat berguna untuk melihat properti apa saja yang tersedia.

---

Masalah: Duplikasi Kode

Kode page banner sama di setiap template file:

• single-professor.php
• single-event.php
• single-program.php
• single.php
• page.php
• archive.php
• dll.

Jika perlu mengubah HTML page banner, harus edit semua file.

Solusi (Dibahas di Chapter 9)

Buat fungsi reusable di functions.php yang bisa dipanggil dari semua template:

// Preview (detail di chapter berikutnya):
pageBanner(array(
  'title' => 'Hello',
  'subtitle' => 'Welcome',
  'photo' => 'url-to-image.jpg'
));

💡 Ini adalah prinsip DRY (Don't Repeat Yourself) — salah satu fundamental programming. Tapi jangan terlalu agresif menghilangkan duplikasi — cari keseimbangan antara DRY dan readability.