News with Topics (Lister Page)

A Lister is a block of code that loads a list of records from a specific view. This code creates a News Lister containing Date, Topic(s), Primary Image (if present) and Summary (in the absence of Summary, it loads partial content of the Body). If you add this code to a page, it can be your "News" page.

<!--A Lister is a block of code that loads a list of records from a specific view. -->
<!--This code creates a News Lister containing Date, Topic(s), Primary Image (if present), -->
<!--and Summary (in the absence of Summary, it loads partial content of the Body). -->
<!--If you add this code to a page, it can be your "News" page.-->


<!--This code block creates a "News" lister page with Topics.-->
<!--A column on the right side allows your visitors to filter by topic.-->




<div class="row">
    <div class="col-sm-4 order-sm-2">
        @BRT.CategoryList(tableId:"Content", viewId:"News", fieldId:"Topic", 
        template: 
        @<div class="topic-list-wrap">
            <h4 class="topic-list">Filter by Topic</h4>
            <p><a href="/news">All</a></p>
            @foreach(EngineRecord c in item) {
                <p><a href="/news?topic=@c["Id"]">@c["Label"]</a></p>
            }
        </div>)
    </div>
    @BRT.Lister(tableId: "Content", viewId: "News",
    fields: new[] {"Title","PubDate","PrimaryImage","Summary","Body","Topic","Link"},
    condition: (String.IsNullOrEmpty(Request.QueryString["topic"])?null:ConditionMeta.Parse("[Topic.Id]='" + Request.QueryString["topic"] + "'")),
    template:
    @<div class="lister">
        @foreach(EngineRecord record in item) {
            string newwindow = null; 
            string link = null;
            if(!record.IsDBNull("Link")){
                link = record.GetString("Link");
                newwindow=" target=\"_blank\" ";
            }  else {
                link = "/article/" + record.Href;
            }
            <article class="media">
                @if(!record.IsDBNull("PrimaryImage") && record.GetFiles("PrimaryImage").Count > 0) {
                    if(record.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                        <a href="@link" @newwindow>
                            <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                        </a>
                    }
                }
                <div class="media-body">
                    <h5 class="mt-0 mb-0">
                        <a href="@link" @newwindow>
                            @record["Title"]
                        </a>
                    </h5>
                    <small class="media-metadata text-muted">
                        @if(!record.IsDBNull("PubDate")) {
                          <span>@record.GetDateTime("PubDate").ToShortDateString()</span>
                        }
                        @if(!record.IsDBNull("PubDate") && !record.IsDBNull("Topic")){
                            <span> - </span>
                        }
                        @if (!record.IsDBNull("Topic")) {
                            if(record.GetCategory("Topic").Count > 1){
                                foreach(CategoryFieldItem topic in record.GetCategory("Topic")) {
                                    <span class="topic">@topic.Label</span>
                                }
                            } else {
                                foreach(CategoryFieldItem topic in record.GetCategory("Topic")) {
                                    <span>@topic.Label</span>
                                }
                            }
                        }
                    </small>
                    @if(!record.IsDBNull("Summary")) {
                        <p>@BRT.Raw(@record.GetString("Summary").Summarize(250))</p>
                    } else {
                        <p>@BRT.Raw(@record.GetString("Body").Summarize(250))</p>
                    }
                </div>   
            </article>
        }
    </div>)
</div>