Forums (Obsolete)

Member

dcollins-marketwired - 1/21/2014 11:22:45 AM

Adding navigation to a slider

I've used other CMS tools but am new to Kentico so I'm exploring now.

I've been tasked with adding navigation "dots" to a slider/repeater/carousel on the home page in our Kentico-enabled website. (Commonly, a homepage carousel would have controls (usually in the form of horizontal dots) allowing the user to override the auto-refresh, so they can view or activate a specific image. This carousel does not have any controls).

So I have to figure out how to add them.

It seems to be a customized Widget, though I am not exactly sure what widget it's customized from. It's called a hero-slider and a repeater. In the Configure Widget Properties Dialogue Transformation field, it points to a file that contains the following snippet (this is for your benefit, to give you a hint as to what type of widget it might be):

C:\inetpub\WeRCodez\CMSTransformations\WRC\Hero\Default.ascx

<div class="hero">
    <div class="hero-img">
        <%# IfEmpty(Eval("Image"), "", "<img alt=\"" + Eval("Title") + "\" src=\"" + Eval("Image") + "\" />") %>
    </div>
    <div class="wrap hero-bd">
        <div class="box box_narrow box_offset box_offset_sml">
... etc.

Anyway, my question is: how do I go about adding these nav dots and putting functionality behind them? Can I add some extra HTML/CSS to the existing Widget and have it float over the image? Do I make the dots into links, then add code to the Default.ascx file above?

Thanks.

Member

dcollins-marketwired - 1/21/2014 12:20:50 PM

RE:Adding navigation to a slider

It's not too hard to add some HTML/CSS to get the dots to appear statically - the tricky parts are:
1 rendering as many dots as there are slides
2 figuring out how the links will work

That file above is prefixed with this, if it helps:

 <%@ Control Language="C#" AutoEventWireup="true" Inherits="CMS.Controls.CMSAbstractTransformation" %>
<%@ Register TagPrefix="cc1" Namespace="CMS.Controls" Assembly="CMS.Controls" %>

Kentico Legend

Brenden Kehren - 1/21/2014 1:42:05 PM

RE:Adding navigation to a slider

You can use the out of the box webpart Content slider. There is a built-in navigation structure. All you need to do is style it.

The alternative is to use a plug-in. I like the bx-slider. What I do then is place a repeater on the page to display all the sliders. Then place another directly below that renders the navigation items as needed. Sure it might be an extra call to the database but it allows it to be fully dynamic.

Member

dcollins-marketwired - 1/21/2014 2:21:42 PM

RE:Adding navigation to a slider

Well, the slider is already here. I'm so close I'd hate to have to tear it out and replace it.

As it is, I'm just trying to find the file that references this one (which it seems to do with every slide) so I can figure out how to build in a slide counter:

C:\inetpub\WeRCodez\CMSTransformations\WRC\Hero\Default.ascx

 <%@ Control Language="C#" AutoEventWireup="true" Inherits="CMS.Controls.CMSAbstractTransformation" %>
<%@ Register TagPrefix="cc1" Namespace="CMS.Controls" Assembly="CMS.Controls" %> 

<div class="hero">
    <div class="hero-img">
        <%# IfEmpty(Eval("Image"), "", "<img alt=\"" + Eval("Title") + "\" src=\"" + Eval("Image") + "\" />") %>
    </div>
    <div class="wrap hero-bd">
        <div class="box box_narrow box_offset box_offset_sml">
... etc.

Member

dcollins-marketwired - 1/21/2014 4:19:46 PM

RE:Adding navigation to a slider

Ok, making slow progress. I've found the ascx file that the above aspx file is dependent on:

C:\inetpub\WeRCodez\CMSWebParts\WRC\ContentHero.ascx

using System;
using CMS.CMSHelper;
using CMS.GlobalHelper;
using CMS.PortalControls;

public partial class CMSWebParts_MarketWire_Hero : CMSAbstractWebPart
{
    public string Title 
    {
        get { return ValidationHelper.GetString(GetValue("Title"), string.Empty); }
        set { SetValue("Title", value); }
    }
    public string Description 
    {
        get { return ValidationHelper.GetString(GetValue("Description"), string.Empty); }
        set { SetValue("Description", value); }
    }
    public string Image
    {
        get { return ValidationHelper.GetString(GetValue("Image"), string.Empty); }
        set { SetValue("Image", value); }
    }
    public string Color
    {
        get { return ValidationHelper.GetString(GetValue("ColorClass"), string.Empty); }
        set { SetValue("ColorClass", value); }
    }
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        if (StopProcessing)
            return;

        if (string.IsNullOrEmpty(Title))
            Title = CMSContext.CurrentDocument.DocumentName;

        ColorClass.Text = Color;
        TitleControl.Text = Title;
        DescriptionControl.Text = Description;

        if (string.IsNullOrEmpty(Image))
            ImageControl.ImageUrl = ResolveUrl("~/App_Themes/MarketWire/images/hero/hero-1.png");
        else
            ImageControl.ImageUrl = ResolveUrl(string.Format("~/getfile/{0}/pageimage.aspx", Image));
        ImageControl.AlternateText = Title;
    }
}

But this just moves the mystery back a little. THIS file is ALSO called once for each slider. So the question remains: where is the LIST of data that is being looped through? Is it the result of a search for 'hero' assets?

Kentico Legend

Brenden Kehren - 1/22/2014 7:02:01 AM

RE:Adding navigation to a slider

Typically a webpart is set to display a list of items. What you're stating is this is called once for every slide in your slider? Doesn't seem very efficient. My suggestion would be to use a repeater webpart and get the content from your content tree.

Here is a quick definition of what you're seeing:
The C:\inetpub\WeRCodez\CMSTransformations\WRC\Hero\Default.ascx file is a transformation.

The C:\inetpub\WeRCodez\CMSWebParts\WRC\ContentHero.ascx file is a webpart.

Say you want to display a list of colors. Right now you have 5 colors in your list but at any given time it could be 2 or 10 or 100 colors. From a dynamic standpoint the repeater is your best tool for the job. A repeater has a header, item, alternating item, selected item and a footer.

When you set the webpart on the page you define the header and footer within the HTML Envelope (content before and after). Then you specify a item, alternating item and selected item transformations. Your repeater will then generate the below HTML

<!-- HTML Envelope content before -->
<div class="hero-slider">
  <ul>
  <!-- end HTML Envelope content before -->
    <!-- begin item transoformation -->
    <li>
      <p>red</p>
    </li>
    <!-- end item transoformation -->
    <!-- begin alt item transoformation -->
    <li class="alt">
      <p>green</p>
    </li>
    <!-- begin item transoformation -->
    <li class="alt">
      <p>yellow</p>
    </li>    
    <!-- end item transoformation -->
  <!-- begin HTML Envelope content before -->
  </ul>
</div>
<!-- end HTML Envelope content before -->

So as I suggested earlier, it might simply be in your best interest to add another repeater to gather your items again and create that "button" list. If your content is in the content tree and not hard coded this can be done, with styling, in about 10-20 minutes at the most. Doing this will allow you to still have your existing webpart and not have to mess with any of that code. You simply create a new list you style.

Again, I don't know your setup but this can easily be done in Portal Engine mode in about 10-20 minutes.

Member

dcollins-marketwired - 1/22/2014 8:25:08 AM

RE:Adding navigation to a slider

"What you're stating is this is called once for every slide in your slider?"

No, I'm not suggesting my slider is different from any other slider; let's assume that what I've got here is a typical out-of-the-box slider (Is there a slider webpart?). I'm trying to figure out where it's populated. I can't find the list of data that the slider uses. (eg. how do I add a new picture in?)

If they had used a repeater instead of a slider, what I would be looking for is the HTML you provided above, which actually contains the raw data (red, green, yellow). Since this is a slider, I'm presuming somewhere there's an editing control that contains some sort of data like this:
image: img1.jpg, link: link1.com, text: text1, colour: red;
image: img2.jpg, link: link2.com, text: text2, colour: green;
etc.

Because what I need to do is add a counter: imageCount = imageCount + 1;

Member

dcollins-marketwired - 1/22/2014 9:12:55 AM

RE:Adding navigation to a slider

I checked out repeater, but it's a different animal. It's really meant more for a list of articles, and it lists them all on-screen one after-another. (I'm certain it can be customized to do what I want, but that seems excess effort to start from a tool that's not really suited).

This slider currently cycles through a half dozen pics automatically. What it does NOT do is provide the little navigation dots that most sliders have (see screenshot below). I have added the HTML to put them there, and there's even ASP references to variables:

<div class="hero-img">
        <%# IfEmpty(Eval("Image"), "", "<img alt=\"" + Eval("Title") + "\" src=\"" + Eval("Image") + "\" />") %>
    </div>

and an HTML envelope:
Content before: <div id="HeroContainer" class="heroArea hero-slider">
Content after: </div>

There's even a little C# snippet which provides 'Image', 'Title' variables:

using System;
...
public partial class CMSWebParts_MarketWire_Hero : CMSAbstractWebPart
{
...
    {
        get { return ValidationHelper.GetString(GetValue("Image"), string.Empty); }
        set { SetValue("Image", value); }
    }
...
    protected override void OnPreRender(EventArgs e)
    {
...
        if (StopProcessing)
            return;
       Title = CMSContext.CurrentDocument.DocumentName;
       ImageControl.ImageUrl = ResolveUrl(string.Format("~/getfile/{0}/pageimage.aspx", Image));
    }
}

I think it's in there that I need a counter.

Screenshot (elements added but not yet active):
User image

Kentico Legend

Brenden Kehren - 1/22/2014 9:44:29 AM

RE:Adding navigation to a slider

Understand what you're saying 100%. I believe its just a difference in what you know and don't know. Most sliders work of of some type of list or group of elements. Could be an unordered list (< ul >) or a < div > with a bunch of nested < div > elements. A repeater will allow you to iterate through those items and display them as needed on the page based on the content you are adding. I use this approach without a custom webpart on every site that I create that requires a slider, carousel, etc. A repeater can be used for any document type or any data source really, its pretty powerful.

I choose to set my sites up with a custom document type that allows a user to simply fill out a form (title, text, image, link) and the rest is automatically done/formatted for them.

Your setup looks like the images are added within the widget manually by uploading/selecting an image from there and not a document in the content tree. The downside from this is your content is somewhat manual, meaning you can't access it from other pages or controls. So you'd have to setup the "click" events manually for your navigation and images. Whereas with the repeater approach, it would be coded one time and automatically created based on the number of documents you have.

So to answer your question, you might find the images are added by using the WYSIWYG editor by clicking the image icon. You could see more details if you click on the Detail tab vs. the Edit tab when in the CMSDesk. If you don't see that, it could be they are in the content tree under the document displaying them but I'm guessing not.

Member

dcollins-marketwired - 1/22/2014 9:54:35 AM

RE:Adding navigation to a slider

FroggEye wrote: Most sliders work of of some type of list or group of elements. Could be an unordered list (< ul >) or a < div > with a bunch of nested < div > elements.

I choose to set my sites up with a custom document type that allows a user to simply fill out a form (title, text, image, link) and the rest is automatically done/formatted for them

The Widget Properties has a 'Content Filter' section, whose 'Document types' is set to 'MW.Hero'. Presumably, it is pulling all images from the asset collection with that tag. What I don't get is where it's getting the rest of the data from (title, link, etc.) Like with your <ul>, it's got to be listed somewhere, but where?

Member

dcollins-marketwired - 1/22/2014 10:30:33 AM

RE:Adding navigation to a slider

So close now!!

By enabling paging, like this:

I am able to get the links I need, like this:
User image

which, with some fancy CSS footwork, gets me the dots I want, like this:
User image

which is perfect!

Except one thing.

Enabling page navigation has disabled the auto-refresh. Now the user can ONLY change manually; it no longer fades from one pic to the next every 5 seconds or so.

sigh...


Member	dcollins-marketwired - 1/22/2014 10:39:26 AM RE:Adding navigation to a slider As per: http://devnet.kentico.com/docs/webparts/index.html?RepeaterWithCarousel_overview.htm "Enable paging: Indicates if the displayed data should be paged. Please note that paging may in some cases interfere with the effect generated by the web part." Gotta defeat that.

Kentico Legend

Brenden Kehren - 1/22/2014 12:19:42 PM

RE:Adding navigation to a slider

dcollins-marketwired wrote: The Widget Properties has a 'Content Filter' section, whose 'Document types' is set to 'MW.Hero'. Presumably, it is pulling all images from the asset collection with that tag. What I don't get is where it's getting the rest of the data from (title, link, etc.) Like with your <ul>, it's got to be listed somewhere, but where?

Widgets are extensions of webparts. So you need to find the widget definition and/or the webpart definition in the Site Manager and see if they are defined there. If so, you should be able to change them without a problem.

Certified Developer 10

josha-bpstudios - 1/22/2014 12:32:04 PM

RE:Adding navigation to a slider

It sounds like what is needed is a different transformation. This is what each of the items will follow when being rendered. You could attach an active class to the first item here and then the rest can be inactive or whatever(depends on the plugin being used). This is where you can build your list with the items in the repeater and have your slider plugin control them.

Member

dcollins-marketwired - 1/22/2014 1:33:50 PM

RE:Adding navigation to a slider

josha-bpstudios wrote: It sounds like what is needed is a different transformation. This is what each of the items will follow when being rendered. You could attach an active class to the first item here and then the rest can be inactive or whatever(depends on the plugin being used). This is where you can build your list with the items in the repeater and have your slider plugin control them.

I do not understand this.

(What Kentico seems to call a transform, I would call a template - so, static HTML with some placeholder variables.) I'm not sure what you mean by an active class or why others would be inactive, or how that helps with what I'm trying to do.

Certified Developer 10

josha-bpstudios - 1/22/2014 3:01:28 PM

RE:Adding navigation to a slider

The transform handles looping. Basically for each document of the type that you specify, it will output the code that you have in your transformation and resolve items and macros in it. If you configure a repeater webpart to show a specific document type(for example cms.news) and then in your transformation you could have Eval("NewsName") and add html for divs or classes where needed. Then every news article(document) is loaded in and you will get a list of the news articles names. This can be built out to be as complex as you would like. If the item is a document type in the system, or it can be one, then I would recommend doing it this way and then the user could add items and that would be handled through the transformation.

Member

dcollins-marketwired - 1/22/2014 1:29:58 PM

RE:Adding navigation to a slider

FroggEye wrote: Widgets are extensions of webparts. So you need to find the widget definition and/or the webpart definition in the Site Manager and see if they are defined there. If so, you should be able to change them without a problem.

How does one find a widget definition? I'm looking in Site Manager but (as with all CMS tools) the connections between content and functionality are magical i.e. you cannot follow the code from one to the other. And Site Manager is a very BIG place, with tabs such as Page, Design, Form and Properties.


Member	dcollins-marketwired - 1/22/2014 1:43:07 PM RE:Adding navigation to a slider Ohhh! That's what THIS is: THAT's the actual content that populates the widget.

Member

dcollins-marketwired - 1/22/2014 2:16:47 PM

RE:Adding navigation to a slider

And I have found this:
C:\inetpub\WeRCodez\App_Themes\WRC\scripts\global.js

// Pass reference to jQuery and Namespace
(function($, APP) {

    // DOM Ready Function
    $(function() {
        APP.OfficeMap.init();
        APP.Toggles.init();
        APP.Form.init();
        APP.Modal.init();

		$('.slider-items').cycle({
			slides: '.media',
			pager: '.slider-pager',
			prev: '.sliderControl_prev',
			next: '.sliderControl_next'
		});
		$('.hero-slider').cycle({
			slides: '.hero',
			fx: 'fade',
		        speed: 800,
			timeout: 6000,
		});
        
    });

This does indeed operate the hero refresh effect. Changing the timeout value changes my slide frequency.
So, I know what is being turned off, now I juut have to figure out why, and how to stop it from being turned off.

Member

dcollins-marketwired - 1/22/2014 2:36:39 PM

RE:Adding navigation to a slider

And here's why it stops paging:

Source code when the auto-refresh is working. Nine "hero cycle-slide cycle-slide-active" divs, 8 of which are hidden:

User image

Source code when I enable paging. A big-ass pagination div, and only one "hero cycle-slide cycle-slide-active" div:

User image

So it's not "simply" a matter of re-activating the auto-refresh function. The paging function is actually generating the elements differently. That's bad news for me.


Member	dcollins-marketwired - 1/24/2014 8:42:42 AM RE:Adding navigation to a slider OK, problem solved and lesson learned. This slider is actually a jQuery plugin called cycle - took me a bit of digging to uncover that. So, nothing to do with Kentico. The cycle plugin has its own configurable pager.