Thoughts on development, design and the world we live in.

Wrangling Custom Radius Tags

By admin in Uncategorized. Posted on January 15th

I’m integrating a beautiful Javascript app, InfiniteCarousel, into the Radiant extension architecture. The app creates a photo carousel:

A scrollable panel of images with nice left and right buttons, captioning, and links. If interested, feel free to install from github. The app is built largely in JQuery and has a pretty simple mark-up:

To integrate as an extension, I first generated the extension, moved the JavaScript and CSS files to the public directory. Our version of the app used a link, as well, which was easy to integrate. We also wanted to avoid HTML and use a simpler Radiant tag. Radius is the tag markup language for Radiant, and developers and integrators can add to this library of tags. It will consist of one container tag, named “carousel” and a series of other tags that will be for each image in the carousel: “carousel.image.” The tags will render into the required mark-up, seen above as a UL set with LI for each image.

Radius tags are quite easy, in your Radiant extension “lib” directory, you create a file that defines the tags, and content to render when the radius standard tag class is executed. It’s pretty basic. But my output was like this:

I struggled with this for quite a while- reading up on Custom Tags- great resources, by the way, are:
- Adding Custom Radius Tags
- Adding a Custom Page Type. Doesn’t sound like it from the title, but near the end he does a very explicit and clear example of what was most challenging to me - extending a container and content tag, together.

My colleague Lorien figured it out first- the child tag was calling the parent tag each time it was rendered, so that’s why it was nesting within itself. To solve this, we re-named the child tag “carousel_image.” from “carousel.image.”

Final custom tag code:

Just to be clear about this- the child tag, “carousel_image” does not have a tag.expand command, which outputs the contents or guts of the tag. The parent, “carousel” does have the expand. By putting the child inside the parent in the HTML mark-up, the outer tag, with the “expand” command, will output all of the iterations of the children tags within it. This wasn’t that clear to me until the end of this project.


By admin | Posted in Uncategorized | Tagged | Comments (1)

One Comment

  1. tony
    Posted August 16, 2010 at 4:41 pm | Permalink


    i’m just starting w/ radiant cms and i’d really like to use your carousel extension. however, after installing it and following your instructions, all the images simply appear on the page as list items w/in a div tag.

    i realize a lot of my problem is my lack of experience, and i apologize if i’m missing something extremely fundamental, but any help would be greatly appreciated.

    i noticed that the your include instructions have things listed as ‘javascript’ and ‘stylesheet’ rather than ‘javascripts,’ and ‘stylesheets’ as radiant has named them, so i’ve made those adjustments. but i’ve also noticed that many of the radiant extensions require other components to be installed first. could this be the problem?



Post a Comment

Your email is never shared. Required fields are marked *