Accessing Custom Field From Pages - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Accessing Custom Field From Pages

  • Accessing Custom Field From Pages
  • I have added a custom image field to pages and would like to pull the image from the navigation widget to display on the menu. I'm having trouble with the razor code to call the custom image field titled 'menuimage', I'm using sitefinity version 9.2.

     

    Thanks

  • Hi Scott,

    Sample of code, how you can access custom fields in you navigation widgets:

    PageSiteNode pageNode = node.OriginalSiteMapNode as PageSiteNode;
    var thumbnail = ((Telerik.Sitefinity.Libraries.Model.Image) pageNode.GetCustomFieldValue("menuimage"));
    <div>
        @if (thumbnail != null)
        
            <img src="@thumbnail.ResolveThumbnailUrl(true)" alt="@thumbnail.AlternativeText">
        
    </div>
  • Hi Scott, can u please show me your navigation widget template
  • Thanks for the reply, when I add this code in I get an application error:

    Type : System.Reflection.TargetInvocationException, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089
    Message : Exception has been thrown by the target of an invocation.

  • @model Telerik.Sitefinity.Frontend.Navigation.Mvc.Models.INavigationModel
     
    @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
    @using Telerik.Sitefinity.Frontend.Navigation.Mvc.Models;
    @using Telerik.Sitefinity.Libraries.Model
    @using Telerik.Sitefinity.Lifecycle
    @using Telerik.Sitefinity.Modules.Libraries
    @using Telerik.Sitefinity.Modules.Pages;
    @using Telerik.Sitefinity.RelatedData
    @using Telerik.Sitefinity.Web
     
    @*Add scripts and stylesheets*@
    @Html.Script(ScriptRef.JQuery, "top")
    @Html.Script(Url.WidgetContent("assets/dist/js/bootstrap.min.js"), "top")
     
     
            <nav class="navbar" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="mobile-nav search">
                        <img src="App_Themes/Aramco/img/search.png" />
                    </div>
                    <div class="mobile-nav-right aux-logo">
                        <img src="App_Themes/Aramco/img/logo-desktop.png" />
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown active">
                            <a href="index.html" class="">
                                <span class="home-icon"></span>
                                <span class="home-text">Home</span>
                            </a>
                        </li>
                        @foreach (var node in Model.Nodes)
                        
                            @RenderRootLevelNode(node);
                        
                    </ul>
                </div>
                     
    </nav><!-- /.nav -->
     
            <div class="nav-overlay"></div><!-- /.nav-overlay -->
    @*Here is specified the rendering for the root level*@
    @helper RenderRootLevelNode(NodeViewModel node)
    if (node.ChildNodes.Count > 0)
            <li class="primaryNavigationItem">
                <a data-top-level="@node.Url" data-brand="@node.Url" href="@node.Url" target="_self">@node.Title</a>
     
                <div class="secondaryNavigation" style="display: none;">
                    <div class="bss-container">   
                        <figure class="nav-dropdown-image">
                            @*<img src='/images/default-source/navigation/@node.Url.Split('/')[1]-nav.png' alt="" />*@
                            @*<img src='@node.GetRelatedItems<Telerik.Sitefinity.Libraries.Model.Image>(menuimage).FirstorDefault().Url' alt="" />*@
                             
                            @*@
     
                                var pageNode = node.OriginalSiteMapNode as PageSiteNode;
                                var thumbnail = ((Telerik.Sitefinity.Libraries.Model.Image) pageNode.GetCustomFieldValue("menuimage"));
                                <div>
                                    if (thumbnail != null)
                                    
                                    <img src="@thumbnail.MediaUrl" alt="@thumbnail.AlternativeText">
                                    
                                </div>
                            *@
                             
                        </figure><!-- /.nav-dropdown-image -->   
                        <ul class="megaNavigation cols threeCols patternListWithImage">
                            @RenderDropdownColumn(node)                       
                        </ul><!-- /.nav-dropdown-container -->                   
                        <div style="clear:both;"></div>
                    </div>
                </div><!-- /.nav-dropdown -->
            </li>
    else
            <li><a data-top-level="@node.Url" href="@node.Url">@node.Title</a></li>
     
    @helper RenderDropdownColumn(NodeViewModel node)
    foreach (var childNode in node.ChildNodes)
            <li class="col col1">
     
                    <a class="megaNavigationHeaderLink" data-subpage="@childNode.Url" href="@childNode.Url">@childNode.Title
                         
     
                </a>
     
     
                @if (childNode.ChildNodes.Count > 0)
                
                    <ul class="megaNavigationList">
                        @foreach (var childPage in childNode.ChildNodes)
                        
                            <li class="megaNavigationItem">
                                <a class="@GetClass(childPage) megaNavigationItemLink" href="@childPage.Url">@childPage.Title</a>
                            </li>
                        
                    </ul>
                
                <div style="clear:both;"></div>
            </li><!-- /.nav-dropdown-col -->
     
     
    @*Here is specified the rendering for all child levels*@
    @helper RenderSubLevelsRecursive(NodeViewModel node)
    foreach (var childNode in node.ChildNodes)
        if (childNode.ChildNodes.Count > 0)
        
                <li class="dropdown-submenu">
                    <a class="@GetClass(childNode)" href="@childNode.Url" target="@childNode.LinkTarget">
                        @childNode.Title
                        <span class="right-caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        @RenderSubLevelsRecursive(childNode)
                    </ul>
                </li>
        
        else
        
                <li class="@GetClass(childNode)">
                    <a class="@GetClass(childNode)" href="@childNode.Url" target="@childNode.LinkTarget">@childNode.Title</a>
                </li>
        
     
    @*Resolves the class that will be added for each node depending whether it is selected*@
    @helper GetClass(NodeViewModel node)
     
    if (node.IsCurrentlyOpened)
            @Html.Raw("active");
        
        else if (node.HasChildOpen)
        
            @Html.Raw("active");
        
  • This ended up being the solution for me. Thanks for the help.
    In a .cs file:
    var pageNode = node.OriginalSiteMapNode as PageSiteNode;
                if (pageNode != null)
                
                    var thumbnail = (Telerik.Sitefinity.Libraries.Model.Image) pageNode.GetCustomFieldValue("menuimage");
                    if (thumbnail != null)
                    
                        return thumbnail.MediaUrl;
                    
                
     
    In the View .cshtml:
     
    @
                            var thumbnailUrl = RazorUtils.GetNavMenuImageUrl(node);
                            if (!string.IsNullOrEmpty(thumbnailUrl))
                            
                                <figure class="nav-dropdown-image">
                                    <div>
                                        <img src="@thumbnailUrl">
                                    </div>
                                </figure><!-- /.nav-dropdown-image -->