displaying a simple list of the x amount of latest blog posts - Discussions

Frederik T 242 posts 373 karma points

Jul 15, 2020 @ 14:46

Displaying a simple list of the latest blog posts in a partial view

Yeah it seems a bit silly to need help to this, but I havent used umbraco since version 4 or something like that. I have fiddled around with this for a while, but don't have any working code to show. My intentions is to have a small partial view that can essentially be "plopped in" anywhere and it will show, for example, a list of the 8 latest posts on the blog as a link with the author and date, nothing more. How can I do this?

Copy Link

Paul Seal 524 posts 2889 karma points MVP 7x c-trib

Jul 15, 2020 @ 15:39

Hi Frederik,

Here is a partial that I wrote for my Clean Starter Kit

https://github.com/prjseal/Clean-Starter-Kit-for-Umbraco/blob/master/src/Clean.Web/Views/Partials/latestArticles.cshtml

@inherits UmbracoViewPage

@using Clean.Core.Helpers

@{
    var articleList = UmbracoContext.Content.GetAtRoot().DescendantsOrSelf<ArticleList>().FirstOrDefault();
    var isArticleListPage = Model.Id == articleList.Id;
    var fallbackPageSize = isArticleListPage ? 10 : 3;

    var pageSize = QueryStringHelper.GetIntFromQueryString(Request, "size", fallbackPageSize);
    var pageNumber = QueryStringHelper.GetIntFromQueryString(Request, "page", 1);
    var allArticles = articleList.Children<Article>().Where(x => x.IsVisible()).OrderByDescending(x => x.ArticleDate);
    var pageOfArticles = allArticles.Skip((pageNumber - 1) * pageSize).Take(pageSize);
    var totalItemCount = allArticles.Count();
    var pageCount = totalItemCount > 0 ? Math.Ceiling((double)totalItemCount / pageSize) : 1;

}

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            @foreach (var article in pageOfArticles)
            {
                <div class="post-preview">
                    <a href="@article.Url">
                        <h2 class="post-title">
                            @(!string.IsNullOrWhiteSpace(article.Title) ? article.Title : article.Name)
                        </h2>
                        @if (!string.IsNullOrWhiteSpace(article.Subtitle))
                        {
                            <h3 class="post-subtitle">@article.Subtitle</h3>
                        }
                    </a>
                    <p class="post-meta">
                        @Umbraco.GetDictionaryValue("Article.Posted")
                        @if (!string.IsNullOrWhiteSpace(article.AuthorName))
                        {
                            @Umbraco.GetDictionaryValue("Article.By")@Html.Raw("&nbsp;")@article.AuthorName
                        }
                        @Umbraco.GetDictionaryValue("Article.On") @article.ArticleDate.ToString("MMMM dd, yyyy")
                    </p>
                </div>
                <hr>
            }
            <!-- Pager -->
                <div id="paging" class="clearfix">
                    @if (isArticleListPage)
                    {
                        if (pageCount > 1)
                        {
                            <div class="paging-block">
                                @if (pageNumber > 1)
                                {
                                <a class="btn btn-primary float-left" href="@($"{articleList.Url}?page={pageNumber - 1}&size={pageSize}")">@Umbraco.GetDictionaryValue("Paging.Previous")</a>
                                }
                                else
                                {
                                    @Html.Raw("&nbsp;")
                                }
                            </div>
                            <div class="paging-block text-center">
                                <span>@Umbraco.GetDictionaryValue("Paging.Page") @pageNumber @Umbraco.GetDictionaryValue("Paging.Of") @pageCount</span>
                            </div>
                            <div class="paging-block">
                                @if (pageNumber < pageCount)
                                {
                                <a class="btn btn-primary float-right" href="@($"{articleList.Url}?page={pageNumber + 1}&size={pageSize}")">@Umbraco.GetDictionaryValue("Paging.Next")</a>
                                }
                                else
                                {
                                    @Html.Raw("&nbsp;")
                                }
                            </div>

                        }
                    }
                    else
                    {
                        <a class="btn btn-primary float-right" href="@(articleList.Url)">@Umbraco.GetDictionaryValue("ArticleList.ViewAll")</a>
                    }
                </div>
        </div>
    </div>
</div>

Then I call it from any page like this:

@Html.Partial("~/Views/Partials/latestArticles.cshtml")

Copy Link

Frederik T 242 posts 373 karma points

Jul 16, 2020 @ 12:30

Thanks for the suggestion, but I think that looks a bit more than what I have in mind. What I'm talking about is something like this: enter image description here

A widget of sorts that should be located in a sidebar, but can technically be inserted anywhere, that lists for example the five latest blog posts like in the image.

Copy Link

Frederik T 242 posts 373 karma points

Nov 15, 2020 @ 22:06

I just recently fixed it myself, so just posting it here in case anyone comes by searching for the same solution. I have a custom Articulate theme, and in the themes Master.chstml is a reference to a themed partial like so:

@Html.ThemedPartial(Model, "Sidebar")

In that partial I have the following code (code not necessary for this example has been removed:

@{
    var recentPosts = Model.RootBlogNode.DescendantsOrSelf().Where(x => x.IsDocumentType("ArticulateRichText") || x.IsDocumentType("ArticulateMarkdown")).OrderByDescending(x => x.UpdateDate).Take(5);
}
@if (recentPosts.Any())
        {
            <section class="widget widget-recent-posts">
                <h2 class="widget-title">@Umbraco.GetDictionaryValue("Latest Posts")</h2>
                <ul>
                    @foreach (var item in recentPosts)
                    {
                        var pubDate = item.GetProperty("publishedDate").Value<DateTime>();
                        <li>
                            <h3 class="recent-title"><a href="@item.Url">@item.Name</a></h3>
                            <div class="recent-date">
                                <time class="published" datetime="@pubDate.ToString("d")">@pubDate.ToString("d")</time>
                            </div>
                        </li>
                    }
                </ul>
            </section>
        }

Hope this will help anyone with a similar issue.

Copy Link

is working on a reply...

Flag this post as spam?

Displaying a simple list of the latest blog posts in a partial view