listing top 5 articles

Sharmarke Hujale 103 posts 346 karma points

Dec 04, 2015 @ 03:27

Hi

I'm working on a website - where I have a sidebar on the right side, where I want to display top 5 latest articles

This is how it looks like: enter image description here

Does anyone know how to do that, because I have no clue. I would really appreciate some help.

Thanks in advance!

//Sharmarke Hujale

Copy Link

Dave Woestenborghs 3504 posts 12134 karma points MVP 9x admin c-trib

Dec 04, 2015 @ 07:10

Hi Sharmake,

Can you post how your tree looks. So we can see where the articles are located in the content tree. And how do you determine if article should be visible in this top 5 list.

Dave

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 04, 2015 @ 15:45

Of course - here it is:

enter image description here

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 04, 2015 @ 16:45

Hi Sharmarke,

Dependig on where you are trying to list top 5 articles you should be able to do it with the code below. If you can tell where you need to display it maybe you can do it with less code.

@{ var selection = CurrentPage.AncestorOrSelf(1).Descendants("AliasOfProjects").FirstOrDefault(); }

@if (selection.Any())
{
    <ul>
        @foreach (var item in selection.Children.Where("Visible").OrderBy("CreateDate desc").Take(5))
        {
            <li>
                <a href="@item.Url">@item.Name</a>
            </li>
        }
    </ul>
}

First you are finding the first node of the type projects and then looping though the children. Then we order the nodes by the create date, and taking 5 items out of the collection.

Remember to change AliasOfProject, so it match the alias for the Projects page.

Hope this helps,

/Dennis

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 05, 2015 @ 21:46

Hi Dennis

Thanks for your help, but I ran into a problem - I used your code and changed the alias, but nothing gets displayed, can you help me with that?

var selection =  CurrentPage.AncestorOrSelf(1).Descendants("Projects").FirstOrDefault();


@if (selection.Any())
                {
                    <ul>
                        @foreach (var item in selection.Children.Where("Visible").OrderBy("CreateDate desc").Take(5))
                        {
                            <li>
                                <a href="@item.Url" class="feature-post-title">
                                    @item.Name
                                </a>
                                <a href="@item.Url">
                                    <img src="@item.GetPropertyValue("image")" />
                                </a>
                            </li>
                        }
                    </ul>
                }

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 05, 2015 @ 21:58

This is how the whole 'Project' documentType looks like:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";

var pageSize = 6;
var page = 1; int.TryParse(Request.QueryString["page"], out page);
var items = Model.Content.Children().Where(x => x.IsDocumentType("ProjectPost")).OrderByDescending(x => x.CreateDate);
var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);
var previousPageIsEllipsis = false;


if (page > totalPages)
{
    page = totalPages;
}
else if (page < 1)
{
    page = 1;
}

