The WordPress “Featured Image” on Steroids!

I’ve just enabled a new feature in the version 5.1.5 update of ClickBump theme called “Feature Image Links To:”

ClickBump theme owners can download and install the update (Clickbump 5.1.5) to enable this exciting new feature. You can find the new panel, called “Featured Image Links To:” while editing posts or pages. Its located below the “Featured Image” panel on the right side of the content editor.

Simply put, it allows you to add a hyperlink URL that the theme will apply to the featured image so that when its clicked, it will take the user to the page specified in the URL you enter into the “Featured Image Links To:” field.

I’ve no idea why the creator’s of WordPress didn’t think to include this as a native feature, however with ClickBump 5.1.5, you can now enjoy the benefits of this incredibly useful feature.

So, now that you know what it is, here’s a few things you can do with it (Don’t worry, I’ve  created a companion website to fully showcase the new feature and I’ll introduce you to that in a moment)

Use the Featured Image as an Affiliate Product Link

The easiest and most obvious use of the featured image is to provide an attractive, reasonably sized image of a product, ebook or software box that, when clicked, will whisk the user off to the merchant site, along with your affiliate ID in tow.

Here’s a video that demonstrates how to use this feature to highlight affiliate review products:

To do this, you would simply upload your image and input your affiliate link in the “Featured Image Links To:” field supplied by ClickBump theme, just below the Featured Image itself.

Tip: With my Amazon associates account, Amazon has provided me with a nifty toolbar which is added to the top of my browser whenever I’m on Amazon.com. The toolbar allows me to instantly grab my custom affiliate link for any product I’m viewing at the time. If you have this toolbar enabled (check your associates dashboard to enable it), all you need is the “href” portion of the “Text link” that Amazon provides.

For example, <a href=”your-affiliate-link-will-be-here“>link text</a>. You’ll paste the “your-affiliate-link-will-be-here” part into the “Featured Images Links To:” input field.

By default, ClickBump theme displays the full size featured image on posts and pages where you’ve assigned a featured image. Its displayed within the content area to the top left side with a text wrap around it. However, If you happen to be using Adsense in the main content area, ClickBump theme displays a thumbnail version of your featured image, moving it to the opposite side of the content from the ad block. You can, however, on a post by post basis, elect to remove the Adsense ad in order to show the default presentation of the featured image. To do this, just add the “don’t show ads” category flag to the post. For pages that have ads on them, look under the “ClickBump Page Options” and select the “Don’t Show Content Ad Box” option)

Use the Featured Image Graphic as a Product Images Listing

With a bit of planning, you can also use the featured image graphic to show a group of product images (aka Pushdown images) above your posts. People who are familiar with the “XFactor” method, where we display 4-5 product images just above the post title, will recognize this technique but may not be familiar with how to accomplish it using the featured image option.

How can I have multiple product images side by side using the Featured Image graphic?

You can definitely do this. We’ll just combine all of our product images into a single wide image and upload that as our featured image.

First, we’ll need to create our single featured image graphic so that it contains multiple product images side by side. What I mean by that is that your single graphic will contain all of your product images side by side on a white (or transparent) background as if they were multiple images.

To do this, open one of your images in your favorite image editor (Photoshop is the obvious choice for most, however, the free online tool, pixlr.com is perfectly capable of doing this as well).

Once you have the image open, from the “image” menu, adjust the “Canvas” to a wide enough size to accommodate all of the images you are planning on adding to the graphic. For example, a width of 550 pixels is wide enough to display a row of 4 product images sized 125 pixels square with a 10 pixel margin between images (and that’s the size I’d recommend, no more than 600 pixels which is the average size of the content area for most ClickBump templates).

So, you’ll just open each of your product images and paste them into this larger sized image. When you are done, you’ll have a single graphic that contains 4 product images side by side with a small amount of space between them. Now that you are done, just save the image as a .png or .jpg file at 75% quality and upload it to your product page using the “Featured Image” upload tool. Once its been uploaded, be sure to click the “Set as Featured Image” link at the bottom of the Image inspector dialog window.

As an optional task, you can elect to add a hyperlink to your featured image as described above, using the “Featured Image Links To:” input field. Otherwise, just leave it blank.

By default, the featured image is displayed inside the main content area, with the text wrapped around it. If we want our featured image graphic to display across the top of the post, above the content and post title, we just need to tell ClickBump theme to display our featured images above the post title (as opposed to the default, which is inside the content area). To do this, enable the option at “ClickBump > Images > Featured Images > Position > Above Title

Using Feature Image thumbnails in “Related Links” menus

One really useful benefit of adding featured images to your posts, is that ClickBump theme can be configured to list thumbnail versions of your featured images in the “Related Articles” menus that are shown below each post.

Enough with the theory, let’s see some of this in a real world website. Head on over to http://amazonia.clickbump.com to check out my example site that showcases this feature.

☝ Back to Top