Categories
Theme WordPress

Memasang Featured Image

Sejak versi 2.9 WordPress memiliki fasilitas baru dengan nama featured image. Ini adalah gambar thumbnail yang mewakili sebuah artikel. Tak banyak blog yang memanfaatkan ini (termasuk blog ini juga), tapi karena kita belajar membuat themes WordPress, jadi kita perlu untuk mempelajarinya juga.

Apalagi, seperti biasa kita lihat di themes-themes premium dimana di bagian home kita bisa melihat sebuah gambar dengan sedikit tulisan dan di bagian artikel, gambar yang lebih besar muncul dengan lebih jelas. Bagaimana sih cara membuatnya? Ternyata gampang lho.

Ada 3 file yang kita edit kali ini yaitu functions.php, index.php dan tentunya style.css untuk mempercantik tampilannya.

Baiklah, di function.php kita pasang kode ini:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true );

Gampang ya? Angka 100 mewakili tinggi dan lebar gambar thumbnailnya. Jadi silahkan dimodifikasi sesuka hati.

Untuk memunculkan thumbnailnya, kita edit index.php tambahkan kode ini ditempat dimana anda ingin thumbnail itu muncul. Karena saya ingin dia muncul sebelum judul artikel, maka saya letakan diatas judul artikel seperti ini:

if (!is_single()) {
	if ( has_post_thumbnail() ) {
		the_post_thumbnail();
	} else {
		echo ''.get_the_title().'';
	}
}
?>

Yang

...

adalah judul artikel yang muncul di home. Oke, saya coba jelaskan sedikit. Baris pertama berisi kode untuk mengecek apakah ini halaman artikel atau bukan. Kalau bukan halaman artikel, kita munculkan thumbnailnya, tapi kalau di halaman artikel kita hilangkan.

Baris kedua untuk memeriksa apakah artikel tersebut memiliki thumbnail atau tidak. Kalau punya, munculkan thumbnailnya, tapi kalau tidak, munculkan thumbnail default. Dalam hal ini saya menggunakan gambar dengan nama thumbnail.png sebagai thumbnail default.

Kedua gambar diatas baik thumbnail post maupun thumbnail default sama-sama memiliki class dengan nama wp-post-image. Maka dengan mudah bisa kita modifikasi tampilannya agar lebih menarik. Langsung menuju style.css dan tambahkan kode ini:

img.wp-post-image {
	float:left; 
	margin-right:5px; 
	width:100px; 
	height:100px; 
	padding:3px; 
	border:solid 1px #cccccc;
}

Tentunya anda bisa memodifikasi sesuka hati CSS-nya. Sesuaikan dengan themes anda yah. sekarang coba anda lihat tampilan blog anda sekarang

memasang post thumbnail

Tampilannya masih berantakan karena gambar yang kita masukkan di artikel masih keluar di halaman depan.. hehehe.. trus bagaimana dong?

Ditunggu artikel berikutnya ya xixixi…

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

67 replies on “Memasang Featured Image”

kalo memunculkan thumbnails dibawah judul / berdampingan posting di halaman index, kemudian gambar dengan ukuran sebenarnya muncul di single page gimana yah?
tanpa plugin tentunya

Mas… mau nanya nich…. Saya install theme TinyNews pada wordpress saya mas. Theme nya sudah dilengkapi thumbnail pada halaman depan.
Nah… jika saya ambil image dari link lain pada post, thumbnailnya nggak muncul mas…
Thumbnailnya hanya muncul jika imagenya langsung saya upload.

Gmana cara memanggil image agar muncul di thumbnail nya mas?? ( image yg diambil dri link lain )

Trimakasih sebelumnya mas…

Memang ndak bisa bikin thumbnail dari web lain. Biasanya pakai script downloader dulu baru kemudian dibikinkan image thumbnailnya. Logikanya gini lah, itu image orang lain di hosting orang lain, masak anda bisa ngedit image-nya? Gak mungkin layau.

Tapi kalau “memaksa” supaya image tampil kecil, maka cukup kasih atribut width dan height aja di tag img-nya beres 🙂

By Post Author

makasih mas atas infonya. Saya ingin bertanya, web punya saya itu ga ada “feature image” di tempat ketika kita mau post, biasanya setelah “excert” ada “feature image” dalam template itu ga ada. Nah, bagaimana mua tambahkan feature image dalam blog…?

Mas, tanya lagi boleh kan? Saya pakai theme warrior yang ada feature imagenya. Namun ketika url posting saya akses kok yang keluar cuma judul aja. Sedangkan artikelnya tidak keluar. Mohon di cerahkan. Misal saya akses indoblogger.eu/judul-post yang keluar nanti cuma judul post namun artikelnya gak mau tampak. Thanks mas

