Cara Mengganti Gambar Random Image Header pada Blog Wordpress

Kadang saya sering dipusingkan ketika mau berganti template, sering banyak hal yang baru dan harus belajar lagi dari awal...nah buat yang buat banyak waktu sih tak masalah...tapi kalo buat yang tidak punya banyak waktu untuk update bisa jadi memusingkan. Ini adalah salah satunya ketika saya mau mengganti header yang memiliki gambar yang berganti-ganti pada template wordpress. Template yang saya gunakan adalah primepress dan tentunya theme gratisan. Berikut saya tampilkan rujukan dari hasil googling saya....harap diterjemahkan sendiri.

If you could choose between a static home page or a dynamic one, which would you take?  Dynamic every time…but wait, doesn’t that require work to pull off?  Not if you use my incredibly simple random header image solution! Oh, and you could use this for more than just header images; I just figure that most folks will want to rotate their headers, since they tend to be the most dominant visual elements.

Are you ready to go random? Let’s do it!

1. Prepare Your Header Files

For the purposes of this example, we’re going to use 5 different images to pull off our random header effect. It’s important that these images be the same size — this will keep your image declarations consistent and W3C-valid. So, grab the five header images of your choice, and name them according to the following convention:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg

One thing worth noting here is the fact that all of your images should have the same file extensions. If you’re using .gif files, then make sure that each header image has the .gif extension. Photographs will look infinitely better if saved as .jpg, though, so that’s why I’ve chosen that extension here.

Upload the images to your desired directory on your server. If you’re using WordPress, I’d suggest uploading the images to the images folder within your active theme directory. Once your images are on the server, it’s time to install the random header code.

2. Code It Up!

Because I hate to limit my examples to any particular type of CMSsoftware, I have chosen to do a bare-bones illustration here. Since implementing random header images across different platforms is a straightforward task, I’ll leave that to you.

One thing that you do need to be aware of, though, is the fact that your page must be compiled as PHP, which means that your Web page cannot just be a regular old HTML (the page should end with the extension.php ¹). But, if you’re running WordPress, you have nothing to worry about because WordPress compiles pages as PHP by default.

Without further ado, here is the random header image code:

<img src="http://path_to_images/header_echo(rand(1,5)); ?>.jpg" width="image_width" height="image_height" alt="image_alt_text" /> 

All the magic happens in this bit of PHP:

echo(rand(1,5)); ?> 

That little snippet of code produces — and then echoes, or prints — a random number between 1 and 5. Therefore, the header image references become header_1, header_2, and so on.

What, you were expecting it to be more complicated? Sorry!

Oh, and if you experience any problems implementing this, please let me know in the comments.

¹ WordPress pages are still compiled in PHP, but by default, they do not end with the.php extension. I realize this is confusing, but this is the hand I’ve been dealt. ↑

Update: If you’re using the Cutline theme for WordPress, I’ve done all the dirty work for you! Check out random header images for Cutline!

Posted in: Blogging