var selection = CurrentPage.AncestorOrSelf(1).Descendants("Projects").FirstOrDefault();
}

 <div class="container">
    <div class="row">
    <div class="col-md-8 col-sm-12">
 @foreach (var ProjectPost in items.Skip((page - 1) * pageSize).Take(pageSize))
        {
            <!---Article-->
            <article class="article-post">
                <div class="header-information">
                    <a href="@ProjectPost.Url">
                        <h1>@ProjectPost.Name</h1>
                    </a>
                    <p>
                        <span class="glyphicon glyphicon-time"></span>@ProjectPost.CreateDate.ToString("MMMM d, yyyy")<span style="margin-left: 3%" class="glyphicon glyphicon-user"></span>@ProjectPost.WriterName<a href="@ProjectPost.Url#comment"><span style="margin-left: 3%" class="glyphicon glyphicon-comment"></span>Leave a comment</a>
                    </p>
                </div>
                <a href="@ProjectPost.Url">
                    <img src="@ProjectPost.GetPropertyValue("image")" />
                </a>
                <div class="article-content">
                    <p>
                        @ProjectPost.GetPropertyValue("content")
                    </p>
                    <a href="@ProjectPost.Url" class="btn btn-default-custom-reverse hvr-icon-forward">Read more</a>
                </div>
            </article>
        <!---Article end-->
        }
        <!--Pagination-->
        @if (totalPages > 1)
        {
            <ul class="pagination">
                @if (page > 1)
                {
                    <li><a href="?page=@(page-1)" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                }
                @for (int p = 1; p < totalPages + 1; p++)
                {
                    var active = (p == page) ? "active" : string.Empty;
                    if (p == page)
                    {
                        <li class="@Html.Raw(active)"><a href="?page=@p">@p</a></li>
                        previousPageIsEllipsis = false;
                    }
                    else
                    {
                        if (p == 1
                            || p == page - 1
                            || p == page + 1
                            || p == totalPages - 1
                            || p == totalPages)
                        {
                            <li class="@Html.Raw(active)"><a href="?page=@p">@p</a></li>
                            previousPageIsEllipsis = false;
                        }
                        else
                        {
                            if (previousPageIsEllipsis)
                            {
                                continue;
                            }
                            else
                            {
                                <li><a href="#">...</a></li>
                                previousPageIsEllipsis = true;
                            }
                        }
                    }
                }
                @if (page < totalPages)
                {
                    <li><a href="?page=@(page+1)" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                }
            </ul>
        }
    </div>
 <div class="col-md-4 col-sm-12">
        <aside class="article-aside">
            <h4>Search for anything.</h4>
            <!--Search box-->
            <form action="" class="search-form">
                <div class="form-group has-feedback">
                    <label for="search" class="sr-only">Search</label>
                    <input type="text" class="form-control" name="search" id="search" placeholder="search">
                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </div>
                <hr />
                <!--Social media--->
                <div class="text-center">
                    @Umbraco.RenderMacro("SocialMedia")
                </div>
                <hr />
                <div class="block-title">Like our facebook page</div>
                <div class="text-center">
                    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
                </div>
                <hr />
                <div class="block-title">Lastest</div>
                @if (selection.Any())
                {
                    <ul>
                        @foreach (var item in selection.Children.Where("Visible").OrderBy("CreateDate desc").Take(5))
                        {
                            <li>
                                <a href="@item.Url" class="feature-post-title">
                                    @item.Name
                                </a>
                                <a href="@item.Url">
                                    <img src="@item.GetPropertyValue("image")" />
                                </a>
                            </li>
                        }
                    </ul>
                }
            </form>
        </aside>
    </div>
</div>

And 'the latest' articles are at the bottom

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 05, 2015 @ 23:35

Hi Sharmarke,

Okay so you want to display the latest 5 articles on the projects page as I understand your code.

Try this code snippet.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";

var pageSize = 6;
var page = 1; int.TryParse(Request.QueryString["page"], out page);
var items = Model.Content.Children().Where(x => x.IsDocumentType("ProjectPost")).OrderByDescending(x => x.CreateDate);
var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);
var previousPageIsEllipsis = false;


