Orchard’s Projector Module: the tool of choice?

Being new to Orchard, I was hoping I could minimize the learning curve and get by with just theming a site and using the out-of-the-box functionality so-to-speak to quickly get a website up and running.  I picked a theme from Script Tutorials called Mono that I wanted to implement on the Orchard platform.  While I’m still in the process of working this theme into Orchard, I wanted to share some of what I’ve learned along the way.  Keep in mind, probably less than a month ago, I had only heard of Orchard as being a viable open source platform for CMS.  I’m still only scratching the proverbial surface with Orchard.  My hope is I can retain more through sharing my experiences along the way.  If it turns out to be a help and encouragement to you, I’d love to know and may consider sharing more of my experiences working with the platform.

One problem that has broadened my understanding of the Orchard platform was coming up with a solution that would let Orchard inject a specific HTML stream to the client based on a list of Content Items.  Simple, you say, just use the new Projector Module and whip out some custom queries and your well on your way!  Well, almost.  I love the flexibility of the Projector Module and I intend to use it extensively if I become married to this platform, but I couldn’t quite get the Projector Module to succumb to my will for what I see could be a very common pattern.  Projector Module is great when you want to sequentially iterate over a list of content items and display information.  For example, if I had a Content Type consisting of Name, and ImagePath, the Projector Module could easily filter by that Content Type an produce HTML similar to the following:

	<img src="~/images/image1.jpg" name="Image1" />
	<img src="~/images/image2.jpg" name="Image2" />
	<img src="~/images/image3.jpg" name="Image3" />

But my problem was that I needed to generate output similar to this instead:

<div id="slider">
	<img src="~/images/image1.jpg" title="#htmlcaption-1">
	<img src="~/images/image2.jpg" title="#htmlcaption-2">
	<img src="~/images/image3.jpg" title="#htmlcaption-3">
<div id="htmlcaption-1">
	<h5 >Headline 1</h5> <p>Sub-Headline 1</p>
<div id="htmlcaption-2">
	<h5>Headline 2</h5> <p>Sub-Headline 2</p>
<div id="htmlcaption-3">
	<h5>Headline 3</h5> <p>Sub-Headline 3</p>

Where a Content Type consisting of Name, ImagePath, Headline, SubHeadline is used to populate the pattern above.  I could not see a feasible way to do this with the Projector Module.  I could have created two Projector Widgets on the same page I suppose; one to generate the content in the “slider” div and another to produce the other div tags; but that seems to be too expensive having two widgets essentially iterating over the same data twice!  Maybe not; but it does make it more complex for the contributor who has to keep up with it in the Administrative Section.  And what about the dependencies?  I need to make sure the page running these widgets references jQuery among other custom scripts and styles.  Using Projector for this just seemed like using a Flat-head screw driver on a Phillips-head screw.  It may do the job, but it’s probably not the best tool of choice.

This leads me to the decision maybe it’s going to require a custom module.  Reviewing similar modules in the gallery, I ran across one that essentially solved this problem.  NimblePros has produced the Featured Item Slider, a module that creates a slide show that comes very close to the functionality I was aiming for in my selected theme.  I tried using the Featured Item Slider and was mostly successful, but it wasn’t producing the *exact* functionality.  But now, I have a good idea that this is the direction I need to head toward, so I’m in the process of modifying the Featured Item Slider to create a simpler, less configurable, module that produces exactly what I need!

Stick around and I’ll share what I’ve learned as I dive into the details of Creating an Orchard Module!

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s