"Hybriding" in Kentico

In this article I will introduce a new approach I have been using in Kentico configurations. This particular case involves a slider I configured for the LiveAir Networks site. The task seemed pretty straightforward in the web 2.0 world. I wanted to create a billboard banner for a home page that rotated through slides that included photos, graphics text and an action button. Of course, the site is in Kentico CMS and best practices would dictate that the slides be editable and configurable and html text would be nice for SEO. The first option that came to mind was data driven flash. I have done a similar thing with xml datadriven flash - http://tinyurl.com/ycvnpw6 . My problem in this case is that the client wanted to avoid Flash for a variety of reasons. The next option I looked at was one of the really nice sliders available in the MooTools or JQuery library. The problem with this approach would be making it easily editable by the user. After some serious brainstorming I came up with an approach which I will dub"Hybriding". In this approach I used native Kentico Webparts, CSS and Graphics to produce the results. What I am about to explain is how I ended up with the banner that went on the site's home page - http://tinyurl.com/liveair.

[screenshot of page]

The Web part I chose for this task was the Scrolling Text Web part. That may sound confusing, since there are graphics in this configuration. The reason I chose this over the image slider was to have easily editable text. It is possible to configure this control to any size you want, so all I had to work out was getting the photo image and the action button in.  I configured the Web part to show the Document type CMSArticle, the reasons for that will become apparent. I knew what size the container had to be so I wrote a Custom Transformation which I named CMS.Article.ScrollingPreview and a Web part container which I named Banner
Slider.

I took a look at the code for the default Article transformation:

 <h1>
<%# Eval("ArticleName") %> </h1>


<%# IfEmpty(Eval("ArticleTeaserImage"), "", "") %>
<%# Eval("ArticleText") %>

Then in the CMS Site Manager I built the new one:

<div style="background: #fff url(<%# GetFileUrl("ArticleTeaserImage") %>) top left no-repeat; height:250px; width:565px;">
<div class="scrollingpreviewtxt">
<h2>
<%# Eval("ArticleName") %></h2>
<p class="content"><%# Eval("ArticleTeaserText") %></p>
</div>
<div class="buttonimg">
<%# Eval("ArticleText") %>
</div>
</div>

As you can see to get the photo graphic in I use an outer div with a background image which I pulled as the Article Teaser Image. I used inline style for this so that I could put the macro in the style - I wasn't sure this would work, but it did. Now the user can edit the image. Of course I had to build special images with white space for the text to fall on to with a nice fade effect.  Next comes an inner div to hold the title and text, all of which get their styling from the CSS already in place. The CSS for the transformation is:

/*#Transformations/Scrolling Preview#*/

.scrollingpreviewtxt /*inner div to hold the text*/
{
width:240px; 
height: 220px; 
padding-left: 20px;
}

.buttonimg /*the button*/
{
position:relative;
bottom:10px;
left: 435px;
width: 85px;
height: 30px;
background:transparent url(/App_Themes/liveair/images/reg_button.png) top left no-repeat;
padding-top: 7px;
margin:0;
float:left; 
text-align:center;
font-size: 12px;
font-weight: bold;
}

.buttonimg a, .buttonimg a:hover /*needed to add this to the button hover - it inherited the rest*/
{
font-weight: bold;
}

One sneaky thing I did was using the Teaser text of the Article for the text in the body of the slide and the
Article text for the text in the button, wrapping it in the buttonimg div to make it an action button. Now the
client has a slider that they can edit the text, image and button text on from an easy form interface and easily
add slides from the CMS desk. How cool is that!

To hold it in place and give it a border a simple Web part container containing this div id:

#photobox
{
position:relative;
top: 0;
left: 20px;
width: 565px;
height:250px;
margin: 0;
background:#eeeeee;
border: 2px #cccccc outset;
padding: 0;
float: left;
clear:both;
} 

All set!
Later I will do a post on a "hybrid" control using the native Kentico repeater wrapped in some Mootools javascript to create a slider with navigation buttons and text with links, then on to configuring JQuery UI for CMS desk editable tabs populated with articles. Stay tuned!