Features Gallery

The Features Gallery is a constantly transitioning rotation of your latest feature posts with a large image, title, and excerpt. This is done by using Smooth Gallery.

Follow the steps in this tutorial closely as there’s a lot of details you’ll want to note.

Setting up your features gallery

The first thing you need to do is go to your WordPress dashboard to Appearance > Options Settings. From there, you’ll be able to select how and where your Features Gallery will be displayed.

First, find the section labeled Home Page Settings. Choose Features Gallery for one of the five Home Sections. Only choose it once.

After selecting Features Gallery for a Home Section, you need to decide how it should work.

Scroll down until you find the section labeled Features Gallery.

There’ll be two drop-down selection boxes labeled Category and Tag. Choose EITHER a category OR a tag. The category will override the tag setting, but it’s best to only choose one to avoid confusion. The category/tag you choose will be where your posts are pulled from.

Then, you need to input the number for Posts Wanted. This tells the theme how many feature posts to display. You must at least have two posts. The default (and recommended) setting is three.

Once that part is completed, you only need to scroll down and click the Update Options button.

Setting your feature image

Once you’ve chosen your settings for the Features Gallery, you’ll want to write your first post.

Important Note: You’ll need at least two feature posts for the Features Gallery to work correctly.

You’ll first want to write some great content to go along with your feature post. It is a feature, after all.

Once you’ve written your content, you’ll need to click the Upload Image button. Then, you need to select and copy the File URL (image URL).

You can also use any image URL, so you don’t technically have to upload an image here.

Once you have your image URL, you have two choices:

1. Let the image script grab the image for you automatically (only if you’ve uploaded the image when writing this post).
2. Input the image URL into a custom field (recommened), which is what I’ll show you how to do next.

So, we’re going to add our image by custom field here. Since you’ve already copied your image URL, you need to find the section labeled Custom Fields.

In the Key box, type Feature Image (this is case-sensitive, so make sure you type it exactly as is). In the Value box, paste your image URL. Then, click the Add Custom Field button.

It’s as simple as that. Now, you’re almost done.

Tagging/categorizing your feature post

Remember when we selected a category OR tag for our Features Gallery back in the first step?

Well, that’s pretty important now.

You need to type the Tag or select the Category that you set earlier.

All you have to do is save your post and you’re done. You can now view your Features Gallery in full glory (assuming you’ve written at least two feature posts).

Troubleshooting the Features Gallery

There are three very common things that go wrong with the Features Gallery, and I’m always correcting these three mistakes.

The first is people not having an image associated with their post. Go back through your post and make absolutely sure that you’ve added images to all of your feature posts.

You can even look at your home page’s source code to see. If you haven’t added an image, this message will show in your source code:

<!-- No images were added to this post. -->

The second most common problem is conflicting JavaScript from other plugins. If you know that one of your plugins adds JavaScript to your site, you need to deactivate it (or all of them). If you don’t know if JavaScript is being added, deactivate your plugins to see if any are conflicting.

If a plugin is making the Features Gallery stop working, then you have to choose between it or the Features Gallery. There are no alternatives here.

I will go ahead and tell you that Prototype (JavaScript library) will break the Features Gallery.

The third most common mistake is only having one feature post. This should not be a problem any longer as I’ve mentioned that you need at least two feature posts several times in this tutorial.

Other problems I’ve encountered are:

• Not installing Options correctly.
• Renaming the /options folder (a major No-No!).
• Selecting a category instead of tag when a specific tag was originally chosen in Options Settings.
• Adding a tag instead of category when a specific category was originally chosen in Options Settings.

Using a different transition between posts

If you change this, you need to set up your child theme with the appropriate files. Ask how to do this in the support forums before you start editing things.

To use a different transition between each feature post, look in /includes/features-gallery.php. Look for this code:

<script type="text/javascript">
	function startGallery() {
		var myGallery = new gallery($("myGallery"), {
			timed: true,
			delay: 6000,
			showArrows: true,
			showCarousel: false
		}); }
	window.onDomReady(startGallery);
</script>

In particular, we need to focus on this area:

		timed: true,
		delay: 6000,
		showArrows: true,
		showCarousel: false

To change the gallery to show a fading slide left transition, change it to this:

		timed: true,
		delay: 6000,
		defaultTransition: "fadeslideleft",
		showArrows: true,
		showCarousel: false

Here are some different values for defaultTransition:

fade
crossfade
fadebg
fadeslideleft
continuoushorizontal
continuousvertical

Try them out; play around with them.

Using different custom field keys

Maybe you’ve used a theme with a different custom field key for feature images before. You might not want to go back through and redo all those images. So, we’ll just change the code to reflect your previous custom field key.

Here’s what the call for the image looks like in /includes/features-gallery.php:

<?php echo get_the_image(array('Feature Image','Full','Feature Full'), 'full'); ?>

You can easily change this to:

<?php echo get_the_image(array('My Key','featureimg','article_image'), 'full'); ?>

Known issues with the beta releases

Issues with the Beta releases
There seems to be a bug with IE6 and IE7. The paragraph text or, in our case, the excerpt doesn’t display. There may be a few workarounds, but I’d rather wait to update when the gallery script is updated.