Feature Box Setup

by Matthew on December 29, 2009

Optional in Thesis is the Feature Box, which allows you to create a box in your layout for featured content. In reality, however, it just gives you an empty box to be filled as you please. I have decided to fill this box using the Dynamic Content Gallery plugin for Wordpress, which I will use to display featured content of my choosing. My reason for choosing the Dynamic Content Gallery over the pretty Feature Content Gallery is all to do with the underlying Javascript libraries. The Featured Content Gallery utilizes SmoothGallery and Mootools, while the Dynamic Content Gallery gives you the choice of utilizing either SmoothGallery (with Mootools) or GalleryView (with JQuery). Investigating the source code of my Thesis-powered blog revealed Thesis already to be using JQuery, and so JQuery is the obvious way to go here, as mixing libraries — in this case, Mootools and JQuery — is usually a recipe for bad news.

Our first stop is Thesis’ Design Options, where we will drop the Feature Box controls. For now, I am choosing for Placement “Full-width above content and sidebars”. I am also choosing to show feature box on homepage only. Save your changes.

At this point, viewing your page shows that not much as changed. Your design should have been bumped a pixel, maybe a few. This is because the Feature Box is empty. We’ll soon do something about that. If you haven’t already done so, download, install and activate the Dynamic Content Gallery.

Accessing the Wordpress Settings menu, you will now find a new item for Dynamic Content Gallery. Access this area, then scroll way down through the many options to locate option box “5. Select Javascript framework (OPTIONAL)”. Tick the radio button for JQuery and Save Options (actually, the Mootools version seems to work just fine as well, though no telling whether it will cause future conflicts with other JQuery plugins and scripts).

The Feature Box is now on, as is the Dynamic Content Gallery (hereafter, “the gallery”). We now must place the gallery into the feature box. To do this, we must utilize Thesis’ hooks.

Access the Custom File Editor in the Thesis Options, or just load up the custom_functions.php file in your favorite editor via FTP.

Paste the following code into your custom_functions.php file, straightening quotes as necessary:

//featured content with dynamic content gallery plugin
function featured_content() {
if( function_exists( 'dynamic_content_gallery' ) ) :
dynamic_content_gallery();
endif;
}
add_action('thesis_hook_feature_box', 'featured_content');

Or, you can simply add this instead, as Ade explains in the comments below:

add_action('thesis_hook_feature_box', 'dynamic_content_gallery');

Regardless of your choice above, paste this code into your custom.css file:

.custom #feature_box {
padding-right: 0;
padding-left: 0;
}

Now all that remains is to populate your new Feature Box with content according to the instructions included with Dynamic Content Gallery. When adding a post to the feature box, you will need to create two custom fields: dfcg-image, used to specify the image to display in the gallery, and dfcg-desc, used to specify the description text to be used in the gallery. You can also specify pages to roll in the gallery, which I think is particularly cool.

{ 7 comments… read them below or add one }

Ade December 30, 2009 at 4:24 pm

Matthew,

Nice write-up, and the plugin looks good too. ;-)

Just a couple of comments regarding your code. (I suspect that any code I enter here will get stripped out, but I’ll try anyway…)

At its simplest, the DCG will work with just this in custom_functions.php:
add_action('thesis_hook_feature_box', 'dynamic_content_gallery');
Add the add_action call to the thesis_hook_feature_box hook, together with the DCG’s function, dynamic_content_gallery.

Using an intermediate function, as you have done, is “safer” in the event the plugin is deactivated, as no error messages will show. Having said that, in either case, you don’t need global $post (it doesn’t do anything here), and you don’t need the conditional check on is_home(). Simply check the homepage option in the Thesis Featured Box options and select “home page” in the DCG’s Settings Page’s Restrict Scripts options.

Using the jQuery script option does save a few kb in download, exactly for the reasons you stated – jQuery is already being loaded by the theme. However, I’m the first to admit that the mootools version gives a nicer looking gallery. For info, I’m in the process of upgrading the supplied jQuery script with one which more closely mimics the mootools script. This should be ready in time for v3.2 of the plugin, due out in January.

Your site’s looking good. Looking forward to reading more about your site build. :-)

Ade
http://www.studiograsshopper.ch

Reply

Matthew December 30, 2009 at 4:43 pm

Thanks for the tips, Ade. I’ve updated my code above and cited yours as an alternative.

You’re right the Mootools implementation looks a lot nicer (though the navigation arrows and lightbulb need to go; something I will take on later). I will definitely be looking forward to the 3.2 update to the plugin. Will it be a new implementation of GalleryView, or something completely different?

Reply

Ade December 31, 2009 at 6:14 pm

Hi Matthew,
I have a new jQuery script which has smoother transitions than the existing Galleryview script. This will be implemented in 3.2 in January. I was hoping that a new version of SmoothGallery (the mootools script) would have been released by now, but so far no news on this. In the meantime the plugin will continue to be shipped with both teh mootools and a jQuery script.
The “lighbulb” has been dropped for 3.2. :-)

Reply

Ade December 31, 2009 at 6:16 pm

I forgot to mention this: the current version (3.1) has an option to display an automatically generated excerpt from the Post or Page content. Saves having to create a dfcg-desc custom field. :-)

Reply

Doug Moore February 14, 2010 at 5:48 pm

I can not figure out how to get rid of this odd whitespace on my dynamic gallery plugin.. Any suggestions?

Reply

Matthew February 14, 2010 at 8:05 pm

In the gallery options, there’s a width setting. You could increase the width of your gallery to occupy the space. Otherwise, you might need to check your CSS to adjust the width of the containing DIV.

Reply

Silver February 17, 2010 at 6:15 am

Doug Moore – I would like to know how did you change your feature box height and width and also the (left-right) buttons?

I’m pretty noob, but I really wanna learn to use thesis into perfection :) So maybe you can help me.

contact me via email: sill88@hotmail.com or comment here. :)

I would really appreciate that.

Reply

Leave a Comment

Previous post:

Next post: