Mar
7
Fragmentor Plugin for SkyBlueCanvas
Filed Under Extensions, Fragments, Plugins
For a really cool Fragmentor usage example, check out my blog post on the Editable Sidebar Content Hack
System Requirements
- SkyBlueCanvas v1.1
- PHP 5 (Not tested with PHP 4)
- Apache Web Server
Important
Unlike most SkyBlueCanvas Plugins, the Fragmentor Plugin must be installed manually via FTP. If you install this Plugin through the admin console, it will not function properly.
Installation Instructions
- Connect to your SkyBlueCanvas web site using the FTP Client of your choice.
- Locate the Fragmentor Plugin file in source/plugin_fragmentor/plugin.fragmentor.php in this download.
- Upload the Fragmentor Plugin file to /skyblue_root/data/plugins/.
Usage
The Fragmentor Plugin allows you to pass a standard query string, similar to a URL query string, to your custom SkyBlueCanvas fragments. A query string is simply a string of key=>value pairs in the format:
key1=value1&key2=value2
Reserved Keywords
The Fragmentor Plugin has 2 reserved keywords:
- name – name tells Fragmentor which Fragment to laod.
- view – view tells Fragmentor which Fragment View to load.
Syntax
You can use one of or a mix of two call syntaxes to call the Fragmentor Plugin:
HTML Comment Syntax:
<!--fragment(name=fragment_name&view=view_name&key1=value1)-->
Use this syntax to add Fragmentor calls to your HTML skin templates.
In-line Text Syntax:
{fragment(name=fragment_name&view=view_name&key1=value1)}
Use this syntax to add Fragmentor calls in-line in your page article text.
If you are familiar with SkyBlueCanvas Fragments, you know that the default Fragment Plugin attempts to load any data objects associated with the fragment automatically. The plugin determines the data to load based on the name of the fragment. For instance, if you have the Links Manager installed on your SkyBlueCanvas site, and you create a fragment named links, the Fragment Plugin will automatically load the links data objects. The data objects are passed to your fragment in a variable named $data;
Fragmentor maintains this automatic data loading and your data is still passed in the $data variable. Fragmentor, however, adds a new variabled named $params which is a keyed (associative) array corresponding to the key=>value pairs of your query string.
Your query string can contain as many key=>value pairs as you like and your key names can be anything you like. The only limitations are:
- The name and view keywords are reserved by the plugin
- Your query string must be a well-formed query string meaning it must follow the rules or a standard URL query string (no spaces, no special characters, etc.)
Important
Existing SkyBlueCanvas fragments are not currently configured to work with the Fragmentor Plugin. Fragmentor is intended to give you more flexibility in creating your custom plugins. We may eventually merge Fragmentor with the core SkyBlueCanvas code but at the present time it should be considered and treated like any other third-party add-on.
Jun
16
Skin Installer
Filed Under Extensions, SkyBlueCanvas CMS
SkyBlueCanvas allows you to install an unlimited number of templates.
Requirments
SkyBlueCanvas templates must be saved as a ZIP archive before installing.
How To Install a Template
Diagram 12
Click the Templates icon on the main dashboard. You will be redirected to the Templates Dashboard shown in Diagram 12. From there, click the Install Skins button shown in Diagram 12-C. You will be redirected to the Skin Installer manager show in Diagram 15.
Diagram 15
Diagram 15-A
Digram 15-A indicates the template name and a camera icon. If the skin includes a thumb.gif file in its images directory, you can view a thumbnail of the template by positioning your cursor over the camera icon.
Diagram 15-B
Digram 15-B indicates the delete control. You can delete a template by clicking this control. If only one skin is installed, however, SkyBlueCanvas will not show this control.
Diagram 15-C
Digram 15-C indicates the Add button you use to open the Installer Control. To install a new template, click this button and you will be re-directed to the Installer Control shown in Diagram 16.
Diagram 16
Diagram 16-A
Diagram 16-A indicates the text field where you enter a name for your skin. This name will be used as the name of a directory, so it is suggested that you use a name that only includes lower-case letters and numbers.
Diagram 16-B
Diagram 16-A indicates the File Selector. Click the browse button. A file browser will open in a dialog. Use the file browser to navigate to and select the ZIP archive containing the skin you wish to install.
Diagram 16-C
To upload the new skin, click the Install button indicated in Diagram 16-C. SkyBlueCanvas will upload your new template to a temporary directory, un-archive it and move it to the templates directory.
Activating Your New Template
To activate your new template, navigate back to the Templates Dashboard using the button in the gray menu bar just below the blue sky header. From there, click the Active Skin button on the Templates Dashboard. You will be re-directed to the Active Skin editor shown in Diagram 17.
Diagram 17
To activate the template (or another template), simply select the template name from the selector shown in Diagram 17-A, then click the Save button shown in Diagram 17-B. Now, you can visit your public site and view your new site template.
Caution
The names of content regions are not pre-defined in SkyBlueCanvas. You will want to double-check that the names of the regions have not changed before installing a new template. If the names of the regions have changed, you will need to go through the steps outlined in Collections_Publishing to update where your collections appear.
Additionally, to make sure the names of the layout files have not changed. If they have changed, you will need to update the page layouts in the Page Manager as shown in Diagram 2-D in the Pages instructions.
Jun
16
Skins Manager
Filed Under Extensions, SkyBlueCanvas CMS
Templates – or skins – are the presentation layer of a web site and allow you to change the appearance of your site without making any changes to the content (text and pictures). The SkyBlueCanvas template system is very simple and very flexible. What your site looks like is limited only by your imagination.
Skins are comprised of XHTML, CSS, JavaScript? and image files. SkyBlueCanvas templates contain absolutely no PHP or other executable code and incorporates a simple token replacement concept. You build your XHTML files as you would for any web page and indicate a content region using simple tokens like {region:header}, {region:left} and {region:main}.
When you create a template for a SkyBlueCanvas site, you do not need, however, to build the entire page. Every web page includes the HTML, HEAD and BODY regions, so SkyBlueCanvas includes a page skeleton that defines these major elements. Your template only needs to define what appears between the BODY tags.
Diagram 12
When you click the Templates icon shown in Diagram 1-A, you will be re-directed to the Templates Dashboard shown in Diagram 12. This dashboard shows 4 controls:
- Active Skin (Diagram 12-A)
- CSS Editor (Diagram 12-B)
- HTML Editor (Diagram 12-B)
- Skin_Installer (Diagram 12-C)
Caution: Unless you know what you are doing, you should not attempt to edit the CSS or HTML for your site skins.
SkyBlueCanvas allows you to install an unlimited number of templates. You use the Active Skin manager to select the currently active skin. I will not cover this manager here because it is very simple and self-explanatory.
We will use the HTML Editor as our example for explaining how the editor works. It is actually quite simple because it is only a simple text editor.
Diagram 13
To edit the HTML (and similarly the CSS) for your template, click the HTML Editor button on the Templates Dashboard as indicated in Diagram 12-B. You will be re-directed to the familiar List View shown in Diagram 13.
Diagram 13-A
You can create a new HTML Layout File by clicking the Add button shown in Diagram 13-A.
Diagram 13-B
To edit an existing layout file, click the Edit control to the right of the HTML file you wish to edit (Diagram 13-B). You will be re-directed to the HTML Editor shown in Diagram 14.
Diagram 14
Diagram 14-A
In the field indicated in Diagram 14-A, you can enter a name for the skin. However, changing the name of the HTML file does not rename the file. Instead, it makes a copy of the file with the new name. This is a precautionary measure to prevent you from accidentally breaking the appearance of your site. If you have pages that already use the original name of the layout, you would have to go change these pages individually.
Diagram 14-B
Diagram 14-B indicates the text area where you edit the HTML for the layout file. Make the desired changes to the HTML and click the Save button indicated in Diagram 14-C. That’s it. The next time someone visits your site, the new HTML will be displayed.
Jun
16
Media Manager
Filed Under Extensions, SkyBlueCanvas CMS
SkyBlueCanvas currently supports two types of media – pictures and files.
Pictures are images that can be inserted into the body of a page, displayed in a _Photo Gallery_ and/or used as part of your [Templates].
Files are downloadable assets such as PDFs, Microsoft Office documents and ZIP or TAR files. The system allows you to upload files, move them between directories and rename them. Additionally, in the list view, pictures can be previewed by simply holding the cursor over the camera icon beside the image name.
Diagram 3
When you click the Media icon on the [Dashboard], you will be re-directed to a list view of the media currently available on your site.
Diagram 3-A
Diagram 3-A indicates the selector that allows you to narrow the list of media shown to only those files contained within a specific media sub-directory (Gallery, Skins, Downloads, etc.).
Diagram 3-B and 3-C
Diagram 3-B indciates the path to the file. If the file is an image, you will see a camera icon (Diagram 3-C) to the left of the image path/name. If you hold your cursor over the camera icon, you can view a thumbnail of the image.
Diagram 3-D
If you want to upload (Add) a new file, simply click the Add button indicated in Diagram 3-D. You will then be re-directed to the Media Upload editor. See below (Diagram 4) for more details on uploading files to your site.
Diagram 3-E thru 3-G
Once you have uploaded media files to your site, you can Move, Rename or Delete the files. See Diagram 5 for more information on Moving files. See Diagram 6 for detail on renaming files.
Diagram 4
Diagram 4-A thru 4-C
To move a file from one media sub-directory to another, click the Move link next to the file in the Media List View (Diagram 3-E). You will be re-directed to the Media File Move editor. Diagram 4-A indicates the current name and location of the file.
Diagram 4-B indicates the selector you use to select the new location to which the file will be moved. Once you have selected the desired location, simply click the Move File button indicated in Diagram 4-C.
Diagram 5
Diagram 5-A thru 5-C
To rename a media file, click the Rename link next to the file in the Media List View (Diagram 3-F). You will be re-directed to the Media File Rename editor. Diagram 5-A indicates the current name of the file.
Enter the new name of the file in the field indicated by Diagram 5-B and click the Rename File button indicated in Diagram 5-C.
Diagram 6
Diagram 6-A thru 6-C
To upload a new media file, click the *Add* button shown in the Media List View (Diagram 3-D). You will be re-directed to the Media File Upload editor.
Click the Browse button shown in Diagram 5-A. A file browser will open in a new window. Use the file browser to navigate to and select the file you wish to upload. Currently, SkyBlueCanvas only supports PNG, GIF, JPG image formats and PDF, ZIP and TAR.GZ file types.
Next, select the desired location where you wish to upload the new file in the selector indicated in Diagram 6-B.
Next, click the Upload button indicated in Diagram 6-C.
Jun
16
Page Manager
Filed Under Extensions, SkyBlueCanvas CMS
Pages
SkyBlueCanvas is built first-and-foremost around the concept of pages as the base container. A page can contain text, pictures and other containers (also called collections).
When a new page is created in SkyBlueCanvas, it is automatically associated with a menu item. You create a page, add text and pictures, then indicate in which menu the page should appear (or no menu at all).
View Page List
Diagram 1
Click the Pages icon on the main dashboard and you will be re-directed to a list view of the existing pages in your site. All managers in SkyBlueCanvas follow the same structure:
- List View
- Item Editor
- Groups Editor (optional)
The controls on each List View page will vary but typically will include:
- Add (Diagram 1-A)
- Edit (Diagarm 1-B)
- Delete (Diagram 1-C)
Adding A New Page
Diagram 2
Click the Add button (Diagram 1-A) to add a new page. This will open the Page Editor (Diagram 2).
At first glance Diagram 2 may look a bit overwhelming but it is fairly straightforward and easy to explain.
Diagram 2-A
Item A in Diagram 2 highlights the Title Bar Text field. Whatever you enter in this field will appear in the Title Bar of the browser window when someone visits your web site.
Diagram 2-B
As mentioned previously, when you add a new page, it is automatically associated with a menu item. Items B highlights the text that will appear in the Menu Link for this page. So, if you enter Home Page in this field, the menu item will read Home Page.
Diagram 2-C
Diagram 2-C highlights the selector with which you indicate _which_ menu the menu item for this page should appear. SkyBlueCanvas allows you have create different navigation menus for your site. We will cover creating Menus in the [Menus] section.
Diagram 2-D
Diagram 2-D highlights the selector for choosing which HTML template to use for this page. SkyBlueCanvas allows you to create an unlimited number of page layouts with your Templates which can be assigned to individual pages using the selector in Diagram 2-D.
Diagram 2-E
Diagram 2-E highlights the Parent Selector. The Parent Selector allows you to assign a page as a child of another page to create structure to your site. The Parent-Child relationship between pages is closely tied to the way SkyBlueCanvas builds menus. When a page is assigned as a child of another page, the child page will appear as a sub-menu of the menu item for the parent page. You can create as many sub-levels of pages as you want in SkyBlueCanvas so you can a Parent-Child-Grandchild-greatgrandchild setup if your site calls for it.
Diagram 2-F and 2-G
Diagram 2-F and 2-G highlight the HTML editor. SkyBlueCanvas uses the Wymeditor WYSIWYM (what you see is what you mean) Semantic HTML Editor. The editor is intended to create semantically correct, structured XHTML.
Diagram 2-F indicates the Tool Bar. If you are familiar with Rich Text editing and Word Processors like Microsoft Word, you should recognize these controls.
Diagram 2-G indicates the body of the editor where you edit the text and pictures for the page. Simply click your cursor in the grey area if this is a new page, or anywhere in the body of the text if this page already has text, and start typing.
Diagram 2-H
SkyBlueCanvas allows you to apply Meta Data to pages globally or page-by-page. Meta Tags are created in the Collections control panel. Once created, the Meta Groups can will appear in the area highlighted by Diagram 2-H as check boxes. To apply the desired meta group to this page, simply check the box next to the group name.
You can also enter keywords associated with this page in the text area indicated in Diagram 2-H.
Diagram 2-I
Diagram 2-I indicates the selector that allows you to publish-up or publish-down a page. This feature allows you to create a draft of a page without actually displaying it as a menu item or on the site as viewed by the public.
Diagram 2-J
Diagram 2-J indicates the selector that allows you to specify a page as the Home Page or Default Page. Only one page can be set as the default. The default page is the first page that is viewed when a visitor comes to you site.
Diagram 2-K
This is pretty self-explanatory but once you have finished editing your page, click Save and the page is saved.
Jun
16
The SkyBlueCanvas Dashboard
Filed Under Extensions, SkyBlueCanvas CMS
A SkyBlueCanvas site is broken down into five simple units. These units are:
- Pages
- Media
- Collections
- Templates
- Settings
In the diagram below, you will see the controls to access these five units labeled item [A]. To edit each unit, simply click the icon of the section you wish to edit.
In the upper right-hand corner of the browser window you will see, labeled items [B] and [C], two links. These links don’t bear detailed explanation. Item [B] will log you out of the system.
Item [C] will take you to a list view of emails you have received through your site. The mail center in SkyBlueCanvas is not a fully-functional email client, but rather a backup and easy access point to view your messages. The inbox link will show the number of unread messages you have. Unread messages will be marked in bold text in the message list.
Jun
14
Example SkyBlueCanvas Extension
Filed Under Extensions, SkyBlueCanvas CMS
The code below is the actual code for the Events manager for SkyBlueCanvas. As you can see, the code is short and simple. Most of the heavy lifting is handled by the Manager superclass. The HTML code that follows the sample PHP code is the input form for editing Events items.
<?php
defined('SKYBLUE') or die(basename(__FILE__));
class events extends manager {
function events() {
$this->Init();
}
function AddEventHandlers() {
$this->AddEventHandler('OnBeforeSave', 'PrepareForSave');
}
function PrepareForSave() {
$this->AddFieldValidation('name', 'notnull');
$this->SaveDescription();
}
function InitProps() {
$this->SetProp('headings', array('Name', 'Date', 'Tasks'));
$this->SetProp('tasks', array('edit', 'delete'));
$this->SetProp('cols', array('name', 'date' ));
}
function SaveDescription() {
global $Core;
$this->SaveStory(
$Core->GetVar($_POST,'story', $this->GetStoryFileName()),
stripslashes(urldecode($_POST['description']))
);
$_POST['description'] = base64_encode(
stripslashes(urldecode($_POST['description']))
);
}
function InitEditor() {
global $Core;
// Set the form message
$this->SetFormMessage('Event');
// Initialize the object properties to empty strings or
// the properties of the object being edited
$_OBJ = $this->InitObjProps($this->skin, $this->obj);
// This step creates a $form array to pass to
// $this->buildForm(). $this->buildForm() merges
// the $obj properites with the form HTML.
$form['ID'] = $this->GetItemID($_OBJ);
$form['NAME'] = $this->GetObjProp($_OBJ,'name');
$form['DATE'] = $this->GetObjProp($_OBJ,'date');
$form['TIME'] = $this->GetObjProp($_OBJ,'time');
$form['MERIDIAN'] = $Core->MeridianSelector(
$_OBJ['meridian']
);
$form['VENUE'] = $this->GetObjProp($_OBJ,'venue');
$form['ADDRESS'] = $this->GetObjProp($_OBJ,'address');
$form['CITY'] = $this->GetObjProp($_OBJ,'city');
$form['STATE'] = $Core->StateSelector($_OBJ['state']);
$form['ZIP'] = $this->GetObjProp($_OBJ,'zip');
$form['ADMISSION'] = $this->GetObjProp($_OBJ,'admission');
$form['PHONE'] = $this->GetObjProp($_OBJ,'phone');
$form['URL'] = $this->GetObjProp($_OBJ,'url');
$form['DESCRIPTION'] = null;
$form['STORY'] = $this->GetStoryFileName();
$form['STYLESELECTOR'] = $this->GetObjProp(
$_OBJ,'styleselector'
);
$form['ORDER'] = $Core->OrderSelector2(
$this->objs, 'name', $_OBJ['name']
);
$this->BuildForm($form);
}
}
?>
The code below is the HTML for building the form for adding Events items in the SkyBlueCanvas
admin control panel. You will notice the familiar token format
{name:value} in the example below. Just like the presentation on the
front end, the SkyBlueCanvas managers use tokens as a sort of variable to replace with literal values.
<input id="id"
type="hidden"
name="id"
value="{OBJ:ID}"
/>
<input id="objtype"
type="hidden"
name="objtype"
value="events"
/>
<label for="name">[TERM:NAME]:</label>
<input type="text"
name="name"
value="{OBJ:NAME}"
size="45"
/>
<label for="date">[TERM:DATE]:</label>
<input type="text"
name="date"
value="{OBJ:DATE}"
size="45"
/>
<label for="time">[TERM:TIME]:</label>
<input type="text"
name="time"
value="{OBJ:TIME}"
size="10"
/>
{OBJ:MERIDIAN}
<label for="admission">[TERM:ADMISSION]:</label>
<input type="text"
name="admission"
value="{OBJ:ADMISSION}"
size="45"
/>
<label for="venue">[TERM:VENUE]:</label>
<input type="text"
name="venue"
value="{OBJ:VENUE}"
size="45"
/>
<label for="phone">[TERM:PHONE]:</label>
<input type="text"
name="phone"
value="{OBJ:PHONE}"
size="45"
/>
<label for="address">[TERM:ADDRESS]:</label>
<input type="text"
name="address"
value="{OBJ:ADDRESS}"
size="45"
/>
<label for="city">[TERM:CITY]:</label>
<input type="text"
name="city"
value="{OBJ:CITY}"
size="45"
/>
<label for="state">[TERM:STATE]:</label>
{OBJ:STATE}
<td valign="top">[TERM:ZIP]:</label>
<input type="text"
name="zip"
value="{OBJ:ZIP}"
size="45"
/>
<label for="url">[TERM:URL]:</label>
<input type="text"
name="url"
value="{OBJ:URL}"
size="45"
/>
<label for="description">[TERM:DESCRIPTION]:</label>
<div id="editoranchor"></div>
<textarea id="story_content"
name="description"
cols="55"
rows="22"></textarea>
<input id="storyfile"
type="hidden"
name="story"
value="{OBJ:STORY}"
/>
<label for="order">[TERM:ORDER]:</label>
{OBJ:ORDER}