Adding Mediapicker field to a non content item

Topics: Customizing Orchard, Writing modules
Jun 8, 2012 at 10:41 AM

Hey everyone,

I'm writing a custom module and want to use the mediapicker field on one of the non-content parts.

I include for example, naam, email address, tel nr etc... to create employees and I also want ot add the posibility to add their picture.

What should i write in my controller and view?

Kind regards,


Jun 8, 2012 at 12:32 PM
Edited Jun 8, 2012 at 12:32 PM

I don't think you can use a content field on something that is not a content part. If you have just an Employee, you would need to create your own editor template for this type. You could check how the MediaPickerField launches the media picker dialog, and duplicate the required javascript (or maybe the MediaPickerField uses an editor template that can be reused, but I don't think so)

Can't you create an EmployeePart and attach a MediaPickerField to it?


Jun 8, 2012 at 1:31 PM


I'm using my custom back end code and render everything in custom views so I can't make a contentpart, I'll try and see how it launches from a content part but I'm affraid i wont find it, I'm still a rookie :)

So if you know anyone who has the code that would be a great help!


Jun 9, 2012 at 5:22 AM

But why would you do that, especially if you're still a rookie? Start easy and just use the system instead of fighting it.

Jun 10, 2012 at 12:14 PM


I don't think adding a mediapicker to a non content item is fighting the system no?  This should not be so difficult for an extendable cms system I think.

The thing is that I don't want the employees to be content items, is just want to render them in a search function and show a picture...


Jun 10, 2012 at 1:22 PM
borrierulez wrote:

This should not be so difficult for an extendable cms system I think.

It's not difficult if you know how to do it. To see how to use the MediaPicker, just have a look at the Orchard.Fields module. There you'll find the code for the MediaPickerField that you can use as an example.

Just being curious: why don't you want the employees to be content items? What's the purpose of porting your existing back end code to Orchard if you are not taking advantage of it's features (which could be considered fighting against it, yes?)

Regardless our opinions on that, one of the neat things about Orchard is that you are perfectly able to do it your own way. You just have to do more yourself. In this case, you could create an old fashioned MVC style EditorTemplate for your employees Picture property, using the MediaPickerField code as an example.

What's important to remember is that the MediaPickerField is a content field that can only be attached to a content part, not to just an entity class like Employee. The MediaPickerField leverages the MediaPicker. Since you don't have an Employee content part, you cannot attach a content field. So you need to launch the MediaPicker dialog yourself (from your custom Picture editor template) and set the Picture property yourself.

Jun 10, 2012 at 2:17 PM


I want to add a page to the frontend of my site something like this:

Type an employee name (textbox) searchbutton

Dropdownlist for a schooll searchbutton


Display search results for an employee and for a school in the same DIV


If you could see the design it would be clearer :) Maybe I could send it to you?

So i don't need the content functionality..


Jun 10, 2012 at 7:38 PM

If I understood correctly, you are creating a search page where users can search for employees by name for a given school, right? Even so, I think that still doesn't explain why you wouldn't use the content type system. Let's imagine you have an EmployeePart<Employee> class and a content type called Employee (which consists of at least the EmployeePart). You could now use the IContentManager class to query for employees by name and school (id). This makes it very easy as well to attach the MediaPickerField to the EmployeePart. What's more, now that there is an Employee content type, you can attach the AutoroutePart so you don't have to create a details controller action yourself, and in general take advantage of all the goodness that comes with Orchard.

Jun 10, 2012 at 7:51 PM


Thanks for your time and explanation, I think i'm missing a lot of knowledge about the orchard system which I don't seem the find on the website (I even followed the pluralsigt video's) I really want to evolve in programming for Orchard (I'm also a Microsoft bizzspark partner) where do you think I can follow a course or find more information on how the Orchard system works?


Jun 10, 2012 at 7:54 PM
Edited Jun 10, 2012 at 7:57 PM

I would start by looking at the source code of gallery modules, starting with simple ones that do something similar to what you are trying to achieve.

One more note one what you said earlier: adding a media picker field is extremely easy in this CMS if you use its *content* system. If you choose not to, of course it will be a little more difficult.

Jun 10, 2012 at 8:05 PM


I think I don't understand the whole content part idea, I would love to send you the design i'm working on to see when to use content parts and when not

I already developed the whole module (database, backend-admin input) and now am struggling on how to present it on the frontend)


Jun 10, 2012 at 9:39 PM

If you are going to work with Orchard, you have to understand that, otherwise you might as well work in straight MVC. I just rewrote a topic on this so it fits the latest version of Orchard:

Jun 12, 2012 at 9:52 AM


I've read your text and think I understand it a little better.

Should I create two content types, employee and school, create a many to many relationship between them, create a template (cshtml in the view folder of my module) where the code is generated from the school's and employees drivers to display the search function on the frontend?

Also, do I need the autoroutepart as I don't want to display schools or employees as seperate pages?


Jun 12, 2012 at 8:09 PM
Edited Jun 12, 2012 at 8:24 PM

Ok guys,

I've put the designs on my skydrive, this is the site I want to build with Orchard!193

medewerker = employee

instelling = school

So, I create two content types school and employee (with two content parts school and employee)

An employee has a name, email and photo, an emloyee also has a function title, editors can define the function titles also in the admin backend)

Employees can work in different schools.

So do i add fields for name email and photo on the employee type and define a list for schools and function titles on the employee part (and also on the employee record)? I'm I correct? (vice versa for schools, schools also have a one to many relation with the cities they're located in (gemeente/stad on the design)

