Copied to clipboard

Flag this post as spam?

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


  • Frederik T 234 posts 345 karma points
    Jul 15, 2020 @ 14:46
    Frederik T
    0

    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?

  • Paul Seal 524 posts 2889 karma points MVP 6x c-trib
    Jul 15, 2020 @ 15:39
    Paul Seal
    0

    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")
    
  • Frederik T 234 posts 345 karma points
    Jul 16, 2020 @ 12:30
    Frederik T
    0

    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.

  • Frederik T 234 posts 345 karma points
    Nov 15, 2020 @ 22:06
    Frederik T
    100

    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.

Please Sign in or register to post replies

Write your reply to:

Draft