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:

<ul id="headerCarousel">
<li><a href=""><img src="" /></a><p>the caption</p></li>
</ul>

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:

<ul>
<li><img ... />
   <ul>
     <li><img ... />
       <ul>
         <li><img... />

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:

module CarouselTag
  include Radiant::Taggable
  desc "Contains the panels of the carousel, and other objects."
  tag 'carousel' do |tag|
    content = '<div id="headerCarousel"><ul>'
    content << tag.expand
    content << '</ul></div>'
  end
  desc "Prints out the individual panels of the carousel."
  tag 'carousel_image' do |tag|
    %{ <li><a href="#{tag.attr['link']}">
      <img src=" #{tag.attr['src']}"></a>
      <p>#{tag.attr['caption']}</p>
    }
  end
end

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.

Radius/HTML:

<r:carousel>
<r:carousel_image src="/assets/13/medium/IMG_2631.JPG" link="http://www.banane.com" caption="Starting off on Broadway trail- nice and flat" />
<r:carousel_image src="/assets/14/medium/IMG_2634.JPG" link="http://www.banane.com" caption="First warming hut visit ever!"/>
<r:carousel_image src="/assets/15/medium/IMG_2637.JPG" link="http://www.banane.com" caption="Starting Junior Loop- which was crazy lack of signage"/>
<r:carousel_image src="/assets/16/medium/IMG_2639.JPG" link="http://www.banane.com" caption="Off roading on Sleeping Beauty trail"/>
</r:carousel>