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:

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

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>
<div id="htmlcaption-1">
	<h5 >Headline 1</h5> <p>Sub-Headline 1</p>
</div>
<div id="htmlcaption-2">
	<h5>Headline 2</h5> <p>Sub-Headline 2</p>
</div>
<div id="htmlcaption-3">
	<h5>Headline 3</h5> <p>Sub-Headline 3</p>
</div>

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!

Advertisements

2 thoughts on “Orchard’s Projector Module: the tool of choice?

  1. Thanks for sharing your experience with Orchard. Just like you outlined in your post, I would like to sequentially iterate over a list of content items and display information using Projections and Projector Widgets

    I am new to Orchard CMS and using Orchard 1.8 with SQL Server as the database.

    I installed “Orchard Projections” Projector – Version: 1.8 (https://orchardprojections.codeplex.com/)
    and Projection Layouts 1.0 (http://gallery.orchardproject.net/List/Modules/Orchard.Module.Contrib.ProjectionLayouts)

    I am not have been unable to get it to do anything other than display queries of content types (in a Projection Widget in a Layout) as just a list (UL/LI structure). None of the “Orchard Projections settings” seem to change that behavior. So, it seems the custom layout set up through the additional features/functions/settings in the Layout section when creating a query are not working. Or I just don’t understand how to do it. (I have not found any docs for the modules and the one video that I found “Orchard Harvest 2012: Projections” by Bertrand Le Roy (http://www.youtube.com/watch?v=Ka55wTTXZg8) indicates that what I want to do is possible with this module. But even following the steps Bertrand outlines in his vide do not work for us.

    My goal is to be able to display a selected set of content (retrieved by a query) into a zone on a layout with the content type’s content formatted the way I want. However, I want to something more complex than a UL/LI HTML structure. Something like have an H2, followed by P element for presentation of the query results, for example. Of course more complex layout would be expected as well.

    I know how to control the page layout with DownPlay Design’s Layout Selector – 0.2 http://gallery.orchardproject.net/List/Modules/Orchard.Module.Downplay.Orchard.LayoutSelector) module and Layout files. DP Layout selector also allows the selection of a layout at the Content Type level when the content is entered, since it adds the selection of a Layout to all content types (using a layout selector drop down list that contains any defined Layouts in the Theme).

    However, how do I get a query (say containing several news article contents) to display into the “AsideFirst” zone in any other formatting other than a list (UL/LI structure) which seems to be Orchard’s default for everything is what I am wrestling with.

    Any insight/assistance or pointing us to docs/tutorials on how to do this would be greatly appreciated.

    Thanks in advance,

    K.E.

    • Keith, I wish I could point you in the right direction, however, after spending some time with Orchard, I walked away with the conclusion that it just wasn’t the proper fit for my needs. It is still a very young platform and something that will require a lot of effort to maintain until the community comes together to harden it. Sorry I could be of no help. Wish you the best of luck!

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