Nov
26
SkyBlueCanvas v1.1 RC1 Skins Explained
If you have used an earlier release of SkyBlueCanvas and are now upgrading to v1.1 RC1, you have probably noticed that the skins are a bit different. Normally, I would not want to make a change with as much impact on existing users as this one, but the change was really necessary.
This article will explain the underlying concepts of the new skin format and the API hooks at your disposal. For users of older versions of SkyBlueCanvas, your existing skins will still work. There are some minor caveats to this that I will explain later on.
Push vs. Pull Content Publishing
The old skin format used a “Push” method of publishing. What this means is that you specify what content items are published in what region of a page from within the Admin Control panel. This technique has many benefits, but, unfortunately, it also has many limitations.
The main problem with a push technique is that too much knowledge of the presentation of the data is attached to the data itself. This is generally frowned upon in software development because it does not allow the content to be easily published in other formats such as RSS, Mobile devices, etc.
The new skin format uses a “Pull” method of content publishing. This is widely accepted as the “correct” way to publish content from any type of content creation/management system. As with the push method, this technique has both advantages and disadvantages. However, the advantages of a pull method far outweigh the disadvantages.
The Disadvantages
The primary disadvantage of the pull method is that setting up skins is a bit more work and requires a higher level of technical skills. In SkyBlueCanvas, we have tried to minimize the extra labor as much as possible.
The other main disadvantage is that a new template is required for each “type” of content. For instance, a Photo Gallery page will require it’s own template. We are working on a solution to do away with this requirement but for now, this requirement will have to stand.
The Advantages
The biggest advantage, and in my opinion, the one that outweighs every other consideration, is the unlimited flexibility that the pull method affords the designer and developer. There are literally no limitations on what you can do.
Using the pull method of publishing, all knowledge of presentation is removed from the data itself. This means that you can create multiple (even unlimited) views of the same data. It also means that the format of the data can be anything you want or need it to be. The same data can be delivered as XML, RSS, HTML or any other format.
Fragments
The key to the new skin format is what we call fragments. An easy way to think about fragments is as a piece of a page. The fragment code creates the HTML for a particular data type. For instance, if you have a collection of Links you want to display on your site, the Links Fragment will take care of generating the HTML. One neat thing about fragments, though, is that a single fragment can have numerous different HTML formats.
You can find a full tutorial on Fragments in the post about Fragments
Basic Skin Structure
The basic structure of a SkyBlueCanvas skin is the same as any other HTML page. It is also almost identical to the old SkyBlueCanvas skin structure expect that it includes the full HTML document including the Doc Type declaration and HEAD and BODY elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" {doc:lang}>
<head profile="http://gmpg.org/xfn/11">
<title>Page Title</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
</head>
<body id="home">
<div id="doc">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="body">
<div id="content">
</div>
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
The code above simply defines the structure of your HTML skin. It does not include any content or resource links (JavaScript or CSS) or meta data. We’re going to add these – in dynamic fashion – now.
First, we will want to add our meta data. The meta data for pages is managed both page-by-page in the Page Manager and through Admin > Collections > Meta Data. This means you can add, edit and delete meta data items and they are updated on your site automatically. To load the meta data, you need only a single function call, inserted in the HEAD element of the page like this:
<head profile="http://gmpg.org/xfn/11">
<title>Page Title</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<?php echo $this->get_meta_data(); ?>
</head>
That’s all there is to it. And most features of the SkyBlueCanvas skin will be equally as simple. So let’s move on to loading JavaScript and CSS links. These will also be inserted in the HEAD element.
<head profile="http://gmpg.org/xfn/11">
<title>Page Title</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<?php echo $this->get_meta_data(); ?>
<link rel="stylesheet"
type="text/css"
href="<?php echo $this->get_path(); ?>css/mystyles.css"
/>
<script type="text/javascript"
src="<?php echo $this->get_path(); ?>js/myscripts.js">
</script>
</head>
The <?php echo $this->get_path(); ?> function automatically fills in the path to the current skin so if you want to create a new skin based on the current structure, all you need to do is copy the HTML file to the new skin folder and you won’t even need to update the paths.
Ok, so now for the really hard part. Just kidding. This part is a bit different but just as simple. Now we want to load the page content. This example will be for a basic text page created in Admin > Pages. I will use the full HTML document for this example so you can see a fully-functional page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" {doc:lang}>
<head profile="http://gmpg.org/xfn/11">
<title>Page Title</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
</head>
<body id="home">
<div id="doc">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="body">
<div id="content">
<!--#plugin:fragment(page)-->
</div>
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
That was pretty easy wasn’t it?
Now, let’s go ahead and put our full page together with navigation, a sidebar and header and footer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" {doc:lang}>
<head profile="http://gmpg.org/xfn/11">
<title>Page Title</title>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
</head>
<body id="home">
<div id="doc">
<div id="header">
<!--#plugin:fragment(header)-->
</div>
<div id="navigation">
<!--#plugin:fragment(menu,view,menu=1)-->
</div>
<div id="body">
<div id="content">
<!--#plugin:fragment(page)-->
</div>
<div id="sidebar">
<!--#plugin:fragment(sidebar)-->
</div>
<div class="clear"></div>
<div id="footer">
<!--#plugin:fragment(footer)-->
</div>
</div>
</div>
</body>
</html>
Now, just save the above code to /skyblue_root/data/skins/your_skin/skin.standard.html
To use this template for a page, go to Admin > Pages and create a new page. Enter your page text. Then on the Meta Data tab, set the Page Type to “standard”. When your new pages is requested, SkyBlueCanvas will use the template we created to build the page.
One final example will help round out your understanding of SkyBlueCanvas skins. This part is a little more difficult but still very simple. The example we have used so far only works for pages whose page type is set to Standard. What if you want a Gallery page?
You will need to read the article on Fragments in order to fully understand how this is done, but the page template itself, is almost identical to the Standard page, with one small change. Rather than including:
<!--#plugin:fragment(page)-->
in the main content region, you will include:
<!--#plugin:fragment(portfolio)-->
Full List of Template Hooks:
// Load the page meta data: $this->get_meta_data(); // Getting the Skin root path: $this->get_path(); // Getting the page title: $this->get_page_title(); // Get the home page URL: $this->get_home_url(); // Get the page name as a CSS ID: $this->get_page_name();
SkyBlueCanvas also has some additional hooks via the SiteVars plugin. The full list is beyond the scope of this article, but you can learn more in the blog post about SiteVars.
Comments
8 Responses to “SkyBlueCanvas v1.1 RC1 Skins Explained”
Leave a Reply
[...] See Also: SkyBlueCanvas Skins Explained [...]
[...] also: SkyBlueCanvas Skins Explained SkyBlueCanvas Fragments [...]
[...] Skins Explained [...]
[...] Lightweight and simple does not mean simplistic, however. SkyBlueCanvas includes a lot of the same basic abilities as more robust systems but in a simpler form. The software is not meant to be all things to all users but it does offer features you expect like a familiar Plugin API, Extensibility and skinnability. [...]
Hello (Scott),
thank you for this post, it clarifies a lot.
However the pull might be good for different presentation methods, it seems to take away the thing that made me discover SBC: easy (secondary) administration/editing. By that I mean the possibility of an HTML/PHP-untrained editor to just put some blocks on the “canvas” (modular conception, or “Baukastenprinzip” in German) and have the menus, content, links, etc that they want on that page.
With the pull paradigm, SBC seems to have been transformed into Yet Another Skinned Content Dispenser that needs some skilled admin to create page styles that can be applied by any editor but not easily altered.
The only chance to remedy this seems to create an (arbitrarily complex and monstrous) online skin editor/generator.
I do not have hands-on experience with SBC so please (PLEASE) correct me if I’m wrong. (And feel free to mail me).
cheers!
Georg
P.S: Due to the data storage concept (and pull scheme
) I think of SBC as one of the most intriguing SCMs anyway; maybe just not for that one project…
Hey Georg,
Thanks for the comment. I think your assessment is right on. I agree with you regarding the old method of placing content on a page. The pull method and the old content placement are not necessarily mutually exclusive. I’m make a lot of progress with a complete re-write of the underlying code. Once the new version is finished, the code will be in good shape to allow me to build some powerful features on top of it. I fully intend to add a content placement feature back in. It won’t work quite the same way as the old method but will actually be much more user friendly as it will use Ajax and be pretty much drag-and-drop. In order to get there, however, a re-write was necessary. The bad news, though, is that at the moment I don’t know when the new version will be available. Realistically it will not be available until late fall or winter of this year. If everyone can just hang in there, though, I promise it will be worth the wait.
Scott
That’s great news! Looking forward to (testing) it
Thanks,
Georg
I think that SBC is the great CMS I have used.
tham tu