if (page > totalPages)
{
    page = totalPages;
}
else if (page < 1)
{
    page = 1;
}


}

 <div class="container">
    <div class="row">
    <div class="col-md-8 col-sm-12">
 @foreach (var ProjectPost in items.Skip((page - 1) * pageSize).Take(pageSize))
        {
            <!---Article-->
            <article class="article-post">
                <div class="header-information">
                    <a href="@ProjectPost.Url">
                        <h1>@ProjectPost.Name</h1>
                    </a>
                    <p>
                        <span class="glyphicon glyphicon-time"></span>@ProjectPost.CreateDate.ToString("MMMM d, yyyy")<span style="margin-left: 3%" class="glyphicon glyphicon-user"></span>@ProjectPost.WriterName<a href="@ProjectPost.Url#comment"><span style="margin-left: 3%" class="glyphicon glyphicon-comment"></span>Leave a comment</a>
                    </p>
                </div>
                <a href="@ProjectPost.Url">
                    <img src="@ProjectPost.GetPropertyValue("image")" />
                </a>
                <div class="article-content">
                    <p>
                        @ProjectPost.GetPropertyValue("content")
                    </p>
                    <a href="@ProjectPost.Url" class="btn btn-default-custom-reverse hvr-icon-forward">Read more</a>
                </div>
            </article>
        <!---Article end-->
        }
        <!--Pagination-->
        @if (totalPages > 1)
        {
            <ul class="pagination">
                @if (page > 1)
                {
                    <li><a href="?page=@(page-1)" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                }
                @for (int p = 1; p < totalPages + 1; p++)
                {
                    var active = (p == page) ? "active" : string.Empty;
                    if (p == page)
                    {
                        <li class="@Html.Raw(active)"><a href="?page=@p">@p</a></li>
                        previousPageIsEllipsis = false;
                    }
                    else
                    {
                        if (p == 1
                            || p == page - 1
                            || p == page + 1
                            || p == totalPages - 1
                            || p == totalPages)
                        {
                            <li class="@Html.Raw(active)"><a href="?page=@p">@p</a></li>
                            previousPageIsEllipsis = false;
                        }
                        else
                        {
                            if (previousPageIsEllipsis)
                            {
                                continue;
                            }
                            else
                            {
                                <li><a href="#">...</a></li>
                                previousPageIsEllipsis = true;
                            }
                        }
                    }
                }
                @if (page < totalPages)
                {
                    <li><a href="?page=@(page+1)" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                }
            </ul>
        }
    </div>
 <div class="col-md-4 col-sm-12">
        <aside class="article-aside">
            <h4>Search for anything.</h4>
            <!--Search box-->
            <form action="" class="search-form">
                <div class="form-group has-feedback">
                    <label for="search" class="sr-only">Search</label>
                    <input type="text" class="form-control" name="search" id="search" placeholder="search">
                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </div>
                <hr />
                <!--Social media--->
                <div class="text-center">
                    @Umbraco.RenderMacro("SocialMedia")
                </div>
                <hr />
                <div class="block-title">Like our facebook page</div>
                <div class="text-center">
                    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
                </div>
                <hr />
                <div class="block-title">Lastest</div>
                @if (items.Any())
                {
                    <ul>
                        @foreach (var item in items.Take(5))
                        {
                            <li>
                                <a href="@item.Url" class="feature-post-title">
                                    @item.Name
                                </a>
                                <a href="@item.Url">
                                    <img src="@item.GetPropertyValue("image")" />
                                </a>
                            </li>
                        }
                    </ul>
                }
            </form>
        </aside>
    </div>
</div>

Hope this helps,

/Dennis

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 06, 2015 @ 00:56

Hi Dennis,

Thanks that helped me on my 'Projects' page, but what should I do, when I'm on a specific article that has no pagination and I can't use the 'items' variable.

Can you help me with that?

