Add A Dynamic Nivo Slider to A Business Catalyst Site

Sliders are pretty popular these days. Almost every WordPress theme comes with some kind of slider that’s easy to manage in the back-end, but how do you add a slider to an Adobe Business Catalyst site and make it simple for your clients to update? Read on…

Nivo Slider

For this tutorial, we’re going to use the Nivo Slider from Dev7 Studios ( http://nivo.dev7studios.com ). There are tons of sliders available, but I really like this one and it’s SUPER easy to set up.

Since I’m a TERRIBLE designer, I’m going to use the styles from an awesome tutorial by Gilbert Pellegrom called Skinning the Nivo Slider. The only thing I had to change was the way I’m rendering the captions, which I had to change because of limitations with BC.

Demo

Source

The Setup

Ok, let’s set everything up on your page. I’m not going to get into all the details of page templates and all that… I’m assuming you’ve got that down pat, so you can go about adding jQuery, the Nivo slider javascript file and the Nivo slider CSS file however you want. Just make sure you call the nivoslider.js after jQuery and call the nivo-slider.css before your main stylesheet. I generally just drop the nivo-slider.css into my main stylesheet and save myself an http request.

Now let’s go into Business Catalyst and create a new web-app. I’m calling mine slider, but you can call yours whatever you want. You want to set up 3 fields: Slider Image (image, required), Slider Caption (text, optional), Slider URL (text, optional).

The Slider Image field will create an upload button so that your client can easily add images. You may want to set up a folder for slider images and show them how to select that folder when uploading. The Slider Caption field is self-explanatory, and the Slider URL will be the URL someone will be sent to when the slide is clicked on.

After you  set up the web-app, lets go to Advanced Layout Customization and edit the List View template for the Slider web-app. Delete everything in there, make sure you’re in the HTML editor and add this code:

The tag ‘slider image_value’ tells BC that we just want the URL for the image. Without that we would get the entire ‘img’ tag and that would prevent us from adding a title attribute to the image which is how we generate our captions. The ‘?Action=thumbnail&Width=630&Height=235′ tells BC to resize whatever image is uploaded to that particular size. That way you don’t have to tell your clients to make images a certain size, they can just upload whatever they want. Of course, they’ll still need to be conscious of proportions, but that shouldn’t be too difficult.

The part that says ‘&algorithm=fill_proportional’ just tells BC to keep everything proportionate so we don’t get crazy squashed images.

Now go to the page template that you want to add the slider to and add this markup where you want the slider to appear:

Inside of Business Catalyst, go to a page ( create a blank one, or use an existing one, it doesn’t matter. All we’re doing is grabbing a tag) and insert the list view module for the Slider web-app into the page. Make sure you’re in the HTML editor, cut the generated tag out and paste it into your page template in place of the comment “Module Code Here”. Your markup should now look like this:

Obviously, your module number will be different…

So that’s it for the markup… I told you it was SUPER easy! All we have left to do now is activate the slider. To do that, place the following snippet in your template file just before the closing HEAD tag:

Now go add some items to your Slider web-app and watch the magic unfold!

Feel free to let me know if you’re having any trouble figuring something out and I’ll be happy to give you a hand!

Technorati Tags: adobe business catalyst, jQuery, Nivo slider

About the author

Dallas area SEO Consultant, Front-end Web Developer, student of all things 'web', proud Bradley dad, dog lover and all around geek!

Related Posts

08/08/2010

How I Learned Web Development

Three years ago I was a TERRIBLE web developer! Check out my first site, built proudly with Microsoft Publisher!  (Yeah, that’s right… I’m not afraid to post my bad stuff! NOTE- This was done for a FRIEND. It was not a ‘professional’ job and I wasn’t paid.) I knew some HTML because I used to [...]

Read story

08/03/2010

Build a Custom Photo Gallery in Business Catalyst with jQuery, XML and Pirobox

If you’ve had the opportunity to work with Adobe Business Catalyst, you’ve no doubt found that it’s definitely got it’s pros and cons. One of the drawbacks I’ve come across pertains to the Photo Gallery module. I haven’t seen a way within the system to style the gallery so that all of the thumbnails are [...]

Read story