How to manage Quotes, Placeholders and Pre-Execute using VBScript within RedDot CMS / Open Text Management Server

This is another great guest post by Chad Killingsworth from the Missouri State university. Chad is another RedDot Guru who comes up with neat solutions every now and then and also integrated the TinyMCE texteditor into Open Text Websolutions Management Server RedDot CMS.

A frequent task in RedDot Open Text CMS template construction is to assign the value of a placeholder to a string so you can perform some kind of logic on it.
Most of the time we get along very well with our beloved content management system, but sometimes we wouldlike to add some kind of special characters to our standard text elements. And this works fine for 99%, no matter what we do, we can add a copyright-character, trademark, .. pretty much everything.

But one thing always breaks, and this is not even RedDot’s fault, it’s a simple ASP or VBScript flaw. Take this example:

<!IoRangePreExecute>
<%
  dim label
  label = "<%stf_Label%>"
%>
<!/IoRangePreExecute>

If the <%stf_Label%> placeholder happens to contain an un-encoded quote, you'll get a server error. But sometimes you just really NEED a quote in the value. How do you handle this?

Strange Bedfellows

Server side JavaScript (or JScript) has long been supported, but rarely used, by Internet Information Server. In this case we can use the following code to correctly capture the value.

<!IoRangePreExecute>
<script language="javascript" runat="server">
  var PlaceholderValueRegExp = /^function [_a-zA-Z][_a-zA-Z0-9]*\(\s*\)\s*\{\s*\/\/([\s\S]*)\}$/i;
  function GetPlaceholderValue(PlaceholderFunctionString) {
    var str = PlaceholderFunctionString.match(PlaceholderValueRegExp);
    if(str != null && typeof(str) == "object")
      return str[1];
    else
      return "";
    }
    if(!stf_Label<%PageID%>)
      function stf_Label<%PageID%>(){
        //<%stf_Label%>
      }
</script>

<%
  dim label
  label = GetPlaceholderValue(stf_Label<%PageID%>.toString())
%>
<!/IoRangePreExecute>

And presto – you have your variable and your quotes too.

How does this work? What’s Behind the Magic Curtain?
Read more »

Share and Enjoy:

This article covers basic rules on how to name elements when creating RedDot CMS templates.
If you have ever opened up a template and then looked at elements named “TopLeft”, “Home”, “GreenSeparator” you know what I mean. To make things easier you should add a prefix.

Using a name convention for RedDot CMS elements saves time

So the named examples above become:
“TopLeft” » “con_header” – describing a header,
“Home” » “anc_home” – a link pointing to the homepage,
“GreenSeparator” » “bg_separator” – a separator background.

Now there is no need to open up each element and check the attributes to see what they do. The prefixed name unveils the element type. I have used naming conventions since several years now and it saves me a lot of time.

Name convention list

Using the following list with CMS element naming conventions to enable CMS users to quickly determine element types:

• Anchor: anc_name
• Anchor, graphic: ancimg_name
• Area: area_name
• Attribute: att_type
• Background: bg_attribute
• Browse: brw_next and brw_back
• Container: con_name
• Database content: db_name
• Frame: frame_name
• Image: img_name
• Hit List: hitlist_name
• Headline: hdl_name
• Info: info_name
• List: list_name
• Media: med_name
• Option list: opt_name
• Standard field: stf_name
• Text: txt_name
• Sitemap: sitemap
• Transfer: trn_name

Using a Web Solutions Content Management Server (CMS) element naming convention to enable CMS sitebuilder to quickly determine an element type without checking its properties is a common best practice. By using a common set of element names you will save time and avoid templating mistakes when working within a collaborative team of RedDot developers where everyone speaks the same “templating language”.

Do you use conventions?

Share and Enjoy:

Integrating Microsoft ASP.NET into RedDot CMS
Learn it the right way here

Is it easy to integrate .NET into your RedDot CMS project? Yes it is, if you know how and obey some simple rules. This article gives you a best practice on how to include any .NET functionality for your published website within your RedDot CMS templates.

If you can avoid using inline code within your RedDot Content Classes then do it

Inline code within a content class can’t be versioned as it could be with a version control system when developing standard .NET solutions outside of any CMS. You can’t develop or test properly using inline code within the CMS. Whenever you have to change the .NET part of your project you would need a RedDot Consultant or some of their knowledge and hence your project doubles up on resources. Don’t integrate inline code within your CMS.

Let the CMS handle content – Don’t care about the rest

There is a clear understanding of what your CMS should handle for you – your content – and what it should not take care of – styling and dynamic functionality may it be Javascript, .NET or any other scripting technology. The CMS is your data storage and management layer, the web server is your presentation and visualization layer and hence it is the point where dynamic functionality, styling and user interaction takes place. By keeping those parts separate you ensure to have a stable, scalable and furthermore easily maintain- and upgradeable Content Management Solution. Read more on this topic here

Example – How to integrate .Net properly using User Controls

Instead of just adding a page directive followed by your inline code you should use user controls. Given that your code will be used on your website and not within the Open Text CMS ASP.NET User Controls are the best way to embedded dynamic functionality within your project.
There are basically two points where .NET is included in your template. The first one needs to be in every template which uses User Controls unless you integrate it using a container. The second one works as placeholder for the .NET functionality:

Referencing .ascx files and placing User Controls within templates
Read more »

Share and Enjoy:

Merging HTML, CSS and RedDot templates
Read how to do it the right way.

This article covers the key factors for successful CSS and HTML integration into your RedDot CMS Open Text Content Management Server project. This best practice article outlines the major points to pay attention to when implementing your HTML into the CMS.

What you should do when you integrate HTML and CSS into your content class templates

1. If you can avoid it, do not create templates for your CSS or Javascript files. A detailed post can be found here.
2. Don’t target HTML elements directly within the CSS. Always use classes. Specifically with anchor, image and span tags. If you target HTML elements directly this might affect the red dots which will be placed inside the templates because they are anchors, images and spans.
3. Always target the ‘first’ item in a collection of items (lists, repeating blocks, …) by using a CSS class. Within the RedDot CMS you can identify the first item in a list using ASP and PreExecute script blocks but not always can you identify the last item. Especially when the amount of items is varying and you cannot utilize Render Tags.
4. Ensure dynamic HTML is accessible when switched off. Using Javascript code within the CMS editing view can be problematic because it can hide editable content. Ensure that when using dynamic scripts the content is also visible when Javascript is deactivated. For example when you are using jQuery with tabs and your CMS editor changes content, the page reloads when the element is being saved and the user has to open the tab again. It’s better to deactivate the tabs when the page is ‘open’ and in SmartEdit editing mode.
5. Files such as background images, styles heets, javascript and others need to be referenced relative (../mystyle.css) rather than root or absolute referencing (/cms/projectfolder/folder-not-working-on-live-site/mystyle.css). RedDot CMS has its own folder and sub folder structure and during editing it can’t use absolute referenced style or JS files and will mix those up.

Summary

RedDot CMS is a fairly easy to use system when it comes down to templating. I am not saying it’s straight forward or a technological top notch solution. It also is not meant to be an IDE. The good thing to say about the CMS is that the elements are modularized to each single HTML object and can be used in an infinite number of ways. Pay attention to the best practice rules above and think about where your files and references will be used. When using the guidance above the HTML of your project will run smoothly on any platform and publishing target.

What is your RedDot CMS Consultant integration experience?
How do you use HTML and CSS within the RedDot CMS?
Have you ever had any trouble or even an “CMS integration epiphany”?
Read more RedDot CMS best practice articles here.

Share and Enjoy:

Would you like to give your editors the possibility to add Youtube videos to your RedDot CMS project?
But you don’t want them to be able to edit the HTML directly to enter the iframe tag that youtube provides and you don’t just want to add a link to the youtube URL because that would drive content from your site to youtube and the marketing department definitely wants visitors to stay on your site, right? Right.

Well, use this template, inspired by Kim Dezen to embed yutube videos by just entering the URL. The ASP code strips out everything but the video-ID and embeds the content into your project page without editors touching the HTML.

Explanation
<%stf_youTubeURL%> – Holds the complete URL to the youtube video.
This part removes the URL and returns just the youtube video id used for the embedded object tag.

<%
  youTubeID = Mid("<%stf_youTubeURL%>", InStrRev("<%stf_youTubeURL%>", "?")+3)
%>

Get the code

Donate a dollar or $2 and then download the template here. The code is a plain text file for you to copy and paste, you still have to create the element(s) yourself and do some thinking around this.

Licensing

YouTube video template for RedDot CMS by Kim Dezen is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Australia License.
Based on a work at www.reddotcmsblog.com.

Share and Enjoy:

Another big question that comes up every couple of weeks when people start developing websites with the RedDot CMS Open Text Web Solutions Management Server is this one:

