Accessing Custom Field From Pages

Posted by Community Admin on 23-Feb-2017 00:00

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

Posted by Community Admin on 25-Feb-2017 00:00

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>

Posted by Community Admin on 27-Feb-2017 00:00

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.

Posted by Community Admin on 27-Feb-2017 00:00

Hi Scott, can u please show me your navigation widget template

Posted by Community Admin on 27-Feb-2017 00:00

@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>

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

<div class="nav-overlay"></div>

@*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>

<ul class="megaNavigation cols threeCols patternListWithImage">

@RenderDropdownColumn(node)

</ul>

<div style="clear:both;"></div>

</div>

</div>

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

@*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");

Posted by Community Admin on 27-Feb-2017 00:00

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>

This thread is closed

All Replies