Supporting Shortcodes in Sitefinity Content

Supporting Shortcodes in Sitefinity Content

Posted on December 04, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Shortcodes are a popular feature of many CMS platforms that allow content authors to easily add rich content in a simple, user-friendly format, without cluttering up the content areas with cumbersome (and usually error-prone) HTML.

For example, instead of copying and pasting a long string of raw HTML to embed a YouTube video, the user could simply add a shortcode like [youtube:3apGuWcFwTA] to the content area. This content would then be expanded when the actual page is rendered, replacing the shortcode with the full HTML for the video.

This post will demonstrate a method to easily add this feature by taking advantage of Sitefinity support for external templates and custom code-behind.

Content Block and ViewMap

Generally, users adding content to a page make use of the Content Block widget, so it's this control that needs to be mapped to an external template. Remember that all of the Widget Templates are included in the Sitefinity SDK, and create a copy of the Content Block template as a User Control in your local project, as demonstrated in this article: Mapping Sitefinity Templates from the SDK.

However, mapping each individual Content Block widget to this template is not an ideal solution. Fortunately, the Sitefinity ViewMap makes it easy to globally map every instance of the control to the external template.

Add a new entry using the HostType of Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlock and map it to the virtual path of your User Control.

Save your changes and restart the website (by saving web.config) and now all instances of the Content Block will render using your template. It is here that we'll add the custom code-behind to render the shortcodes.

Shortcode Helper Classes

There are several ways to implement the shortcode expander, including simply overriding the Render method, replacing the contentHtml.Text. For this example, however, I'm going to place the code in a separate class so that it can be reused later.

Here is the code for a simple ShortcodeProcessor helper class.

 public static class ShortcodeProcessor
    {
        /// <summary>
        /// Expands all shortcodes within the specified text.
        /// </summary>
        /// <param name="textToProcess">The text to process.</param>
        /// <returns></returns>
        public static string Execute(string textToProcess)
        {
            // expand shortcode text here

            return textToProcess;
        }
    }

This is a static class that takes in the content HTML text, replaces expands the shortcode text returning the full HTML to be rendered to the page.

The idea is to call in sequence any number of additional Shortcode helper classes that are responsible for expanding shortcodes.

For this example, I've created a simple YouTube Shortcode Expander:

 public static class YouTubeShortCodeHelper
    {
        /// <summary>
        /// Expands all YouTube shortcodes in the specified text
        /// </summary>
        /// <param name="inputText">The input text.</param>
        /// <returns></returns>
        public static string Expand(object inputText)
        {
            if (inputText == null) return string.Empty;
            var result = inputText.ToString();

            // use regex to find matches
            string regex__1 = @"\[youtube:.*?\]";
            MatchCollection matches = Regex.Matches(result, regex__1);

            foreach (Match match in matches)
            {
                // strip out the video id
                var videoID = match.Value.Substring(9, match.Value.Length - 9 - 1);

                // replace shortcode text with YouTube embed HTML
                string player = string.Format(@"<iframe width=""560"" height=""315"" src=""http://www.youtube.com/embed/{0}"" frameborder=""0"" allowfullscreen></iframe>", videoID);
                result = result.Replace(match.Value, player);
            }

            return result;
        }
    }

To ensure that this shortcode is called, simply update the text by calling the Expand method from the ShortcodeProcessor class:

 public static string Execute(string textToProcess)
        {
            textToProcess = YouTubeShortCodeHelper.Expand(textToProcess);

            return textToProcess;
        }

Finally, override the Render method of the Content Block template, replacing the default HTML text with the new expanded text using the Shortcode helper:

 protected override void Render(HtmlTextWriter writer)
        {
            // do not expand shortcodes in design mode
            if (this.IsDesignMode())
            {
                base.Render(writer);
                return;
            }

            // expand shortcodes, add additional codes inside the Execute method
            contentHtml.Text = ShortcodeProcessor.Execute(contentHtml.Text);

            base.Render(writer);
        }

You can add additional helpers to the chain as needed to support different types of shortcodes by simply modifying the Execute method of the Shortcode helper class.

Finally, simply add the YouTube shortcode to any content block, and when you publish the page and view it in the browser, the shortcode will be expanded, revealing the YouTube video inline with the full content of the page.

 

Adding Shortcodes to Content Widgets

So far, we've only added support to Content Blocks. However, because we used a helper class, adding support to the Content Widgets (such as News and Blogs) is simply a matter of updating the Widget Template.

Because Sitefinity exposes the content widget templates directly, it's not even necessary to map them to an external template (although you certainly could).

Instead, simply open the widget template for the content you wish to support (in this example, News) and wrap the Content in a call to the static shortcode helper.

Add this to each content template and you'll have shortcode support across your entire site.

 

Wrapping Up

This simple demo is yet another example of how external templates allow you to take complete control over your Sitefinity content. By adding custom code-behind to your control templates, you can make content authoring simpler than ever.

The complete example will be available in the next release of the SDK. In the meantime, however, in our next post, we'll see how you can take this to the next level by adding a custom tool item to the Html Editor to make it easier to add the YouTube shortcode. Stay tuned!

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation