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 242 posts 373 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 2890 karma points MVP 7x 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 242 posts 373 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 242 posts 373 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.

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies