Accessing Related Images in MVC Widget Template

Posted by bwilson on 11-Jul-2019 22:26

Hello, I'm trying to create my first custom module and MVC templates. I've created the module and included a field called "Picture" of type "Related Media". I'm trying to create a custom list view for the module items and cannot seem to access the media properties. I keep getting this error in the error log:

Message : 'Telerik.Sitefinity.Frontend.Mvc.Models.DynamicDataItemFieldAccessor' does not contain a definition for 'Picture'

Here is the relevant code from my template - I started by copying the default list template and made modifications. Am I referring to the Picture field incorrectly? Thanks for any help you can offer.

@model Telerik.Sitefinity.Frontend.DynamicContent.Mvc.Models.DynamicContentListViewModel

@using Telerik.Sitefinity.Frontend.DynamicContent.WidgetTemplates.Fields.Helpers;
@using Telerik.Sitefinity;
@using Telerik.Sitefinity.Data.ContentLinks;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Frontend.Mvc.Models;
@using Telerik.Sitefinity.Web.DataResolving;
@using Telerik.Sitefinity.Model.ContentLinks;
@using Telerik.Sitefinity.Modules.Pages;

@Html.Script(ScriptRef.JQuery, "top", false)

<div class="wrapper">
    <ul class="list" id="LOList">
		
      @foreach (var item in Model.Items)
      {
      var navigateUrl = HyperLinkHelpers.GetDetailPageUrl(item, ViewBag.DetailsPageId, ViewBag.OpenInSamePage, Model.UrlKeyPrefix);
      <li @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Fields.Id)> 
		     @if(item.Fields.Picture != null)
			  {
				<img src='@Html.Raw(item.Fields.Picture.Fields.MediaUrl)' alt='@item.Fields.Picture.Fields.AlternativeText' title='@item.Fields.Picture.Fields.Title' />
			  } else {
		  		<img src="/img/placeholder.png" />
		  }

		  
		   <br />
        <a class="name" @Html.InlineEditingFieldAttributes("Name", "ShortText") href="@navigateUrl"> @item.Fields.Name </a><br />
        @item.Fields.Phone </li>
      }
		
	</ul>
</div>

All Replies

Posted by JGraham@edgewood.edu on 15-Jul-2019 13:50

I don't think you need the @html.raw for the Picture field.

Use:

<img src='@item.Fields.Picture.Fields.MediaUrl' alt='@item.Fields.Picture.Fields.AlternativeText' title='@item.Fields.Picture.Fields.Title' />

Posted by bwilson on 16-Jul-2019 15:45

Thanks for the suggestion, but using the above, I get this message error in the logs:

Message : 'System.Array' does not contain a definition for 'Fields'

Source : Anonymously Hosted DynamicMethods Assembly

I don't think it's able to see the fields of the related image. Is there a helper or some other class I need to include so that it can read those related fields?

Posted by bwilson on 16-Jul-2019 15:48

I was able to find a class to include in the file. I have added '@using Telerik.Sitefinity.RelatedData' to the declarations. But still receive the error.

Posted by jread on 16-Jul-2019 17:11

Looks like you enabled the field to allow for multiple images to be selected thus the item returned from item.Fields.Picture is of type System.Array and holds a collection of the images.  If you want it to be an single item selector you must change the way the field works.  So try accessing the field like this:

@if(item.Fields.Picture != null){
    foreach(var pic in item.Fields.Picture){
          <div><img src="@pic.Fields.MediaUrl" /></div>
     }
}

Posted by bwilson on 16-Jul-2019 17:12

I figured it out - I needed to limit the module to allow only one related image. That, plus adding the relatedData class made my original code work.

Posted by bwilson on 16-Jul-2019 17:13

Yeah, I'd just figured that out too. Thank you!

This thread is closed