My Orchard Adventure

Fri, 17 Jun 2011 01:33:16 GMT

A good adventure it has been too.

I must say I am very impressed with the CMS as a whole and the modules that are already appearing in the gallery. It is much easier to customise the layout than many other management systems that I have used, including the much loved WordPress. Of course being a .NET techy and wanting to jump on the MVC band waggon I am sure to say that, but in honesty I believe those with even the minimal amount of coding knowledge would be able to hit the ground running once getting their heads around Razor.

I would of course give a full walk-through but John Papa has already made a great tutorial in creating your first blog at http://johnpapa.net/orchardpart1. I am however going to give a quick overview of my own experiences, which may help you to make up your mind.

Designer Tools

One of the no.1 features of OrchardCMS for those wishing to create custom themes is the Designer Tools Plugin, which provides you with an IE Developer Toolbar like feature to see what is going on in the current page. You can even create your alternative views directly from the Designer tool ready for editing in your chosen editor. The great thing with OrchardCMS is the ability to create custom views for Fields, Parts and Content Types making it them completely customisable and re-usable throughout your site.

Media Browser

Managing documents and inserting them into content can always be a pain but OrchardCMS makes it really easy. As a picture is worth a 1000 words, I'll leave you to look at the following images.

Custom Fields

On each page I have a title image and although there are probably many ways of doing this, one being to create a custom module, I wanted to keep my first experience simple. With this in mind I used the integrated Custom TextField Property and then rendered a custom view in the Layout.

First I placed the new PageTitle zone within the layout file

<div id="page-title">
    @Zone(Model.PageTitle)
</div>

Once this was in place I created a new view that would be used to generate the new title image shape.

@{
    var TitleImageUrl = string.Empty;
 
    if (Model.ImageContent != null)
    {
        var imageUrlContainer = 
            ((Orchard.ContentManagement.ContentItem)Model.ImageContent)
            .Parts.SelectMany(p => p.Fields)
            .Where(f => f.Name == "TitleImageUrl").FirstOrDefault();
 
        if (imageUrlContainer != null)
        {
            var imageUrl = imageUrlContainer.Storage.Get<string>(null);
            TitleImageUrl = Url.Content(Html.ThemePath("/Content/Images/" + imageUrl));
        }
    }
}
@Display(new HtmlString(string.Format("<img src='{0}' />", TitleImageUrl)))

To render this in the correct zone in the content page view I used the following code, passing the current ContentItem into the TitleImage shape

@{
    ViewBag.Title = Model.Title;
 
    WorkContext.Layout.PageTitle
    .Add(New.PageTitleImage(ImageContent: Model.ContentItem));
}

If there is an easier way to do this, then please let me know.

Placement Info File

The problem with adding the custom field included with Orchard CMS is that it renders text to the content, unless someone can tell me otherwise. Either way, the best way to remove something in orchard that isn't required is by using the placement.info file included within the base directory as follows. I also made use of the Content:6 syntax, which made sure the ShareBar was placed after the bodypart within the blog post.

<Placement>
  <!-- Customize where the shapes are rendered -->
  <!-- 
  <Place Parts_Blogs_BlogArchives="Content:before"/>
  <Place Parts_Blogs_RecentBlogPosts="Content:after"/>
  <Match ContentType="Blog">
    <Match DisplayType="Summary">
      <Place Parts_Blogs_Blog_Description="Content:before"
             Parts_Blogs_Blog_BlogPostCount="Meta:3"/>
    </Match>
  </Match>  
  <Match Path="/About">
    <Place Parts_Common_Metadata="-"/>
  </Match>
-->
  
  <Place Parts_Share_ShareBar="Content:6" />
  <Place Fields_Common_Text-TitleImageUrl="-"/>
</Placement>

Modules

Other than the obvious Blog module, there are some pretty good 3rd party tools that are freely available through the module gallery. The main ones worth noting are:

Google Analytics
Nothing much more than the ability to place your analytics script on each page, nevertheless very useful.
CyberStride.Contacts
Does all the grunt work on saving contact forms and recieving emails.
Syntax Highlighter for Orchard
Allows you to format your code nicely, as you can see in this post.
Content sharing
The ability to share your pages and blog posts is made easy using this module and the AddThis service.

Conclusion

To take advantage of the full capabilities of Orchard CMS I have a lot more researching to do, but turning my basic website into a fully fledged CMS / Blog site has been made a pleasureable experience and more importantly, pain free. Hope my first blog didn't bore you too much.