Featured Image (Post Thumbnail)

Apa Itu Featured Image?

Featured image (atau post thumbnail) adalah fitur bawaan WordPress untuk mengasosiasikan satu gambar utama dengan sebuah post. Berbeda dari gambar yang disisipkan dalam konten — featured image adalah metadata terpisah.

---

Langkah 1: Aktifkan Featured Image di Theme

Di functions.php, dalam fungsi university_features():

function university_features() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');  // ← Aktifkan featured image
  add_image_size('professorLandscape', 400, 260, true);
  add_image_size('professorPortrait', 480, 650, true);
}

add_action('after_setup_theme', 'university_features');

Fungsi	Penjelasan
add_theme_support('post-thumbnails')	Mengaktifkan fitur featured image untuk blog posts & pages
add_image_size('name', width, height, crop)	Membuat ukuran gambar kustom baru

---

Langkah 2: Aktifkan Thumbnail untuk Custom Post Type

Di wp-content/mu-plugins/university-post-types.php, tambahkan 'thumbnail' di array supports:

register_post_type('professor', array(
  'supports' => array('title', 'editor', 'thumbnail'),  // ← thumbnail = featured image
  // ...
));

⚠️ add_theme_support('post-thumbnails') mengaktifkan fitur secara global, tapi untuk custom post type, kamu juga harus menyertakan 'thumbnail' di array supports.

---

Langkah 3: Custom Image Sizes

add_image_size('professorLandscape', 400, 260, true);
add_image_size('professorPortrait', 480, 650, true);

Parameter	Contoh	Penjelasan
Nama	'professorLandscape'	Nickname unik (bebas pilih)
Width	400	Lebar dalam piksel
Height	260	Tinggi dalam piksel
Crop	true	Potong gambar agar pas ukuran. false = hanya resize tanpa crop

Opsi Crop

Nilai	Perilaku
true	Crop ke tengah gambar
false	Resize proporsional (tidak crop)
array('left', 'top')	Crop ke pojok kiri atas
array('center', 'bottom')	Crop ke tengah bawah

---

Langkah 4: Regenerate Thumbnails (untuk gambar lama)

WordPress hanya membuat ukuran kustom untuk gambar yang diupload setelah add_image_size ditambahkan. Untuk gambar lama → install plugin Regenerate Thumbnails:

1. Plugins → Add New → cari "Regenerate Thumbnails" (1 juta+ instalasi)
2. Install & Activate
3. Tools → Regenerate Thumbnails → klik process

---

Langkah 5: Menampilkan Featured Image di Template

Fungsi untuk Featured Image

Fungsi	Output	Kapan Pakai
the_post_thumbnail()	Tag <img> lengkap	Saat butuh <img> element
the_post_thumbnail('size')	Tag <img> dengan ukuran spesifik	Dalam HTML biasa
the_post_thumbnail_url()	Hanya URL gambar	Untuk background-image CSS atau <img src=""> manual
the_post_thumbnail_url('size')	URL gambar ukuran spesifik	—

Contoh: Single Professor dengan 2-Column Layout

Di single-professor.php:

<div class="generic-content">
  <div class="row group">
    <div class="one-third">
      <?php the_post_thumbnail('professorPortrait'); ?>
    </div>
    <div class="two-thirds">
      <?php the_content(); ?>
    </div>
  </div>
</div>

Contoh: Professor Card di Program Page

Di single-program.php (dalam loop related professors):

<a class="professor-card" href="<?php the_permalink(); ?>">
  <img class="professor-card__image" src="<?php the_post_thumbnail_url('professorLandscape'); ?>">
  <span class="professor-card__name"><?php the_title(); ?></span>
</a>

---

Plugin: Manual Image Crop

Untuk kontrol cropping per-gambar (bukan global center crop):

1. Plugins → Add New → cari "Manual Image Crop" by Thomas Z
2. Install & Activate
3. Edit post → klik featured image → Crop Image
4. Pilih tab ukuran (e.g., "professorLandscape") → drag area crop → Crop It

💡 Setelah crop ulang, lakukan hard refresh (Shift + Reload) untuk melihat perubahan — browser meng-cache file gambar dengan nama yang sama.