In my experience customizing and deploying CMSs for clients, 99% of folks want a WYSIWYG editor, for good or ill. Usually good.

• the way it uses “connectors” to allow for the integration of the WYSIWYG with in-site assets / resources and file uploads,
• that it generates clean HTML for the flexibility the WYSIWYG provides,
• and it’s good at not molesting any custom HTML you throw in.

So I’ve made a Radiant FCKEditor extension and put it on github.

See the readme for install instructions, requirements and other crap.

Features

• In-WYSIWYG file uploads and image placement,
• Spellchecking – provided aspell is installed,
• Radius-tag awareness – I did my best to tell FCKEditor to leave radius tags alone, even customizing the tags it should ignore at the PageType level,
• Works everywhere FCKEditor does,
• Implemented as a “filter”, allowing you to manage arbitrary numbers of page parts with it,
• You can dynamically add / remove it from page parts as you see fit.

The Future

• Create an admin tab to allow for editor toolbar customization,
• Integrate the link browser to allow for dirt-simple in-site linking,
• Offer optional integration with the page_attachments plugin for more logical file organization.

Get involved

Really! Drop me a line – dan @ endpoint dot com to discuss your ideas or make a fork, push your changes and send me a pull request. All reasonable offers accepted!

I have no idea if there’s a term to describe this kind of navigation, but I’ll use “flexmenu” as it’s what the excellent WebGUI CMS calls them, implemented via nested ul / li tags.

I like this method of site navigation as it gives a user the ability to see the entirety of the site along with the ability to zoom in / out easily and bounce between sub-sections.

As you drill down into the page hierarchy, the siblings of each page stay open. I’ll try to illustrate:

At the root, where “1” is the root.

1.1
1.2 <-- User clicks this
1.3
1.4

Next:

1.1
1.2
  1.2.1
  1.2.2
  1.2.3 <-- User clicks this
  1.2.4
  1.2.5
1.3
1.4

That opens up.

1.1
1.2
  1.2.1
  1.2.2
  1.2.3
    1.2.3.1 <-- leaf node
    1.2.3.2 <-- leaf node
    1.2.3.3 <-- leaf node
  1.2.4
  1.2.5
1.3
1.4

User clicks a completely separate part of the tree, and the 1.2 branch closes.

1.1
1.2
1.3 <-- User clicks here
  1.3.1
  1.3.2
  1.3.3
1.4

This is implemented via two snippets- a container and a recursive snippet for each node:

Container Snippet

 <r:if_parent>
 <div id="left-column-nav">
 <r:find url="/">
   <ul>
     <r:snippet name="menu-line" />
   </ul>
 </r:find>
 </div>
 </r:if_parent>

Recursive Snippet, named “menu-line”

 <r:children:each>
   <li<r:if_self> class="active"</r:if_self>><r:link />
       <r:if_ancestor_or_self>
         <r:if_children>
           <ul>
             <r:snippet name="menu-line" />
           </ul>
         </r:if_children>
       </r:if_ancestor_or_self>
   </li>  
 </r:children:each>

To use an example from a real site, when at the page ”/about/people/”, this navigation menu will yield HTML similar to:

<div id="left-column-nav">
  <ul>
    <li><a href="/about/">About</a>
      <ul>
        <li><a href="/about/goals/">Goals</a></li>  
        <li><a href="/about/history/">History</a></li>  
        <li><a href="/about/mission/">Mission</a></li>  
        <li class="active"><a href="/about/people/">People</a>
          <ul>
            <li><a href="/about/people/executive-committee-members/">Executive Committee Members</a></li>  
            <li><a href="/about/people/other-committees/">Other Committees</a></li>  
          </ul>
        </li>  
      </ul>
    </li>  
    <li><a href="/news/">News</a></li>  
    <li><a href="/programs/">Programs</a></li>  
    <li><a href="/publications/">Publications</a></li>  
    <li><a href="/resources/">Resources</a></li>  
    <li><a href="/morville-house/">Morville House</a></li>  
  </ul>
</div>

Nicely nested and easily styled via CSS.

Below is a simple script that saved me some time – for various reasons I had to replace horrid image buttons used on a web site with more compliant-looking image buttons. You could get buttons that look exactly like this via CSS, but in this case swapping out the images was the easiest fix.

In comes RMagick , the ruby interface to the venerable ImageMagick graphics library.

First you create the canvas, then you create the Magick::Draw object that you draw onto the canvas. On linux/unix machines you can directly display the image, too via canvas.display.

The script:

#!/usr/bin/env ruby
require 'RMagick'
[
    ['add to basket','buy.gif',100],
    ['change','change.gif',60],
    ['checkout','checkout.gif',75],
    ['continue','continue.gif',75],
    ['continue shopping','continue_shopping.gif',130],
    ['go','go.gif',30],
    ['next','next.gif',45],
    ['place order','place_order.gif',90],
    ['previous','previous.gif',70],
    ['product list','product_list.gif',90],
    ['update','recalculate.gif',60],
    ['submit','submit.gif',60],
    ['update','update.gif',60],
    ['please wait','wait.gif',90]
].each{|button|
    canvas=Magick::Image.new(button[2],25){
        self.background_color='#BED8F1'
    }
    d=Magick::Draw.new
    d.stroke('transparent')
    d.fill('black')
    d.font='/var/lib/defoma/x-ttcidfont-conf.d/dirs/TrueType/Verdana_Bold.ttf'
    d.pointsize=11
    d.font_weight=Magick::BoldWeight
    d.text(0,0,button[0])
    d.text_antialias(false)
    d.font_style=Magick::NormalStyle
    d.gravity=Magick::CenterGravity
    d.draw(canvas)
    canvas=canvas.raise(3,3)
    # canvas.display
    canvas.write(button[1])
}

The result:

Saved me some time, and I learned a bit out Rmagick in the process.

Get the script here