How should I integrate my CSS code into the CMS?

And the answer is fairly easy to give and even easier to remember:

Don’t do it. Do NOT integrate your CSS code into the CMS !

It took me several projects to actually reach encounter this epiphany. It’s not worth doing it. And there are several good reasons for not doing it. And I will share them with you, more than happy to discuss it.

Since last year I suggest the following procedure for every project I come across:
Remove the CSS templates and related images to style your site from your project and put them outside of the template and therefore outside of your CMS logic.

A template is meant to semantically structure the stored data from the datasource (a database or sometimes even just XML files). We call this environment a CMS – Content Management System. The presentation layer for this content is formed by those templates and the combined usage of style sheet files. This methodology is similar to XML and XSL, where one stores content, the other defines the way to present it.

Don’t integrate CSS into Content Classes » Markup arguments

• CSS is not a template

  Keep in mind style sheets are NOT templates. CSS influences the way content is presented graphically. CSS is not responsible for the semantically correct markup. There is a reason why it is called “content class” inside the CMS. Because it’s about content.

• Background images are no content

  Images such as background images, bullet points, logos, etc. are NO content, they are a way to present content. Hence they don’t belong inside the CMS template structure. They do not help you manage the content nor do they store any valuable information for your visitors which you want to change as CMS editor.

• Border or Shades are no separators

  A border below a DIV or a headline is not a separator, a separator is a horizontal ruler set in the HTML by using a <hr>-tag and. That’s how content is semantically correct separated not using the content elements borders.

Don’t integrate CSS into Content Classes » Process & Budget

And if these three semantic reasons are not enough for you then here are another four development reasons why you should not mix up CSS & templating.

• It takes more time

  Changing a value in a CSS file takes about 5 minutes. In RedDot CMS you have to do this: Open your CSS template, change the value, publish it to your staging server, test the result, go back to the CMS, if required make some changes, publish again to the staging server, then test again – repeat this step until you have the desired outcome, then – publish the file to your live environment, done.

• It doesn’t work fast enough with international projects / shared RedDot projects

  When using shared content classes for several projects they develop over time different layouts. Some marketing departments want slightly separate styles and your CMS construct starts to get cracks and you have to add an special CSS template here and another one there. Keeping styles separate from projects gives you more options to change them faster without having to pay too much attention to all depending projects.

• It gives you more flexibility

  Assuming you have multiple projects and you run a style change on all of them. You have to test each change which works for Project A also in Project B, C and all the others. And you have to wait for all of them to be changed in the development process until you can start testing because they still might change in the background if you start testing before the last change has been made

• It adds more stability

  Your presentation layer should be static. Whenever your content gets published usually the styles heet files will get published too if they are part of the template set. Content changes approximately everyday in your company.
  How often does the style change of your project? Exactly.
  Why would you re-publish this everyday risking that it might fall over because editors have the ability to influence your companies CI? They don’t have access to it? Fine then again, remove the CSS from your project.

What should you do instead?

• Use a proper set of HTML templates before you start setting up your RedDot CMS project. Each final page template in the CMS should have an according HTML template. (If you didn’t go down that path yet it’s about time to set it up now, it safes you a lot of maintenance time and stress)
• Develop, test and maintain CSS changes in these HTML templates. If you find out that entered content in the CMS affects the way your site renders then test it in here and create an example page. It’s faster to test these pages in all browsers anyway.
• Once your development & testing is ready set up your project or update your existing project. A good place for your CSS files is the plugin folder of your CMS.
• Create a folder for each project inside the plugins folder and place the CSS folder structure and relevant files in there.
• Do the same by manually deploying the CSS files to your web server.

In your RedDot CMS project reference to the CSS files on your RedDot server when parsing the template code. For published files reference to your website CSS. This can be done by using render tags as described here.

How could Open Text tackle this issue

Open Text could easily integrate a CSS file compressor. This module takes the set of referenced CSS files and compresses them as one single file. It also reads out the image references. The compressed file and the image reference then will be attached to a publishing process. A file watcher checks for updates on the CSS files / CSS images. Whenever the CSS files change the compression / publishing process takes place.
This module can be switched off for development purposes and specific publishing targets. The RedDot CMS is NOT an IDE and should not be used to develop or maintain HTML and CSS changes. This module would be a great enhancement.

What do you think? How do you use CSS within RedDot CMS and what is your best practise for this?

Share and Enjoy: