Mar

7

Editable Sidebar Content Hack

Filed Under Extensions, Fragments, Plugins, SkyBlueCanvas CMS 

Several users of the SkyBlueCanvas Forum have asked how to add an editable text block to the sidebar of their site. I puzzled over this question and to date had informed folks that unfortunately it cannot be done.

A few nights ago, Steve Fister, one of the SkyblueCanvas Development Team Members posed the question again and offered a few ideas on how to pull it off. After thinking about Steve’s suggetions, I realized that this is actually quite easy to do. In fact, with Steve’s idea, you can add an editable text block anywhere on a web page. What’s more, with a little SkyBlueCanvas Skin Magic, you can build page-specific text blocks, so if you want a different block of text to appear on different pages, you can do it with this trick.

Out-of-the-box, this is still not possible with SkyBlueCanvas, but I have been working on a new Plugin that – unbeknownst to me when I built it – is the missing piece. The plugin is called Fragmentor and is a super-charged version of the Fragment Plugin that comes pre-installed with SkyBlueCanvas.

About Fragmentor

The existing Fragment Plugin has one design limitation: it uses pre-defined parameters whose meaning is determined by both position and name. I built the super-charged Fragmentor Plugin to correct this design mistake and to make the plugin much more flexible.

Whereas one would load a Fragment with the old Fragment Plugin with a call like this: 

<!--#plugin:fragment(fragment_name,view_name,
    match_param[id1,id2,...],
    page=[id1,id2,...]})-->

The new plugin uses a query string of key=>value pairs much like a URL query string that looks like this: 

{fragment(name=fragment_name&view=view_name
    &param1=value1&param2=value2)}

Note:

You cannot break fragment call tokens onto more than one line. They are broken onto multiple lines in this example to fit the format of this page.

There are 3 benefits of this approach:

  1. The position of parameters is irrelevant
  2. The query string can contain an arbitrary number of key=>value pairs
  3. Only your fragment needs to understand the optional parameters*

* There are two exceptions to this rule: the name and view keywords are reserved. Some might call this a shortcoming but I tend to disagree. Every language, whether for markup or code execution, uses reserved keywords so we are not introducing a new concept by reserving these two keywords.

The Editable Text Anywhere Trick.

What You Will Need

First, download the Editable Region Hack Package. Follow the installation instructions included with the download.

Next, open one of your SkyBlueCanvas Skins in a text editor. We are going to use the sidebar for this demonstration, so in the sidebar of your template, add the following code: 

{fragment(name=region&view=view
    &content_id=
    <?php $this->get_page_name(); ?>-sidebar)}

For the time being, don’t worry about what this code means. After we have created our content item to display in the region, I will explain how this code works.

Now for the Trick

We are actually going to use a SkyBlueCanvas Page for our editable content that goes in this region. However, we will only be using the Page Menu Text and the Page Article Text in the region. The reason we created an empty Skin File was so our page does not get rendered as a full HTML document.

The Page Menu Text is what SkyBlueCanvas’s Router Class uses as it’s unique identifier, so we will need to use this as well. The Fragment code I told you not to worry about earlier comes into play now. If you look at the code, you will see a PHP call embedded in the Fragment call. When this page is loaded, the template PHP will be parsed before the Plugins are fired, so when the Fragmentor Plugin sees this page, the PHP code will be replaced by the Menu Text or unique identifier of the current page. So if we are currently viewing the “Home Page”, the final key=>value pair in our query string will actually read: 

content_id=home-page-sidebar

This is critical in order for the trick to work.

The Finale

With all of our pieces in place, log into the admin section of your site and navigate to Admin > Pages and click the Add Page button. Once in the Page Form View, click the Meta Tab and name your content item Home Page Sidebar.

In the selector labeled Layout, select Region. This tells SkyBlueCanvas to use our empty Region Skin to build this page. Since the Region Skin is empty, the only output of the page will be the article cotnent.

In the selector labeled Menu, select No Menu (this is important).

Set Published to No.

You can choose to syndicate this content item.

Finally, click the Article Text tab and enter text and images the same as you would on a SkyBlueCanvas page. Once you have finished entering your text, click the Save button, then view your home page. You should see your newly created content in the side bar.

Important

We are exploiting SkyBlueCanvas’s Unique Identifier format to match content items with the including page so it is critical that your editable region content Menu Text match the Menu Text of the including page exactly, except for the additional ’sidebar’ bit.

Comments

5 Responses to “Editable Sidebar Content Hack”

  1. SkyBlueCanvas - Fragmentor Plugin For SkyBlueCanvas on March 7th, 2009 8:37 pm

    [...] For a really cool usage example, check out my blog post on the Editable Sidebar Content Hack [...]

  2. Matt on April 27th, 2009 4:47 pm

    Is it possible to use this method and have more than one editable region on a template skin? I tried this but the same content item is being displayed in both the calls despite them being different.

    I also tried to install a second instance of region in fragments/regiontwo and call that for the second editable region, but no luck. any ideas?

  3. scott on April 27th, 2009 7:30 pm

    Hey Matt. In order to keep all of these types of questions in one place, I’ve posted my response, along with your question, on the Forum: http://forum.skybluecanvas.com/viewtopic.php?f=22&t=338

    Thanks,
    Scott

  4. Neil Watson on March 31st, 2010 6:48 am

    Does the same technique work in v2, as the Admin form is now different?

    Many thanks

    Neil

  5. scott on March 31st, 2010 8:27 am

    With the latest version of SkyBlueCanvas (1.1-r247) there is no need to use this hack. Snippets make this technique obsolete.

Leave a Reply