+1-888-365-2779
Try Now
More in this section

Forums / Project Feather / Accessing Custom Field From Pages

Accessing Custom Field From Pages

6 posts, 0 answered
  1. Scott
    Scott avatar
    4 posts
    Registered:
    09 Jul 2015
    23 Feb
    Link to this post

    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

  2. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    25 Feb in reply to Scott
    Link to this post

    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>
  3. Scott
    Scott avatar
    4 posts
    Registered:
    09 Jul 2015
    27 Feb
    Link to this post

    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.

  4. Victor Leontyev
    Victor Leontyev avatar
    65 posts
    Registered:
    01 Jul 2014
    27 Feb in reply to Scott
    Link to this post
    Hi Scott, can u please show me your navigation widget template
  5. Scott
    Scott avatar
    4 posts
    Registered:
    09 Jul 2015
    27 Feb
    Link to this post
    @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");
        }
    }
  6. Scott
    Scott avatar
    4 posts
    Registered:
    09 Jul 2015
    27 Feb
    Link to this post
    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 -->
                            }
                        }
6 posts, 0 answered