Mirakel, the site for my wife's new venture is up and running, since a couple of days now and I'm happy with the results :)
The site is based on Orchard CMS which is an ASP.Net MVC based web content management system.
Orchard is a very active open source project led by these guys with plenty of support on their codeplex forum next to their good documentation.
I started with Orchard something like 6 months mostly in my spare time. I used several other CMS systems before ranging from smaller ones like Kentico to big enterprise products with all pro's and con's. However this time I wanted a web CMS that was simple to setup and use but also extensible in .Net if I needed to.
I started out very simple with some trial sites and see what was in the box. Next I trialed with the source code in Visual Studio trying out some custom module development. That was around version 1.2, 1.3 ish of Orchard however when upgrading my way to 1.5 I no longer had the need for a custom module and I was able to do everything with the features out of the box.
With Orchard I also had the opportunity to try out WebMatrix a new free and simple web development environment that works like a charm with Orchard.
Workshops
The core of the site is around workshops (for kids). My wife is starting up just now and is planning for 1 workshop a month for the first year, so, roughly 12 workshops. A workshop is implemented like a custom content type which you can achieve in the admin (www.yoursite.com/admin) by going to the third tab of the content menu. Using a custom content type I was able to add the following fields:
- Date of the workshop (date time field)
- Location of the workshop (link field)
- Abstract of the workshop (text field)
- Thumbnail of the workshop (media picker field)
With these fields separated from the main content I'm able to format and position them on the site with mostly placements, alternate templates and a custom theme with specific css, we'll come back to that later.
Next to fields the workshop also contains some content parts (Common, menu, publish later, tags, etc.). These are small building blocks that define both the content and behaviour or representation. So, basically you create a content type, add some standard parts to it and extend the whole with the fields that you need.
Theme
When I was starting out there weren't as many themes as today so I added to the gallery my own HTML5 theme based on HTMLKickstart (read more about it here). I then created a derived theme from it called "Mirakel" where I could set all site specific CSS whilst keeping the base theme clean. I believe it's a good way to work, have a clean parent theme and play around in a derived one. When you have sound and good theme elements you can boost them to the parent theme and share them with the community.
If I would start again now, I might go with the HTML 5 Clean orchard theme although I believe the HTMLKickstart has more features. Alternative their's the twitter based bootstrap theme, which is also ver nice.
An important page in your theme is the layout.cshtml where you define you're blueprint for your site layout. It is also the place where you add your css and script files like:
If I would start again now, I might go with the HTML 5 Clean orchard theme although I believe the HTMLKickstart has more features. Alternative their's the twitter based bootstrap theme, which is also ver nice.
An important page in your theme is the layout.cshtml where you define you're blueprint for your site layout. It is also the place where you add your css and script files like:
SetMeta("X-UA-Compatible", "IE=edge,chrome=1"); Script.Require("jQuery").AtHead(); Script.Include("kickstart.js").AtHead(); Script.Include("jquery.cycle.lite.js").AtHead(); Script.Include("jquery.cycle.lite.fade.js").AtHead(); Style.Include("kickstart.css"); Style.Include("style.css"); Style.Include("derivedStyle.css");
The style.css is from the parent theme and the derivedStyle.css is from the child theme. The latter is as said my css playground where I arrange most of the visual stuff of the Mirakel site.
Its not hard at all to build your own theme, have a look at the orchard documentation.
Its not hard at all to build your own theme, have a look at the orchard documentation.
Placement
In your theme folder there's another important file, called the placement.info where you can arrange the individual pieces on your screen. You can arrange the order and their visibility. Here's a part of mine:
<Placement>
...
<Match ContentType="Workshop" DisplayType="Summary">
<Place Parts_Tags_ShowTags="-"/>
<Place Parts_Common_Metadata_Summary="-"/>
<Place Parts_Common_Body_Summary="-"/>
<Place Fields_MediaPicker-Thumbnail="Header:1"/>
</Match>
<Match ContentType="Workshop" DisplayType="Summary" Path="/">
<Place Fields_MediaPicker-Thumbnail="Header:9"/>
</Match>
... </Placement>
First, you define the criteria where the visual changes take place, this is done via the "Match" element with filters for ContentType, DisplayType and Path; scope attributes as they call these in the documentation. In the example above I'm limiting in the first match to only content of type "Workshop" and when they are used in Summary mode. The summary mode is used when you display a list of workshops. You can also use "Detail" here if you mean the workshop page itself. In the second Match element I scope it even further to only the home page indicated by the Path="/".
The Place elements define what you want to do with your parts or fields. If you set them to "-" then you are actually hiding them, setting them to another value like "Header:1" then you want this part or field to come first in the header section.
The Place elements define what you want to do with your parts or fields. If you set them to "-" then you are actually hiding them, setting them to another value like "Header:1" then you want this part or field to come first in the header section.
Alternate Templates
As I used the placement technique for where and when a piece should be displayed I used the alternate templates to define how I want to display them.
I just love how the orchard team created the Shape Tracer module, because using this extension module it is very easy to create an alternate template. Here's how you do it:
- First, enable the shape tracing module in the module section of the admin.
- Go back to your site and notice the small rectangle in the bottom right of your browser screen. This will slide in the shape tracer that is much like a Firebug or Chrome's developer tools.
- Click the element on your site that you want to change and the shape tracer displays a number of options depending on the url scope you would like.
Modules
The extensibility of Orchard comes in the form of themes on the one hand, but more importantly from Modules. The gallery shows currently 422 unique modules for all kinds of extensions. I wrote a DateTime Range field as module myself too.
A module that you'll be using most likely is the Search module to add search capabilities to your site. This is based on Lucene search engine.
In version 1.5 most basic modules are there by default, but before you had to install modules for the different field types (text, links, etc).
A module that you'll be using most likely is the Search module to add search capabilities to your site. This is based on Lucene search engine.
In version 1.5 most basic modules are there by default, but before you had to install modules for the different field types (text, links, etc).