I am trying to create a hero Carousel on the home page of my site. I have created a separate document type for the hero slides called 'Hero' that contains a 'Related links' property called heroLinks.
I have set up my site (via a Multinode Treepicker data type) so that my home page can select a number of these hero document types via a property called heroCarousel.
I have then created a 'heroWidget' partial view (see below) that I call on my home page template (which contains the Jquery to animate the Carousel) to render the heros as slide and this all works fine.
However I can't seem to get the related links to render on the page despite looking at various examples on the forum.
@inherits UmbracoTemplatePage
<div class="Photo-Carousel">
<ul class="slides">
@{
if (CurrentPage.HasValue("heroCarousel"))
{
var heroListValue = Model.Content.GetPropertyValue<string>("heroCarousel");
var heroList = heroListValue.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
var heroCollection = Umbraco.TypedContent(heroList).Where(x => x != null);
foreach (var item in heroCollection)
{
var heroId = item.Id;
dynamic heroNode = new umbraco.MacroEngines.DynamicNode(heroId);
var heroBackground = heroNode.GetPropertyValue("heroBackground");
var heroTitle = heroNode.GetPropertyValue("heroTitle");
var heroText = heroNode.GetPropertyValue("heroText");
var heroLinks = heroNode.GetPropertyValue("heroLinks");
<li>
<img src="@Umbraco.Media(heroBackground.ToString()).Url" border="0" alt="@heroTitle" />
<div class="heroContainer">
<div class="heroTitle">@heroTitle</div>
<div class="heroContent">@heroText</div>
<div class="heroLinks">
@{
if(@heroLinks.ToString() != string.Empty){
@heroLinks
}
</div>
</div>
</li>
}
}
</ul>
</div>
This results in the heroLinks div area having the following for the hero document type that has a related link:
But where there are no related links the results is
[ ]
I have tried code such as HasValue, but to no avail. I was not sure if this was because my partial view has to call a property (multinode treepicker) that in turn gets a content page and it is the related links property I am trying to read.
Can anybody assist in spliting the JSON result of the related links data and render it correctly within my partial view?
Correct, my 'heroCarousel' is a multinode tree picker, this picks 1+ of my 'hero' document type items.
The 'hero' document type has properties such as:
heroTitle (Textstring)
heroText (Textstring)
heroBackground (Media Picker)
heroLinks (Related Links)
I can get the title, text and background fine and create my carousel but the related links I am struggling with
Related links in partial view - JSON
I am trying to create a hero Carousel on the home page of my site. I have created a separate document type for the hero slides called 'Hero' that contains a 'Related links' property called heroLinks.
I have set up my site (via a Multinode Treepicker data type) so that my home page can select a number of these hero document types via a property called heroCarousel.
I have then created a 'heroWidget' partial view (see below) that I call on my home page template (which contains the Jquery to animate the Carousel) to render the heros as slide and this all works fine.
However I can't seem to get the related links to render on the page despite looking at various examples on the forum.
This results in the heroLinks div area having the following for the hero document type that has a related link:
But where there are no related links the results is
I have tried code such as HasValue, but to no avail. I was not sure if this was because my partial view has to call a property (multinode treepicker) that in turn gets a content page and it is the related links property I am trying to read.
Can anybody assist in spliting the JSON result of the related links data and render it correctly within my partial view?
Hi David,
I would go with this:
I wrote this snippet for the documentation here, there is also a example using dynamics (CurrentPage) there.
Jeavon
I think your complete script might be like this:
Thanks for the quick response Jeavon, however I don't think I explained myself correctly. The area I am having issue with is the content of:
var heroLinks = item.GetPropertyValue<string>("heroLinks");
By rendering this out on to the page (within the
<div class="heroLinks">
) I see the following:or if I look at the source I see:
I tried to adapte your first example using:
But this threw up a "'string' does not contain a definition for 'HasValue'" error
Hi David,
I understand, did you try the complete script I posted above?
Jeavon
Sorry Jeavon, yes I did and it returned the following error:
Ah I think I might have confused myself, heroCarousel is of what type of picker (multinode etc)?
heroLinks is the related links picker, correct?
Correct, my 'heroCarousel' is a multinode tree picker, this picks 1+ of my 'hero' document type items. The 'hero' document type has properties such as:
I can get the title, text and background fine and create my carousel but the related links I am struggling with
Ok, I think I got it:
Thats awesome - works a treat, thank you very much for your help Jeavon
You're welcome! Glad it's all working now :-)
is working on a reply...