all posts

Graffiti CMS 1.3 - add a Widget anywhere in a view with new Widget macro

Published to Blog on 25 Jan 2010

Graffiti comes with a plethora of built-in widgets and there have been plenty built by the community. Up until now they had to be displayed in a sidebar. There was no way to display a widget in your content, your header, your footer, etc. without some modifications, custom Chalk extensions or using “hidden” sidebars.

You’ll notice that my site has no sidebars (a fact that is subtly called out in the image below :)), but if you believe my scribble you’ll see that there are if fact three widgets in use on my home page right in the middle of all of the other content. How can that be? As of this evening Graffiti now supports displaying a widget anywhere in a view with the help of the new Widget macro.

Feed Widget

Delicious Widget

404 Widget

You can see from the screenshot below that I have the three widgets setup and sitting in my “queue” column. Notice that they are not in the Left Sidebar or Right Sidebar columns, so even if I did use a sidebar with this theme they would not be displayed in the sidebars. Even though they are just queued they are still available for display. There was just no way to display a widget that wasn’t in the left or right sidebar before now (without a custom Chalk extension). Since I’m not using sidebars in this theme I could put the widgets in the left or right columns, but for demonstration purposes for people who might already be using left and right sidebars I left them in the queue.

Widget Control Panel 

To display a widget in a view all you need to do is use the Widget macro and pass in the title of the widget to render along with some directions for additional markup. It will search for the widget by title (so based on the screenshot above I would use CheeseSalt, Del.icio.us, or ScottCate 404Widget for the title) and if the widget is found then it is rendered. The Widget macro has the signature Widget(string title, string beforeTitle, string afterTitle, string beforeContent, string afterContent) so you can set markup before/after the title and before/after the content. Below are a couple of quick code examples of my use of the Delicious widget and Scott Cate’s 404 Widget on my home page.

<div id="delcontainer">
    $macros.Widget("Del.ico.us", "", "", "", "")
</div>

#if ($macros.IsNotNull($user))
   #if($macros.CanViewControlPanel($user))
<div class="content-item">
    <div class="content-dets">
        <h3>Admin 404 Report</h3>
    </div>
    <div class="content-body">
        $macros.Widget("ScottCate 404Widget", "", "", "", "")
    </div>
</div>
   #end
#end

Other examples might include using a Syndication Feed Widget, Recent Posts or List of Links widget in your site’s footer, adding a Search Box to your 404 page’s custom view, or using a simple Empty Box widget above your content on your layout view for ad markup.

One additional note: we also added official support for RSS feeds for tags tonight. A lot of people have implemented their own solutions for RSS feeds for tags, probably based on ScottW’s example, but now it is baked in.

In case you missed the announcement around the middle of December, Graffiti CMS is now open source. The Graffiti CMS project is hosted on CodePlex and as demonstrated by this post we are moving forward. Don’t consider this an official announcement but our plan is to clean things up and release the first open source version, Graffiti CMS 1.3, soon. After that we’ll start considering wholesale changes like replacing the data layer. The specifics are still up for debate so feedback is welcomed. This isn’t my “call to arms” post (there will be one soon) but you know where to find us if you are interested.


Dan Hounshell
Web geek, nerd, amateur maker. Likes: apis, node, motorcycles, sports, chickens, watches, food, Nashville, Savannah, Cincinnati and family.
Dan Hounshell on Twitter