HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


ocPortal Tutorial: Advanced custom pages of information

Written by Chris Graham, ocProducts
ocPortal provides features to allow Comcode pages to be very feature rich. This tutorial explains two advanced aspects to this: blocks and 'inline attachments'. It will also explain how ocPortal allows your website content to be organised using different methodologies.



Blocks

If you have read the 'custom pages of information' tutorial, you will know that using Comcode pages, you can type in text that visually resembles the look of the page (unlike HTML, which can look very complicated). This is a very powerful tool, but it is ultimately limited by the fact that you are only producing a document, not an interactive, data-bound, part of a website: if this was all you could do (forgetting modules for a minute), then ocPortal would not be much more powerful than a word processor.

ocPortal has a concept called a 'block'. Blocks are essentially building blocks that can be inserted into a Comcode page in order to add the aforementioned interactive and data-bound functionality that is so important to a modern website. At the time of writing, ocPortal contains 67 blocks for you to use, and we are planning more of them for future versions.

How to use a block

Thumbnail: Actual Comcode that references blocks

Actual Comcode that references blocks

Unlike other systems that you may have experience with, ocPortal blocks (such as news blocks or poll blocks) are not arranged graphically. Usage of blocks is easiest shown by example. If you login to your site as your administrator user, and choose to edit the front page of the Welcome Zone, then you will see the page consists of Comcode: in particular, you will see that the '[block]' tag is used many times in the page.
To use a block, all you actually need to do is to use the Comcode '[block]' tag, with the name of the block as the tag contents. Parameters passed to the block simply get placed as parameters for the block tag itself.

The available blocks are classified into three groups:
  • Side blocks. These are intended to be shown on a panel page.
  • Main blocks. These are intended to be shown on the body of the site (an actual page).
  • Bottom blocks. These are intended for use in the footer of the site.
These classifications are not fixed however. It is common, for example, to use the main_poll block on a menu; by re-templating, any pre-written visual assumptions about placement may be broken down.

Cheating

As mentioned in the above section, you can add a block using the Comcode '[block]' tag. However, you don't need to type this code manually – instead just click the obvious 'Block' button and ocPortal will provide a popup wizard to help you.
The Wizard will generate the Comcode for you and place it approximately where your caret was. You can move it around by cut&pasting.

Available blocks

Use the "block construction assistant" (linked to via the 'Add block' button on the Comcode page editing screen). This assistant will list all the blocks, provide a helpful interface to defining the block parameters, and allow you to preview the blocks.

Website content organisation

Web Content Management systems typically provide one of two systems for organising content:
  • Organising content types separately via modules
  • Organising content types together via a single tree structure (or often, just categories without an actual tree structure)

ocPortal organises content types via modules (with their own tree structures), but it also provides functionality so that your website can appear organised under a single tree structure.

Comcode pages may be organised to form a tree structure and then those Comcode pages may have blocks placed within them to display content.

Embedding entries

To embed entries you may use the 'main_content' block. This is described in more detail in the 'Providing featured content' tutorial.

Embedding categories

The 'main_download_category', 'main_cc_embed', 'main_gallery_embed' and 'main_news' blocks allow you to combine categories with your own personal wrapping Comcode, which is a very useful tool if you wish to integrate them tightly into your site. We do not, however, provide this functionality for all kinds of module because it would become over-complex. We provide a special module->block feature to bridge this (further details in the 'Provided featured content' tutorial).

Exporting attachments

Thumbnail: Where to export a Comcode page from

Where to export a Comcode page from

Thumbnail: An exported Comcode page consists of text like this

An exported Comcode page consists of text like this

Comcode pages support attachments, so that media may be arranged in the document to make a rich experience. When you create or edit your page, you have the option to add your attachments, and to arrange the Comcode attachment tags in your document, to perfect the layout.
The Comcode system also has support for 'inline attachments', which are constructed in a similar way to how attachments are stored in e-mail addresses (technically, it is called base64-encoding). This feature is very useful if you want to give a Comcode page, complete with attachments (images, or downloads, for instance), to another ocPortal user (for example, we are using it to distribute tutorials). When 'inline attachments' are found, ocPortal will extract them, much like the extracting of an archive, and rewrite the page so as to reference the extracted files as if the attachments were uploading locally.
To export a Comcode page with 'inline attachments', choose to edit the page, and click the 'Export page' link.








Concepts

Block
Building blocks that can be inserted into a Comcode page, in order to add interactive and data-bound functionality

See also