Tambahkan Gambar Unggulan Pada Posting Tunggal

Gambar unggulan arsip Anda (Post Thumbnail) akan ditarik dari gambar unggulan terlepas dari bagaimana Anda menambahkannya di layar Edit Posting Anda.

Gambar yang ditampilkan sebelum atau setelah judul entri posting tunggal Anda ditarik dari gambar pertama yang Anda masukkan ke dalam posting, kecuali jika Anda menghapusnya.

Anda dapat menghapus atau mengubah kode yang menampilkan gambar sebelum atau sesudah judul entri posting tunggal Anda menggunakan salah satu cuplikan kode di halaman ini.

Jika Anda menambahkan gambar sebagai gambar unggulan, itu akan ditampilkan di arsip Anda sebagai gambar mini posting dan bukan sebagai gambar unggulan setelah judul posting tunggal Anda.

Jika Anda tidak menambahkan gambar unggulan, gambar pertama dalam posting Anda akan ditampilkan sebelum atau setelah judul entri posting tunggal Anda serta di halaman arsip Anda.

Dalam posting ini, saya akan memberi Anda beberapa baris kode PHP yang bisa Anda tempel di akhir file functions.php tema anak Anda.

Kode akan memungkinkan Anda untuk menampilkan gambar posting Anda, sebelum atau sesudah judul Anda pada satu posting.

Dan menanyakan pertanyaan ini baru-baru ini:

Telah memeras otak saya mencari-cari, menggunakan kode berbeda yang ditemukan di forum ini dan telah menghasilkan posting baru.

Menggunakan Minimum Pro, saya hanya ingin menampilkan Gambar Unggulan posting di halaman "posting tunggal". Lebih disukai di atas konten teks. Saya telah menemukan kode di forum ini dan memasukkannya ke functions.php. Ini menampilkan Gambar Unggulan, tetapi secara bersamaan menghapus konten teks. Jadi jelas saya melakukan sesuatu yang salah.

Catatan: Silakan gunakan potongan kode PHP terakhir dalam posting ini jika Anda menjalankan markup XHTML lama dan bukan HTML 5 karena kaitnya telah berubah.

Tampilkan Gambar Unggulan Setelah Judul

Kode ini menampilkan gambar setelah judul posting tunggal Anda.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Tampilkan Gambar Unggulan Sebelum Judul

Kode ini menampilkan gambar Anda sebelum judul posting tunggal Anda.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Tampilkan Gambar Unggulan di Halaman Statis

Jika Anda juga ingin ini berfungsi untuk satu halaman statis, cukup tambahkan halaman ke kode seperti ini:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular( 'page' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Tampilkan Gambar Unggulan di Halaman Statis & Posting Tunggal

Jika Anda juga ingin ini berfungsi untuk halaman dan posting statis, cukup tambahkan halaman ke kode seperti ini:

 add_action( 'genesis_entry_header', 'single_post_featured_image', 5 ); function single_post_featured_image() { if ( ! is_singular() ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Posisi tampilan gambar unggulan Anda dapat ditentukan menggunakan parameter ketiga untuk prioritas pemosisian.

Dalam kode di atas ini hanya masalah mengubah parameter ke-3 dari 5 menjadi 15.

Ubah Ukuran Gambar

Berikut adalah contoh penggunaan ukuran besar sesuai dengan Pengaturan Media Anda.

 add_action( 'genesis_entry_header', 'single_post_featured_image', 15 ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => 'large', 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Anda juga dapat menggunakan salah satu ukuran default lainnya yang dikonfigurasi di Pengaturan > Media.

• gambar mini
• sedang
• besar
• penuh

Anda juga dapat menggunakan ukuran khusus apa pun yang telah Anda tambahkan di file fungsi Anda.

Contoh:

portofolio

 add_image_size( 'portfolio', 540, 340, TRUE );

Menggunakan Kait Loop XHTML Lama

Jika Anda masih menjalankan XHTML dan belum mengonversi ke HTML 5, Anda harus menggunakan Loop Hooks lama:

 add_action( 'genesis_before_post_title', 'single_post_featured_image' ); function single_post_featured_image() { if ( ! is_singular( 'post' ) ) return; $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img ); }

Menambahkan Spasi Antara Judul & Gambar

Berikut adalah beberapa contoh kode CSS yang dapat Anda tambahkan ke akhir file style.css tema anak Anda sebelum kode untuk Media Queries yang menambahkan margin antara gambar unggulan Anda dan judul entri Anda pada satu posting.

 .single .post-image { margin-bottom: 30px; }

Gunakan contoh ini untuk halaman:

 .page .post-image { margin-bottom: 30px; }

Sejajarkan Gambar Unggulan (post-gambar) Kanan

Anda juga dapat menyelaraskan gambar posting Anda ke kanan.

Cukup tambahkan kode CSS ini sebelum Kueri Media Anda di dekat akhir file style.css tema anak Anda:

 .single .post-image { float:right; margin:0 0 1em 1em; width: 285px; height: 285px; }

Kode di atas akan menyelaraskan gambar yang Anda tambahkan sebagai gambar unggulan di semua posting tunggal di sebelah kanan konten Anda sehingga teksnya dibungkus seperti ini:

Anda juga dapat menambahkan kelas alignright ke kode PHP daripada menggunakan CSS.

 'class' => 'alignright'

Cukup ganti post-image dalam kode PHP dengan alignright dan teks Anda akan membungkus gambar Anda di sisi kanan konten Anda.

Sejajarkan Gambar Unggulan (post-image) Kiri

Anda juga dapat menyelaraskan gambar unggulan posting tunggal Anda ke kiri.

 .single .post-image { float:left; margin: 1em 1em 0 0; width: 200px; height: 200px; }

Dan inilah hasilnya:

Anda juga dapat menambahkan kelas alignleft ke kode PHP daripada menggunakan CSS.

 'class' => 'alignleft'

Cukup ganti post-image dalam kode PHP dengan alignleft dan teks Anda akan membungkus gambar Anda di sisi kiri konten Anda.

Hapus Tautan href dari Gambar Unggulan

Seorang anggota bertanya kepada saya bagaimana cara menghapus tautan dari kode, jadi ini dia:

Cukup ganti bagian kode ini:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); printf( '<a href="%s" title="%s">%s</a>', get_permalink(), the_title_attribute( 'echo=0' ), $img );

Dengan ini:

 $img = genesis_get_image( array( 'format' => 'html', 'size' => genesis_get_option( 'image_size' ), 'attr' => array( 'class' => 'post-image' ) ) ); echo $img;

Pos terkait

• 2 Cara Menggunakan Gambar Unggulan Berbeda Untuk Posting Tunggal & Halaman Arsip
• Judul Entri Di Atas Gambar Unggulan Pada Posting Tunggal
• Kotak Centang Untuk Menambah atau Menghapus Gambar Unggulan pada Postingan atau Halaman Individual
• Tautkan Gambar Unggulan ke URL Khusus
• Sesuaikan Tampilan Gambar Unggulan Pada Postingan Tunggal
• Tambahkan Gambar Unggulan Sebelum Konten Dalam Tema Apa Pun
• Tetapkan Gambar Unggulan Fallback Untuk Setiap Kategori