Formatting breadcrumbs and list items

One frustrating part of the WCMS templating system is that while an anchor can output two (or more) pieces of information (title and url), you must choose either to use the basic tag markup (standard <a> tag) or use the path and file name only option of the anchor. This presents challenges when you want both the url and page title, but want to add additional markup. This issue really comes into play with breadcrumbs and lists.

I recently wanted to change our base templates to have breadcrumbs that conformed to Google’s rich snippet standards. This requires a change in the markup generated by the anchor placeholder. After trying multiple different approaches, I finally found a workable solution using pre-execution.

Step 1 – Use techniques previously posted to get the full anchor tag into a pre-execute variable

While looping through the breadcrumb, I create an anonymous function which has a body of only a comment followed by the anchor tag placeholder. I can use the “toString()” method to get the whole function tag as a string and use a regular expression to extract only the original placeholder.

Step 2 – Parse the anchor tag and add the necessary attributes and tags

Once I have the anchor tag in a variable, I can then insert my new properties and tags into it’s markup. For convenience, I simply add the result to a javascript array.

Step 3 – Use VBScript to output the result

Javascript arrays have an extremely handy function “join” which concatenates each element in the array together separated by a provided string. I call the join function in a VBScript block as calling “Response.Write” in server-side Javascript doesn’t seem to work in pre-execution.

Final Code

<!IoRangePreExecute>
<script language="javascript" runat="server">
var PlaceholderValueRegExp =
    /^\(?function(\s+\w)?\s*\(\s*\)\s*\{\s*\/\/([\s\S]*)\}\s*\)?\s*$/i;
function GetPlaceholderValue(PlaceholderFunctionString) {
  var arr = PlaceholderFunctionString.match(PlaceholderValueRegExp);
  if (arr && arr.length && arr.length > 1) {
    return arr[2];
  } else {
    return "";
  }
}
//Array to hold each breadcrumb part
var BreadcrumbParts = [];
function FormatBreadcrumbPart(input) {
  //Remove leading and trailing whitespace
  var BreadcrumbPart = input.replace(/(^\s+|\s+$)/ig,"");
  //Sanity check to make sure we actually have the end of an HTML tag
  var TagEndIndex = BreadcrumbPart.indexOf(">");
  if (TagEndIndex > 0) {
    BreadcrumbPart =
        "<span itemscope itemtype=\"http://data-vocabulary.org/Breadcrumb\">" +
        BreadcrumbPart.substring(0, TagEndIndex) +
        " itemprop=\"url\"><span itemprop=\"title\"" +
        BreadcrumbPart.substring(TagEndIndex, BreadcrumbPart.length - 4) +
        "</span></a></span>";
  }
  return BreadcrumbPart;
}
</script>
<!/IoRangePreExecute>
<div id="Breadcrumb">
<!IoRangeBreadCrumb><!IoRangePreExecute>
<script runat="server" language="javascript">
BreadcrumbParts.push(
  FormatBreadcrumbPart(
    GetPlaceholderValue(
      (function({
         //<%BreadcrumbAnchor%>
      }).toString()
)));
</script>
<!/IoRangePreExecute><!/IoRangeBreadCrumb>
<!IoRangePreExecute><%=BreadcrumbParts.join(" &gt; ")%><!/IoRangePreExecute>
  &gt; <%Headline%>
</div>

About Sara Clark

Sara Clark is the Director of Web and New Media for Missouri State University. She oversees the organization, design and functionality of the university's web site and new media efforts. Sara has a MS CIS and over ten years experience in managing and implementing university web projects and procedures.
This entry was posted in Technical, Web and New Media and tagged , . Bookmark the permalink.

One Response to Formatting breadcrumbs and list items

  1. Jian says:

    Hi Chad,
    Excellent post!
    Since preexecution is resource intensive.  In cases where javascript is acceptable, it might actually be more convenient to use breadcrumb blockmark to out the breadcrumb and use javascript to regenerate the breadcrumb as one would like.
    -Jian