The specific page's code looks like this:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";

}
<div class="container">
<div class="row">
    <div class="col-md-8 col-sm-12">
        <!---Article-->
        <article class="article-post">
            <div class="header-information">
                <h1>@CurrentPage.Name</h1>
                <p>
                    <span class="glyphicon glyphicon-time"></span>@CurrentPage.CreateDate.ToString("MMMM d, yyyy")<span style="margin-left: 3%" class="glyphicon glyphicon-user"></span>@CurrentPage.WriterName<a href="@CurrentPage.Url#comment"><span style="margin-left: 3%" class="glyphicon glyphicon-comment"></span>Leave a comment</a>
                </p>
            </div>
            <img src="@CurrentPage.GetPropertyValue("image")" />
            <div class="article-content">
                <p>
                    @CurrentPage.GetPropertyValue("content")
                </p>
            </div>
            <div id="comment" class="fb-comments" data-href="http://localhost:52103/{@CurrentPage.Url}" data-numposts="5"></div>
        </article>
    </div>
    <div class="col-md-4 col-sm-12">
        <aside class="article-aside">
            <h4>Search for anything.</h4>
            <!--Search box-->
            <form action="" class="search-form">
                <div class="form-group has-feedback">
                    <label for="search" class="sr-only">Search</label>
                    <input type="text" class="form-control" name="search" id="search" placeholder="search">
                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </div>
                <hr />
                <!--Social media--->
                <div class="text-center">
                    @Umbraco.RenderMacro("SocialMedia")
                </div>
                <hr />
                <div class="block-title">Like our facebook page</div>
                <div class="text-center">
                    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
                </div>
                <hr />
                <div class="block-title">Lastest</div>
                @if (items.Any())
                {
                    <ul class="feature-post-list">
                        @foreach (var item in items.Take(5))
                        {
                            <li>
                                <a href="@item.Url" class="feature-post-title">
                                    @item.Name
                                </a>
                                <a href="@item.Url">
                                    <img src="@item.GetPropertyValue("image")" />
                                </a>
                            </li>
                        }
                    </ul>
                }
            </form>
        </aside>
    </div>
</div>

/Sharmarke

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Dec 06, 2015 @ 10:51

Hi Sharmake,

This code below should show the latest five articles when you are on a article.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "Master.cshtml";

}
<div class="container">
<div class="row">
    <div class="col-md-8 col-sm-12">
        <!---Article-->
        <article class="article-post">
            <div class="header-information">
                <h1>@CurrentPage.Name</h1>
                <p>
                    <span class="glyphicon glyphicon-time"></span>@CurrentPage.CreateDate.ToString("MMMM d, yyyy")<span style="margin-left: 3%" class="glyphicon glyphicon-user"></span>@CurrentPage.WriterName<a href="@CurrentPage.Url#comment"><span style="margin-left: 3%" class="glyphicon glyphicon-comment"></span>Leave a comment</a>
                </p>
            </div>
            <img src="@CurrentPage.GetPropertyValue("image")" />
            <div class="article-content">
                <p>
                    @CurrentPage.GetPropertyValue("content")
                </p>
            </div>
            <div id="comment" class="fb-comments" data-href="http://localhost:52103/{@CurrentPage.Url}" data-numposts="5"></div>
        </article>
    </div>
    <div class="col-md-4 col-sm-12">
        <aside class="article-aside">
            <h4>Search for anything.</h4>
            <!--Search box-->
            <form action="" class="search-form">
                <div class="form-group has-feedback">
                    <label for="search" class="sr-only">Search</label>
                    <input type="text" class="form-control" name="search" id="search" placeholder="search">
                    <span class="glyphicon glyphicon-search form-control-feedback"></span>
                </div>
                <hr />
                <!--Social media--->
                <div class="text-center">
                    @Umbraco.RenderMacro("SocialMedia")
                </div>
                <hr />
                <div class="block-title">Like our facebook page</div>
                <div class="text-center">
                    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
                </div>
                <hr />
                <div class="block-title">Lastest</div>
                    <ul class="feature-post-list">
                        @foreach (var item in CurrentPage.Parent.Children.Where("Visible").OrderBy("CreateDate desc").Take(5))
                        {
                            <li>
                                <a href="@item.Url" class="feature-post-title">
                                    @item.Name
                                </a>
                                <a href="@item.Url">
                                    <img src="@item.GetPropertyValue("image")" />
                                </a>
                            </li>
                        }
                    </ul>
                }
            </form>
        </aside>
    </div>
</div>

Hope this helps,

/Dennis

Copy Link

Sharmarke Hujale 103 posts 346 karma points

Dec 06, 2015 @ 17:55

Hi Dennis

It did work!

Thank you for your help!

/Sharmarke

Copy Link

is working on a reply...

Flag this post as spam?

Listing top 5 articles