Building a site with Orchard CMS

Question

I\'m in the early stages of trying to learn Orchard, and I\'m still seem to be struggling with the basics on how to build a page containing a multitude of various content that c

Answer 1

I've just gone through this exact scenario myself. I think that what you want can be accomplished using Orchard Lists. The UX is not exactly intuitive for the end user, but it seems like it's the most straightforward way to accomplish this goal without installing/developing a custom module.

First, make sure you're using Orchard 1.4 because you'll need the built-in support for generating alternates for Container Widgets for each zone. Enable the Shape tracing, Url alternates and Widget alternates modules.

Now, create a list of items as described in the documentation (see http://docs.orchardproject.net/Documentation/Creating-lists). Translate "book review" into "slide" and "book reviews" into "slides" and you get the idea. You can add custom fields to represent your subtitle, description, etc. I'd just keep the image as part of the content itself instead of creating a custom field for it.

If you've followed the steps in the documentation, you should now be seeing a list of your slides rendered as ul/li's. Now you'll want to customize how things are rendered so you can show your custom fields and generally customize the tags. Use the shape tracer and create alternates for the list as you see fit. Now you're free to control all the rendering. See http://weblogs.asp.net/bleroy/archive/2011/03/27/taking-over-list-rendering-in-orchard.aspx and http://weblogs.asp.net/bleroy/archive/2011/05/23/orchard-list-customization-first-item-template.aspx for ideas.

Managing this list from your end-user's perspective is actually quite easy, but I don't really feel that it's very intuitive.

It took me three days of digging through blogs and docs to figure this out for myself.

Answer 2

What you defined in Orchard terms is a Content Type named Feature.

• Go to Contents -> Content Type, and click Create.
• Select those parts by default:
  • Title, because you want your authors to provide a nice title/name for the features
  • Autoroute, which will create a SEO friendly url based on the Title (can be customized)
  • Click Save
• Add specific Fields
  • SubTitle, of type TextField. Configure it to Default, Required.
  • Description, of type TextField. Configure it to TextArea, Required.
  • Image, of type Media Picker. Configure it to Required.
• You can add some Hints to each fields, which will be displayed in the Feature editor to describe what to enter in each field. Very useful for authors.

Now you can create Features by clicking on the link in the top left part of the Dashboard. Next step is to put those features on the homepage. What I suggest is to create a Projection which will be set as the homepage. A Projection is just a Page with an Url, which will display the result of a query as its content. The Query in your case will be "Give me all Features ordered by Creation Date".

• In the dashboard, click on Queries
• Click on "Create a new Query"
• Enter "All Features"
• Click on "Add a new Filter"
• Select Content Type, then select Feature, Save
• Click on "Add a sort Criterium"
• Select "Creation Date", then Descending, Save

At this point, you can already preview the result of the query by clicking on Preview. But what we want is a front-end page.

Create a new Projection by clicking on Projection in the "New" section of the dashboard (top left again) - Give it a title, and don't forget to check "Set as Home page" to make it the home page - Select the only available query, named "All Featrues" - Save

On the home page you should see all the features, ordered by date. But what you want is a slider. At that point you need two more steps: - Integrate a slider jQuery plugin - Render the HTML compatible with your jQuery plugin

By default, when you render a Projection it will use the standard "Summary" layout. But using projections you can decide exactly what layout you want to apply, and exactly what html tags and classes.

• Edit the query named "All Features"
• Add a new Layout
• Select Html List
• Select "Properties" and Save
• Click Add Properties
• Select Display Text, Save
• Do the same for
  • Feature:SubTitle
  • Feature:Description
  • Feature:Image
• Save your query
• Edit the home page projection and select this specific Layout instead of the default one.

You will see that each property is rendered in an html container.

By editing each property you can decide which class to apply, and which html tag to use. By changing them you can render exactly what you want, and customize your CSS/HTML to render the slider nicely. This is purely your HTML know have to apply here, or find some articles about that.

For your editors, they just have to go to the dashboard and add/update some feature content items, it will be reflected on the website.

Optionally there is a Slider module on the Orchard Gallery. You can try this one too. But if you want to handle exactly what happens the technique I described is better.

Answer 3

I'd also recommend this wonderful module called Featured Item Slider. It has all the basic functionalities of a slideshow, including all mentioned in the question, plus some fantastic additional capabilities, such as different animations. You can also fine tune the layout and styling by providing additional css. Get the source here. And here is the slideshow in action. If a module already exists providing the functionality you're looking for, then it's best to use that rather than reinvent the wheel, unless you do it for learning purposes.