Now what is not clear how can i build that search page on the front end, is that also a content type or do I have to define a template?

I hope my explanation is a bit clear... :)


Jun 13, 2012 at 5:23 AM

Seems about right except that if you have an employee part, you could just build name, email as string properties on the part. Photo will be easier to build as a media field, and function as an enumeration field.

As for a search page, it depends what you mean by that: search can be enabled through the Lucene, search and indexing features.

Jun 13, 2012 at 7:57 AM


I thougt i could use the fields so i could benefit from the build in validation (like email field)

For the search page (or any other field), I just wonder how i can build a page on the frontend where i can display code (or parts) from my module. Can I create a page and the change the code for that page (also if i add a page can i manually modify that?) or do I need to create another contentype (searchpagecontenttype) for instance and add the code their or do I need to create a view in my module?


Jun 13, 2012 at 8:06 AM

Sure, that's fine.

For creating a special screen for your module, what you can do is implement a controller action. The action should return a shape result. There are plenty of examples of that.

Jun 13, 2012 at 8:38 PM

ok, thanks for the explanation, I'll get to work but fear not, I'll return with more questions! :) :)

Jun 18, 2012 at 10:47 AM


Something strange has happened, I created the content type with a common part and removed it afterwards because I don't need it, I added my custom content part. My content type doesn't have a title or anything, just my custom content part.

Now when I add a new content type (school) It gets created but it doesn't show up in my contents. What could be the problem here?

Also I get an error on the autoroute: Permalinks in conflict. "scholen/" is already set for a previously created School so now it has the slug "scholen/-2"


Jun 18, 2012 at 10:57 AM

Hi Borrie, you'd better add the Common part, as some of the Orchard code expects this part to be present.
As for the conflicting permalinks, make sure that there are no other content items with the same slugs.

Jun 18, 2012 at 11:16 AM


Thanks, adding the common part fixed the issue of showing the types.

Now 2 questions, I'm using SQL2008R2 DB, can I just delete the DB and delete the app_data folder to reinitialize?

And also here is my autoroute code I added in the migration, do you see something wrong?

            ContentDefinitionManager.AlterTypeDefinition("School", builder =>
                builder.WithPart("AutoroutePart", partBuilder =>
                        .WithSetting("AutorouteSettings.AllowCustomPattern", "true")
                        .WithSetting("AutorouteSettings.AutomaticAdjustmentOnEdit", "false")
                        .WithSetting("AutorouteSettings.PatternDefinitions", "[{Name:'School', Pattern: 'scholen/{Content.Slug}', Description: 'scholen/school'}]")
                        .WithSetting("AutorouteSettings.DefaultPatternIndex", "0")));

Jun 18, 2012 at 11:45 AM
Edited Jun 18, 2012 at 11:46 AM


Yes, deleting the DB and app_data contents will allow you to reinitialize. Although I think you need to manually create an empty db first (Orchard will then generate the tables during setup). I'm not sure though, maybe it will actually create a new db for you.

At first sight, I don't see anything funny with your autoroute code. Is there something not working?

Jun 18, 2012 at 1:03 PM

Ok, I've deleted the folder, created a new empty database but now my contentpart isn't showing on my contenttype :) heeeelp! :)

Jun 18, 2012 at 1:34 PM



Sorry I cried to soon :) I've found my error in the log of app_data, regarding the autoroute:

I've just created the first school in the new database and this what I get for the permalink:

<label>Permalink</label> http://localhost:30320/OrchardLocal/ <input id="Autoroute_CurrentUrl" class="text" name="Autoroute.CurrentUrl" type="text" value="scholen/" /> Leave empty to use the default permalink pattern (School: scholen/school)

When I create and publish the second one again I get:


Permalinks in conflict. "scholen/" is already set for a previously created School so now it has the slug "scholen/-2"
Jun 18, 2012 at 1:43 PM


Again to soon :)

So I guess the {Content.Slug} means take the title from the content type, as i don't have a title I think their it goes wrong, so I've changed the pattern to scholen/{Content.Id} And now it works fine


Jun 18, 2012 at 2:34 PM

Hi Borrie, great find. Yeah, I assume that if your content type has no title then there will be no slug.
Anyway, glad to hear you got it working!

Jun 18, 2012 at 8:48 PM

Ok, Now everything is rewritten, everything works!

Now my final question (which goes back to my original question) :) I've added the mediapickerfield to my contenttype but on the front-end it's displayed as this:


How can I display it as an image?


Jun 18, 2012 at 9:06 PM

You can define a specific template for this field, by using Shape Tracing you can know easily what file to create, or you can also use a Projection and a custom layout to render an image using the field's token.

Jun 18, 2012 at 9:10 PM


Tx! I've just got it to work!!


Jun 21, 2012 at 1:20 PM


Quick question, how can I remove the permalink and "set as homepage" options which are showed when creating a new content type?


Jun 21, 2012 at 3:36 PM

You can overwrite the Parts.Autoroute.Edit view and hide those fields, although I am curious as to why you want to hide these? 

You can also deselect the allow custom routes tick box on the content type definition and give the administrators of your site a role that does not allow them to set the homepage. That would be cooler.



Jun 21, 2012 at 4:17 PM


Thanks for your answer, I've already deselected the allow custom routes, i'll check out the role, I just want to provide a clean interface for the editors...


Jun 21, 2012 at 6:53 PM

There is a permission for Setting the home page. Just don't give it to the role and you won't be able to set the homepage. For the custom permalink, this is the option in the autoroute settings. Hazza is totally right.