How to render data from multiple content parts through a single template

Topics: Customizing Orchard, Troubleshooting, Writing modules
Aug 18, 2011 at 12:52 AM

Im very new to Orchard and have come across a problem.

I have created a new content part that is made up of the Contrib.MediaPickerField, also i Have added this new content part to a custom module that i have created along with some additional content parts e.g. common. There is also two text fields as well.

I have a template for my custom module that I am trying to render with the Url provided by the  custom content part(Contrib.MediaPickerField) from my module but I cannot seem to access the data, I have looked through the designer tools to look at the model etc but cant work it out! I think its because I am not accessing the model that belongs to the custom content part but i dont know how or if you can do that.

This is my template so far: 

<div id="sideBox1">
<h2>@Model.PromoTitle</h2> ****WORKING****
<img src="@Model.ContentField.Url" /> ****NOT WORKING****
<p>"@Model.PromoText"</p> ****WORKING****
</div>

Any help would be appreciated, Thanks.

Coordinator
Aug 18, 2011 at 12:56 AM

@{
dynamic contentItem = Model.ContentItem;
}

and in the HTML:

@contentItem.YOURTYPENAME.YOURFIELDNAME.Url;

So if you named your field "Thumbnail", and your content type is "Product", then it should be:

@contentItem.Product.Thumbnail.Url;

 

Aug 18, 2011 at 8:59 AM

thanks for the reply,

i tried that but still cant get it to work... here more detailed info on what im trying to do:

I created a new content part called PromoBox following the Maps tutorial and I have two string fields PromoTitle and PromoText, i also added content part through migrations.cs to make it a widget and the one i mention above where Im having the trouble. In the placement.info for PromoBox i have an entry for the editor and for content as in the Maps tutorial.

For the content part that is made up of the field Contrib.MediaPickerField this field is called Image.

so i think based on your example above i should have somethig like this:

@{
dynamic contentItem = Model.ContentItem;
}

<div id="sideBox1">
<h2>@Model.PromoTitle</h2>
<img src="@contentItem.PromoBox.Image.Url" /> ****NOT WORKING****
<p>"@Model.PromoText"</p>
</div>

the PromoBox widget is placed in the TripelFirst zone and through the designer tools i can navigate to the widget and under there i can see the mediapicker field and then the prombox fields but they appear to be in two diffrerent models?

Any suggestions??

Coordinator
Aug 18, 2011 at 5:55 PM

Do you mean the Image field is not attached to the PronoBox type directly but another Part which is itself attached to the type ?

Can you paste a screenshot of the model in Shape Tracing ?

Aug 18, 2011 at 7:29 PM
Edited Aug 18, 2011 at 7:35 PM

yeah the Image Field is not attached to the PromoBox directly it is on a custom content part i created that is attached to the PromoBox

here is the model

 

 and

 

so im trying to access the url field shown above from in a template as well as the PromoTitle and PromoText.

Coordinator
Aug 18, 2011 at 7:33 PM

So in the previous code sample I gave, just do it:

@contentItem.CUSTOMPARTNAME.YOURFIELDNAME.Url;

By the way the image doesn't appear, I could give you the exact value if it was displayed. And by the way, click on the Url poroperty, the Shape TRacing will give you the exact string to use to access it.

Aug 18, 2011 at 8:13 PM

yeah i cant get the images to show for some reason, by clicking on the url field i get the following @Model.ContentField.Url but that doesnt bring any data back either also tried @Model.ContentPart.ContentItem.MediaImagePicker.Image.Url and @Model.MediaImagePicker.Image.Url but none bring back any data

 

the field is called Image the contentpart is called MediaImagePicker and the property on the field i need is Url. in shape tracing when i click on the Zone[TripelFirst]>Widget>Parts_PromoBox i get the two fields PromoText and PromoTitle which is fine and when i click on Zone[TripelFirst]>Widget>Fields_Contrib_MediaPicker[Empty] i can see Shape>ContentField>Url and it has the url im expecting - i just cant seem to access this data from the template...

Aug 18, 2011 at 10:15 PM

Ok with lots of help for sebastien its now working properly!!

My issue was i was only passing the two fields PomoTitle and PromoText into the shapeHelper so only those two items were available in the Model, to fix this I now pass in the complete ContentPart e.g

 Wrong version:

  protected override DriverResult Display(PromoBoxPart part, string displayType, dynamic shapeHelper)
        {
            return ContentShape("Parts_PromoBox",
                                () => shapeHelper.Parts_PromoBox(PromoTitle: part.PromoTitle, PromoText: part.PromoText));
        }

Right version:

 protected override DriverResult Display(PromoBoxPart part, string displayType, dynamic shapeHelper)
        {
            return ContentShape("Parts_PromoBox",
                () => shapeHelper.Parts_PromoBox(ContentPart: part));
        }



By doing this you can then access all the contentparts attached to the widget through the model i.e to get the Image url in my scenario :

@

Url.Content(Model.ContentPart.ContentItem.MediaImagePicker.Image.Url)

 Notice the Url.Content method this strips the ~ symbol of the mediapickerfield url so its a url than can be used in the html.

The eventual result for this is a custom content part where a user can select the image through the media browser popup and that will return the Image url, width, height,alt text etc so its a nice easy way for a content editor to add or change an image.