get properties of spefific items in collection - Razor

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Ole Kristian Losvik 22 posts 73 karma points

Mar 06, 2016 @ 00:29

Get properties of specific items in collection

Razor

Umbraco 7

In Umbraco 7.4.1 I want to have a razor script taking 5 of the latest articles marked with the IsFeatured property and make Bootstrap 4 cards. However I want some of them to be bigger, and need to place them manually. I was thinking something like the code below, however I cannot findout how to get the properties for the first item, and then skip the first items and do a foreach on the rest.

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{  var topStories = Umbraco.Content(1052).Descendants().Where("Visible").Where("isFeatured == true").OrderBy("CreateDate desc").Take(5);
    var TopItem = topstories.Items.Item(0);
 }
<div class="row">
    <div class="col-xs-12">
        <div class="col-xs-6">
                <div class="card">
                    <div class="card-block">
                      <h4 class="card-title">@TopItem.pageTitle</h4>
                      <p class="card-text small">@TopItem.pageSnippet</p>
                      <p class="card-text"><a href="@TopItem.Url">Les mer</a></p>
                    </div>
                </div>
        </div>
        <div class="card-group">
        @foreach(var item in topStories){
            <div class="card">
                    <div class="card-block">
                      <h4 class="card-title">@item.pageTitle</h4>
                      <p class="card-text small">@item.pageSnippet</p>
                      <p class="card-text"><a href="@item.Url">Les mer</a></p>
                    </div>
                </div>
        }            
        </div>
    </div>
</div>

Copy Link

Aristotelis Pitaridis 84 posts 402 karma points

Mar 06, 2016 @ 01:36

You just need to remove the first item from the list.

@{  
    var topStories = Umbraco.Content(1052).Descendants().Where("Visible").Where("isFeatured == true").OrderBy("CreateDate desc").Take(5);
    topStories.RemoveAt(0);    // Remove the first item
}

Copy Link

Ole Kristian Losvik 22 posts 73 karma points

Mar 06, 2016 @ 11:36

0

Thanks a lot, but how do i get the properties from the first element? Or if I for example want the properties from the 3rd element?

Copy Link
Aristotelis Pitaridis 84 posts 402 karma points

Mar 06, 2016 @ 12:31
100
In order to get a specific element you have to change the second line of code and write it the right way.
```
var FirstItem = topStories[0];
var ThirdItem = topStories[2];
```
Before you try to get the elements you have to make sure that they exist. So in order to use the ThirdItem you have to make a check like this:
```
if (topStories.Count() >= 3)
{
    var ThirdItem = topStories[2];
}
```
Copy Link

Ole Kristian Losvik 22 posts 73 karma points

Mar 08, 2016 @ 18:22

Thanks again. In case anyone googling and wondering about the same, I just paste my code which actually ended up with another way of solving the issue of presenting the five latest articles updated and marked with the isFeatured property in Bootstrap 4.

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{  var topp = Umbraco.Content(1052).Descendants().Where("Visible").Where("isFeatured == true").OrderBy("UpdateDate desc").Take(5);
    int counter = 0;
    string cardClass = "";
 }
<div class="row topstories">
    @foreach(var item in topp){
    counter++;
    if (counter == 1)
    {
                cardClass="col-md-8";
    }
    else
    {
        cardClass="col-md-4";
    }
    <div class="@cardClass topstory">
    <div class="card">
        @if (item.featuredImage != null) 
            {
                <a href="@item.Url">
                @Umbraco.RenderMacro("ImageCropped", new {image=item.featuredImage, imageCrop="400x200", cssClass="card-img-top"})
                </a>
            }
            <div class="card-block">
              <h4 class="card-title">@item.pageTitle</h4>
              <p class="card-text">@item.pageSnippet</p>
              <p class="card-text"><a href="@item.Url">Les mer</a></p>
            </div>
    </div>
    </div>
    }
</div>

and the css:

.topstory {
  display:         flex;
}

Copy Link

is working on a reply...

Please Sign in or register to post replies