RokCandy - Tastes Great!

With the release of the February 2009 RocketTheme Joomla Template, Akiraka, we quietly released a new extension called RokCandy. The name was chosen because this seemingly simple and innocuous concept will make you say 'sweet!' when you start to fully appreciate what it can do for you. So what is RokCandy? Basically it provides macro functionality to any element on a Joomla page. This means you can put a simple macro definition in any article, module, etc, and this will be expanded when you view the page. This combined with the built in support for any number of variables creates a very powerful solution that can be used for almost any application.

Getting Started

The extension consists of an administrator component, a system plugin, and editor-xtd 'button' plugin. We will be releasing this as a freely available GPL extension shortly, and when you download it, the installation is about as simple as it gets. We use a custom integrated installer that installs all the required elements and some samples in one go.

After installation, you should next visit the RokCandy Macro Manager in the components menu. Here you will see a list of very simple bbcode-style macros. If you have a RocketTheme Joomla template with RokCandy support, you will also see a list in red, of macros that the template provides styling for. We recommend using this bbcode style for all your macros because it's WYSIWYG safe, meaning that you can enter it right in your editor and will not be stripped or changed when you save your articles or modules. This is one of the problems that RokCandy was built to tackle, and to make the process even easier, we provide a button that shows up at the bottom of the browser. Clicking this button, pops up a list of all available macros which you can select, and that macro will be inserted into your editor at the current cursor position.

How Does it Work?

So what can RokCandy do for you? Well let's start off with some very basic. Take the example of bold text. About the simplest RokCandy macro you can create is the following:

On the left side of the equals sign "=" is the macro portion.This is written in a bbcode-style meaning it has square brackets "[]" and contains an opening and ending element, as well as a variable wrapped in curly brackets "{}". On the right side of the equals sign is the HTML code that will be replace any occurrence of the macro that is found. Any variables found in the macro will be replaced in the HTML. That means that if you have the following in your article:

You will end up with:

A Better Example

Ok, so that's not really that useful, but it does save some keystrokes if you are not using a WYSIWYG, and also ensures that the CSS preferred <strong /> tag is used over the older <b /> tag. The next step is to see how you can create more complicated macros and appreciate the real power of RokCandy. let's look at a blockquote. Traditionally <blockquote /> is a tag that is a block css element that you can style with a background, perhaps a border, and a single image. Styling is somewhat limited due to the singular nature of the blockquote tag. It's common practice to add some extra elements to a blockquote so that you can have opening and closing quotes for example, as well as perhaps a nicely formatted author element. Let's look some nice HTML for a blockquote might look like:

Which renders in HTML as:

This is a sample quote that has a very nice format

- John Hancock

“

”

NOTE: I've used inline CSS here (yuck!) to save the effort having to use an external CSS stylesheet in this example, but you would probably replace those inline style elements with classes and move the CSS out of the HTML itself. But this works for demonstration purposes.

We will represent this entire block of HTML with the following macro:

So that means in your content to have that nicely formatted blockquote, all you have to put this in your article:

Ok, now you should be thinking "SWEET!". No more troublesome copy and paste, no more having to go through multiple articles to change or adjust a bit of html. You just change the HTML portion of the macro in the RokCandy Macro Manager, and all instances of the macro will automatically see the update. The full macro would look something like:

Taking RokCandy Further

Now imagine taking this even further by creating a whole page layout with images,quotes, blocks of text, and you can create a very simple macro to allow you content editors to create well structured, and therefore well rendered HTML without any chance of them breaking your site, or the design. I won't bother flushing out all the possible HTML, but you can imagine the possibilities with this macro:

Also you can nest the macros as shown with this checklist macro example:

This way you can have the following macro code in your article:

The output will be rendered as:

RokCandy macros can also be used for simple search and replacement in content without variables. For example imagine you have some text that you commonly need to update in various pages on your site, like the copyright text. Have a look at the following macro:

Now imagine how convenient it is to just use the simple macro "[copyright /]" anywhere in your content and not have to worry about updating all these pages when you want to change the year when 2010 rolls around. That's the beauty of RokCandy you can use it for almost anything.

Thoughts for the Future

RokCandy is already a very powerful extension that can be used to solve a wide array of custom content duties for Joomla, but we are looking at ways to improve it. With the template override feature already built in we are able to provide custom, template-specific macros for our demo sample content. We are looking at providing the ability to install macro "packs" that could include macros and associated css/images/etc. This would allow us the ability to create entire content types, that would allow content editors to output beautiful HTML without having to learn about CSS or even HTML syntax. We are also looking at ways we can expand our editor button to render input fields, and also provide a 'live' preview of how the macro will look.

Currently RokCandy is available to our RocketTheme members in the Akiraka downloads area. We will shortly be making this generally available to all users and it will be a free GPL extension.

Stay tuned!

UPDATE (01/15/09): RokCandy has been updated to version .82a. This version adds some features and addresses some issues that have been reported. Changelog is as follows:

• + Added Frontend editor button support
• + Added custom disable ability, ie for community builder profiles
• # Fixed filtering of certain HTML tags (eg script, iframe, etc)
• # Fixed ability to leave macro variables empty between quotes