Create a grafical teaser overviewpage in RedDot CMS using the Navigation Manager and a bit .NET Scripting

ATTENTION! update 2008-03-04 –  This workaround is no longer proposed! I tested it and it worked fine until you start sorting in navigation manager. After that the sorting result is completely different in the navigation manager than the sorting inside the list in RedDot CMS SmartTree view!

This proposed workaround came from RedDot itself. Thanks for that. I did another workaround, a bit more complex and with RQL but it fits my needs. Its a mix of RQL and AJAX. If you are interested in this solution please write me and maybe I will write an article.

Sorry for those who had trouble through that code. It doesn’t satisfy but my client and me had to find this out on the hard way on ourselfs. Oh damn, why is RedDot sometimes so ugly to developers?

The navigation manager is great. Ok, in the beginnings there were some major bugs but today I am convinced that it is a good step in the right direction.

Now what I wanted to realise this week was a navigation overview page with a headline, a link(of course) to the following page, a bit teasertext and something totally new: an image(!)

All that stuff should be grabbed from the following page. There are a few possible ways to find a solution. But also many problems.
First I tried to create the overview using rendertags - and failed. There is today no possible way to use the render tags for image listing. It works for simple use but you can’t scale the image. And that is for me a neccessary property of a teaser. Another problem with .NET based navigation manager navigations is, that you will get the list, when you implement it in your template code but it is always reverted. Always? Yes! Always! And this is not a bad thing, it’s great, so I started to build my list:

This is the simple RedDot Templatecode:

<ul id="teaserBlocks">
  <!IoRangeList> // link image and headline
   <li><h2><a href=”<%lst_overview%>”><%hdl_page%></a></h2>
   <a href=”<%lst_overview%>”><%img_teaser%><br />
   <%std_teaser%></a>
  <!/IoRangeList>
</ul>

Nothing complex, it’s a RedDot list I’m using here. Works fine, you can even edit the elements in list view if you insert your RedDots.
But due the fact, that it is the Navigation Manager list you are using, the output is still given reverse.
That means my navigation manager list which looks in the navigation manager like this:

  • Alpha
  • Beta
  • Cebra(?)

will be displayed as “in template”-list like this:

  • Cebra(?)
  • Beta
  • Alpha

And this is of course not acceptable. Am I talking to much? Faster? Ok, I will go on.

Based on the fact that you know how to use .NET inside a RedDot CMS project and how this affect performance especial in combination with using PreExecutes here’s my solution for that problem. (huh, again such a sentence..)

Ok, the solution - Please try this but I can’t give you any warranty, that this works or that this is the final perfect solution.
So use it at your own risk. This is the c# based solution template:

<ul id="teaserBlocks">
<!IoRangePreExecute><%
  // this code generates the block overview with 3 images and text in a ow
  Hashtable ht = new Hashtable();
  int i = i;
  <!IoRangeList> // feed data to hashtable
   ht.Add(i.ToString(), “<%lst_overview%>|<%img_teaser%>|<%hdl_page%>|<%std_teaser%>”);
   i++;
  <!/IoRangeList>
  Response.Write(RDTools.RevertNavigation(ht));
%><!/IoRangePreExecute>
</ul>

This is the .NET code you need. am using a hashtable. The problem with a hashtable is, that you can’t sort it. So I use as the key the counter of my list. The value is the string with the linkdata. Next thing is to send this to my function. And here it is.

// .NET 1.1 - C# Code

public static string RevertNavigation(Hashtable htInput)
{
  string strNavigation ="";
  string[] arItems = new string[4];
  char[] splitter = {'|'};

  // split the string seperated by pipe "|"
  string[] arItem = new string[4];
  // and create an array object with my hashtable-keys
  ArrayList laKeys = new ArrayList(htInput.Keys);

  laKeys.Sort(); // sort array
  laKeys.Reverse(); // revert array

  // walk through the sorted array
  foreach (string key in laKeys) {
    arItems = htInput[key].ToString().Split(splitter);
    // build LI and headline with link
    strNavigation+= "<li><h2><a href=\"" + arItems[0] + "\">";
    strNavigation+= arItems[2] + "</a></h2>";
    strNavigation+= "<a href=\"" + arItems[0] + "\">";
    strNavigation+= "<img src=\"" + arItems[1] + "\" alt=\"" + arItems[2] + "\" />";
    strNavigation+= "<span>" + arItems[3] + " >>></span></a></li>";
  }
  return strNavigation;
}

Questions? Suggestions? Next stepI am developing is the usage for several image sizes, smaller stuff like alternating li-classes and other nice things…

Feel free to use my code. Enhance it, publish it, share it. And tell me what you think about it.

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.67 out of 5)
Loading ... Loading ...

4 Reaktionen zu “Create a grafical teaser overviewpage in RedDot CMS using the Navigation Manager and a bit .NET Scripting”

  1. Daniel Kasimirowicz

    Markus,

    ich finde es wunderbar, dass du dein KnowHow der Öffentlichkeit zur Verfügung stellst. Der Tipp ist super, mal gucken, ob ich das brauchen kann. Ich bekomme den NavMan leider nicht richtig in unser bestehendes Projekt hinein. Der RD-Support ist schon eingeschaltet.

    Weiter so !!!
    Daniel

  2. Die Milch machts

    Hört sich gut an… bin auf die weiteren Ergebnisse gespannt ;-)

  3. Morgan Ritchings

    Hey Markus,

    Great piece of example code!

    - Morgan