This particular hybrid started out with me wanting to create a billboard banner for the home page of the Live Air Networks site that rotated through several user defined slides, each made up of a photos, graphical text and an action button.

With the site in Kentico best practice would dictate that each slide should be easily editable and configurable by the user. Add to this the requirement that prevents this from being a simple slider - that HTML text would be nice for SEO - and I faced an interesting challenge.

First thoughts

The first option that came to mind was data driven Flash. I have done a similar thing with XML data driven Flash on Rhino Machinery (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 librarys, but my feeling was that there must be a simple way to do this without having to draw upon external libraries, and weighing down the page.

After some serious brainstorming I came up with an approach which I will dub ”hybriding”, in which I use native Kentico Webparts, CSS and Graphics to produce the results.

How it works

Put very simply, I use a Scrolling Text web part which draws upon CMSArticle document types, and then by using custom CSS, a custom transformation, and a set size, I have it render the CMSArticle documents as rotating slides rather than plain text.

Choosing the Scrolling Text web part may seem strange, given that there are graphics included in each slide, but I chose this over the image slider because I wanted to have easily modifiable text.

It is possible to configure the Scrolling Text web part to render any size you want, so the only problem was I faced was getting the photo and the action button in.

To do this, I wrote a Custom Transformation which I named CMS.Article.ScrollingPreview and a Web part container which I named Banner Slider.

I then configured the Web part to show the Document type CMSArticle.

Customising the code

Here is what the code for the default Article transformation looks like:

<h1><%# Eval(“ArticleName”) %> </h1>
<%# IfEmpty(Eval(“ArticleTeaserImage”), “”, “\”””) %>
<%# Eval(“ArticleText”) %>

And here it is after I rebuilt it with the specific purpose of rendering a rotated slide.

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

To get the photo graphic in I use an outer div with a background image I pull from the Article Teaser Image.

I used an inline style for this so that I could put the macro in the style - I wasn’t sure this would work, but it did.

It’s worth noting that I had to build special images with white space for the text to fall on to with a nice fade effect.

Title and text

Next I worked on 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 looks like this:

/*#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 to use 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.

So now we have a slider that can edit the text, image and button text on from an easy form interface as well as easily add slides from the CMS desk.

Giving it a border

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;
}

Final Thoughts

I’m going to have a go next at building a “hybrid” control using the native Kentico repeater wrapped in some Mootools javascript, creating a slider with navigation buttons and text with links, after which I may move on to configuring JQuery UI for CMS desk producing editable tabs populated with articles.

The great thing about the hybrid approach is that the sky’s the limit. You can take what already exists and by playing with different variations create new effects is so many different ways.

Leave comment Subscribe Name: E-mail: Your URL: Comments: Subscribe me to this blog post Enter security code: Subscribe Leave comment Your e-mail: