Content Management Systems work when they are able to take ugly mark-up that users cut and paste from word documents and make it look perfect, work on any device and solve ever changing business needs. Composite C1 is a free open source CMS that helps you produce the beautiful mark-up you desire instead of mangling it. It is all part of a focus on letting web professionals excel at their craft, so far this focus has made Composite C1 the best rated CMS on the open source portal CodePlex. In this article I will show you how easy it is to get started with Composite C1 by creating a blog and integrating a third party picture gallery.

Getting started

Go to http://www.composite.net/download and install Composite C1 using WebMatrix or download it to Visual Studio – the WebMatrix install process is very straightforward and works on any Windows machine. The first time you start Composite C1 you are greeted with a setup wizard that lets you tailor your starting point – select the starter site that fits your needs and complete the wizard.

Once your site has been initialized, you are greeted with the C1 Console and you are ready to customize your website. If needed, hit F1 or visit http://users.composite.net/Getting-Started this gives a basic introduction to the content management features.

Adding and mixing features

Composite C1 is a platform that enables you to customize and create features using wizards and languages ranging from JavaScript, XSLT MVC, C# and ASP.NET Web Forms. In this introduction we will just focus on the UI. To show the versatility of the CMS let us install a blog and a Picasa based gallery feature and publish content using a mix of the two. Here is how to install:

  1. Open the “System” perspective in the C1 Console.
  2. Expand “Packages”, “Available Packages”, “Composite.Media”.
  3. Select “Composite.Media.ImageGallery.Picasa” and click “Package Info” on the toolbar. This gives you access to information about the package, including a “Read more” button.
  4. For now just click “Install” and complete the installation.
  5. Now expand “Composite.Community”, select “Composite.Community.Blog” and install this package, too.
  6. When the blog has been installed, your C1 Console will reload.

Watch how to install the Blog and Picasa Gallery packages:

With the blog and the gallery feature installed, let’s create a blog page:

  1. Open the “Content” perspective.
  2. Expand “Websites”, select “Frontpage” and click “Add page …” on the toolbar.
  3. Give your new page the title “Blog”, select “Blog” as the page type, and click “Finish”.
  4. The editor for your blog page launches. It is already set up correctly, but you can tweak the blog element’s behavior and layout template here if you like.
  5. Notice the green boxes with a small lightning icon – these are C1 Functions and they are what brings about dynamic content.
  6. Publish the “Blog” page clicking “Publish” on the toolbar.

Watch how to create and publish a blog page:

  1. In the navigator tree, expand the Blog page, select “Blog Entries” and click “Add Blog Entry”. The editor for your new blog post launches.
  2. Give your blog post a title and then switch to the “Content” tab.
  3. Write some content and then click “Insert”, “Function”, select “Composite.Media.ImageGallery.Picasa” and click “OK”.
  4. This particular gallery shows images from Picasa and uses a URL to locate a gallery RSS feed – copy/paste the following URL into the Album RSS URL field: https://picasaweb.google.com/data/feed/base/user/busja43/albumid/5266647566634729569?alt=rss&kind=photo&hl=en_US
  5. Click OK to close the dialog, save the blog post, locate it in the tree and publish it.

Now if you browse your website, you will find a “Blog” in your main menu, hosting your post with the Picasa gallery.

Going deeper

You can change the blog and gallery behaviour via parameters and customize the mark-up located in the “Functions” perspective, below “XSLT Functions”. You can also read about how you can redesign and configure the blog  and the Picasa gallery.

We have only scratched the surface of Composite C1 and you can continue by looking into customizing the starter site, changing layout templates, developer videos - Composite C1 is layered in a way that allows you to get up and running fast and still be as technical as you please.

Be sure to visit http://compositec1.codeplex.com/ where you can propose features, ask questions or give helpful critique in the discussion forum – Composite C1 is free, open source and will blossom if you engage in the community!