Mas mau tanya ya!, pada wp 3.2.1 apa tampilannya tdk bisa utk humbnail atau theme nya yg tdk bisa menampilkan thumbnail di postingan? (theme sy 3d sound, 3.2.1).
Jika ada yg hrus di setting pda theme ini agar tampilannya sama dengan post di dashboard bagaimana caranya dan code scriftnya apa?.
trims sbelumnya mas.
catatan: ini contoh image thumbnail yg teks nya selalu di bawah image dan tdk bisa di setting teks nya sejajar dg image.
http://www.penaswara.com/produk-dan-manajemen-entertainmen-studio-musik-penaswara/

terima kasih mas ilmunya…mau tanya mas scirptnya dah tak pasang…hasinya gambarnmya setelah judul….na biar gambarnya itu di atas judul gimana caranya

kok aku nyoba gagal yak… 🙁
yang kebaca malahan scipt dari fungtion.php ini
if (!is_single()) {
if ( has_post_thumbnail() ) {
the_post_thumbnail(); } else { echo ‘

coba perhatiin di functions.php
dan pastiin yang tertulis adalah ini
add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size(100,100,true);

Saya nggak muncul gambarnya gan,,, gmn neh ceritanya????
ane pake wordpress 3.0.5,,
matur suwuunnnn

setelah saya mengganti template blog, dalam menu editor template tersebut tidak ada file function.php, hmm.. gimana ya
terima kasih atas ulasan di atas setidaknnya menambah wawasan saya soal wp

Permisi om itu if nya kurang <? gak sih aku jadi bingung om
itu sudah saya taruh di atas
<a href="” rel=”bookmark” title=””>
tp kok tulisanya jadi hitam di notepad++

if (!is_single()) {
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else {
echo ”;
}
}
?>

Terima Kasih Mas Tutorialnya.
tp saya mau tanya mas, bagaimana caranya agar gambar tadi tidak muncul pada saat single post, jadi dia hanya muncul pada home atau pada pencarian saja mas.
monon pencerahannya, terima kasih (dvicosmailbox-website@yahoo.com)

mohon pencerahannya mas,.

saya lg nyoba theme wp,. tp ada kendala di featured image,. pas saya set gambar ny berhasil. trs d publish. pas liat d page tp g muncul. itu kenapa y ?

Sangat bermanfaat buat saya yang lagi belajar.
Tapi saya mau nanya ya teman2, mana yang lebih gampang mengelola WordPress atau Joomla?

Trims dan salam kenal

Ya meskipun belum berhasil membuat featured image, tapi tetep semangat dan terimakasih udah share..
sekalian mau nanya di theme saya script yg seperti kode ke-2 (index.php)

jadi saya masukkan ke single.php (yg mirip dgn kode diatas), tapi hasilnya malah error.

mas, mau tanya nih.
gimana caranya tambah featured image nya tidak lewat sesi upload, tetapi kita ambil dari link luar.. saya coba cari tutorial di internet belum ada yang membhas ini. saya pengen featured image nya dari link luar karena space hosting saya kecil. ini bakal terkendala untuk kedepannya. saya pakai wordpress versi 3.5.1

ini web saya mas, http://www.hardi.web.id

Artikel yang sangat berguna,,,
sudah saya coba dan berhasil..tp maunya featured image tampil disamping kiri ringkasan artikel di halaman home gimana ya mas??

artikelnya sip, dapet pelajaran baru ni. . . ???
ow ya , saya mo tanya mas. . ??
saya kan pake WP , buat online store.
tapi saya buat WPnya tu yang WP multi site
jadi kan bisa banyak store gitu maksudnya ??
tapi waktu masukin product, setiap site saya harus upload images, nah ini masalahnya, kalo setiap site saya harus aploud image, space di domain saya abis dunk mas. . . ???
gimana ya caranya biyar ga’ usah upload image lagi biyar disk space nya gak penuh. . . .

Saya udah nerapin cara diatas, hasilnya works.. tapi pada blog yang lain semua post menampilkan gambar default! problemnya image ga saya upload via post tp bulk upload lewat file manager cpanel.. btw thanks sharingnya mas (y)

I just want to say I’m new to blogs and truly savored your blog. Very likely I’m planning to bookmark your website . You certainly have great articles. Thanks for sharing with us your website.

I don’t even know how I ended up here, but I thought this post was great. I don’t know who you are but definitely you’re going to a famous blogger if you aren’t already 😉 Cheers!

I was vastly delighted to find this site proceeding google.I sought to articulate thankfulness to you with regard to this excellent article!! I certainlyliked each insufficiently crumb of it and I’ve you bookmarked to look hooked on new ram you post.

I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are amazing! Thanks!

Excellent blog here! Also your site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my site loaded up as fast as yours lol

Hello, Neat post. There is an issue along with your site in internet explorer, could test this… IE nonetheless is the marketplace leader and a huge component to other people will miss your fantastic writing due to this problem.

Nice post. I was checking constantly this blog and I’m impressed! Very useful information specially the last part 🙂 I care for such information much. I was seeking this certain information for a very long time. Thank you and best of luck.

Comments are closed.