Accessing Related Images in MVC Widget Template - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Accessing Related Images in MVC Widget Template

  • 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>
  • 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' />

  • 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?

  • 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.

  • 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>
         }
    }
  • 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.

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