Thesis Tutorial Rotating Contextual Banner in Feature Box
This Thesis Tutorial shows step by step how to add rotating banners to the Feature Box. The Feature Box has a drop down menu from where you can choose the position of the banner. In function of that choice you will then edit the images (size).
The Thesis Feature Box in Action
The below image illustrates the result you will achieve by following this tutorial:
As you see my choice was to add the rotating banners in full width underneath the menu. The Header Banner is above the menu. Using a large size banner, I decreased the size of the header banner. On the right side you see the Multimedia Box underneath the rotating banners.
My Banner size is 960 pixels x 278 pixels.
Semomantics Thesis Author Blog
Semiomantics Author Blogs have all scripts built in and you can skip the following steps which are market with a *.
Get the Dynamic Content Gallery Plugin *
From your dashboard under Plugins, select Add Plugin. Type into the search box “Dynamic Content Gallery” and install and activate the pugin.
Add the Function to Thesis *
Edit custom-functions.php from your Custom File Editor and add the following code:
//-------------------featured content--------------
function featcc() {
if (is_home()){
global $post;
if( function_exists( 'dynamic_content_gallery' ) ) :
dynamic_content_gallery();
endif;
}
}
add_action('thesis_hook_feature_box', 'featcc');
With this code we hook the Dynamic Content Gallery to the Thesis feature box for display. Also, the feature box displays on the home page only, as on the other pages we use the Top Carousel.
Configure the Dynamic Content Gallery Plugin
You may choose another configuration. As an example I just copy here what my set-up looks like. Edit the Dynamic Content Gallery from your Dashboard under “Settings”:
1. Image Management
I select Full URL to keep absolute flexibility about the image source; this could be an external link to an image server. In fact I just load my images to the main image folder in the domain root.
2. Gallery Method
To keep the image and gallery management simple, I created a new category called Featured Main. All posts which will have a featured banner, will also be added to that category. Therefore I select here “One Category”.
Scroll further down and you will find more options:
As you see, I selected the Featured Main Category and I choose to display 4 posts.
3. Descriptions
For reasons of laziness I keep the setting on Auto and display 100 signs. In fact, my posts are usually structured in a way that the automatic excerpt has some meaning…:-).
4. Gallery CSS
Just a copy of my settings:
5. Javascript Options
I select jQuery and I show the carousel with the banner (it’s the drop-down overlay on top right of the banner which displays thumbnails of the banners). You may give that tab a more interesting name than Featured Articles, for example: Must Read. Note that I deselect the left and right arrows which serve to scroll the banners; I just think they are not necessary and ugly.
6. Load Scripts
As we display the banners on the home page only, I select Home Page to load the script only where needed.
7. Tools
I don’t display Error Messages and enable the editing box in the page and post editor as follows:
You will now be able to add banners from your WordPress editor to your post or to overwrite some of the configuration settings.
8. Load some Banners
I just headed over to Photoshop and made a few banners which I uploaded to my main image folder:
As I have configured to display 4 banners, the above four will do the trick.
Now I select 4 key posts from my blog and edit them:
I add the Featured Main category to all of them and then I add the corresponding banner image link to each post and update the post:
10. Time to enable the Feature Box
In your Design Options toggle Feature Box and select the position:
I select Full width above content and sidebars. The home page selector is not active as we have overwritten the function in custom-functions.php.Also the Display Options are not built into Thesis yet, however if you wish to style the box, do the last step below:
11. Style your Feature Box
If you would like to get rid of the light gray background and the borders or style the box differently all together, just add the following few lines to your custom.css from the Custom File Editor:
/*----------------Feature Box-------------- */
.custom #feature_box { background: #ffffff; border-style: solid; border-color: #fff; }
I have set it all to white here, but you may modify and adapt to taste and amend this CSS code as needed.