Call for Opinions - Project Images

Topics: Customizing Orchard, Writing modules
Jun 8, 2013 at 8:01 PM
Hi everyone,

I am creating a site for a client who is a construction company. On one section of their site they want to display photos of particular showcase projects. They want the site modeled after this (see link).

So you can see that the list of images on the left are the projects themselves. The image(s) in the center are the paginated collection of photos related to that project.

I want to do things the "Orchard way". So my question to you all is, how to accomplish that in the Orchard way. If I were doing a regular old ASP (Forms/MVC) site, I would have a database table to house Projects and also path to images on the filesystem. We don't do that in Orchard (well, sorta).

So is there a module that can relate multiple images to a particular content type? I know that I am going to probably have to create a custom controller (my preference) or widget to display things quite like this. I know I am going to have to create a Project content type. My concern is how to properly do the collection of related images.

Any help would be greatly appreciated.
Developer
Jun 8, 2013 at 10:55 PM
Approaching the question from the practical side, I'd look for the existing slideshow modules on the Gallery for inspiration and also at the latest source: as you may know Orchard now has a Media Library module for handling media (will be shipped with version 1.7). That means handling and storing media is something already well solved (storing files is also possible, and there are services to handle them from code, with 1.6 too), you just need to think about how to present them. This then comes down probably to writing a custom Projector layout provider, for displaying the image media items in a form you want to see.

On the more theoretical side your question is about having 1-N relation ships where the 1 side is a content item while the N side could be a content item or maybe just a plain record. There are several ways to approach this: handling such relationships on the DB level is explained in the docs. If the N part is also a content item you have many existing options to choose from: using CommonPart.Container on the N side to attach them to the 1 side, using Taxonomies (now included in Orchard; the 1 side would be a Taxonomy Term) or using something more exotic like Associativy (what has services to store N-N relationships that you can use from your code; but it has much more to offer of course).
Jun 10, 2013 at 5:19 PM
Edited Jun 10, 2013 at 5:19 PM
This looks like a fun thing to attempt to do myself for my club website.

Before starting I would certainly look at media library (as piedone recommends) before replicating any functionality. If the content type can just select a media gallery that would be great and save a lot of effort potentially.

Left Hand section:
I would grab the products through via a projection. Creating a grid like layout and add the paging (if that is needed like your version) but probably just a list and paging.

Right hand section:
I would go with a rich client side direction. After selecting an item from the left it brings back the data and populates or repopulates the carousel from a controller / web api controller.

All of this could be managed inside a projection layout view exclusively. Or you can separate it a bit by adding a few shapes into the layout view describing the left and right sections.
Jun 20, 2013 at 3:00 AM
Thanks all for the responses.

Piedone, you mentioned a Media Library module. I searched through the Orchard gallery but couldn't find the one you were referring to. Do you have a URL?

I don't have any experience at projections or projection layouts. Are there any example modules or core modules that you can think of that use these? I'd happily look there for code examples.
Coordinator
Jun 20, 2013 at 3:01 AM
Media Library is part of 1.7.
Jun 20, 2013 at 3:35 PM
Bertrand, what is the release schedule for 1.7? I'd like to use it but my deadline for this project is in like 2 weeks.

Matt4446 & Piedone, are there any examples that you think of for producing projections in code?
Developer
Jun 20, 2013 at 7:52 PM
What you need is to implement a Projector layout provider. See Orchard.Projections\Providers\Layouts for examples. I think there are some 3rd party modules in the Gallery containing layout providers too.
Jun 21, 2013 at 2:12 AM
Edited Jun 21, 2013 at 2:14 AM
Piedone wrote:
What you need is to implement a Projector layout provider. See Orchard.Projections\Providers\Layouts for examples. I think there are some 3rd party modules in the Gallery containing layout providers too.
I do recommend taking a look here too. Especially the latest tip of the Orchard Repository where Sebastien's extra (previously contrib) projections have been included. These make it easier to imagine different things to do with projections until more examples pop up.

samuelshirley2008
are there any examples that you think of for producing projections in code?
There are a couple of slider versions that include different projection layouts. Here is one I made earlier (with options for the slider):
There is also a bootstrap version about somewhere, ah here it is:
I Hope that gets you off to a good start.