Blog Post with Topic (Detail Page)

<!--A Detail page is a template to be used for a particular type of content. -->
<!--This code creates a Post Detail page that will be used to display each of your Blog Posts. -->
<!--It includes Date, Author(s) Name, Topic(s), Primary Image (if present), the content of the Post, -->
<!--attached Files (if present), and Author(s) (in a more detailed manner, as opposed to the previously displayed Author(s) name). -->
<!--In order to work with the Blog Posts Lister Page code block, the Friendly URL of this page should be "post".-->


<!--This code block creates a blog post page including author(s) info (if present) and topics.-->

<!--**IMPORTANT INFORMATION**-->

<!--To use this code you MUST do the following:-->

<!--In the Files Manager, make sure you have the following folder structure (create the folders if you don't): -->
    
<!--    Home > content > www > slick-->
    
<!--    Download the following files and upload them to the "slick" folder:-->
    
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/ajax-loader.gif-->
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/slick-carousel.css-->
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/slick.css-->
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/slick/slick.min.js-->

@section head {
    
    <link href="/files/content/www/slick/slick.css" rel="stylesheet"/>
    <link href="/files/content/www/slick/slick-carousel.css" rel="stylesheet"/>

    <style>
        .media-metadata {
            margin-bottom: 30px;
        }
        
        .media-metadata .topics > span:not(:last-child):after {
            content: " | ";
        }
    </style>
}

@BRT.Detail(tableId: "Content", viewId: "BlogPosts",
fields: new[] {"PrimaryImage","Title","PubDate",
"Summary","Body","Topic","Files",
"Authors.PrimaryImage","Authors.Type","Authors.PreferredName","Authors.FirstName","Authors.MiddleName","Authors.LastName",
"Authors.NameSuffix","Authors.DoNotEmail","Authors.Email","Authors.Description","Authors.Links.Type","Authors.Links.Link"},
template:
@<article class="detailpage">
    <small>
        <div class="media-metadata text-muted">
            @if(!item.IsDBNull("PubDate")) {
              <span>@item.GetDateTime("PubDate").ToShortDateString()</span>
            }
            
            @if(!item.IsDBNull("Authors") && item.GetRecordList("Authors").Count > 0) {
                if(!item.IsDBNull("PubDate")){
                    <span> - </span>
                }
                <span>by: </span>
                <span class="topics">
                    @foreach(EngineRecord item_authors in item.GetRecordList("Authors")) {
                        <span>
                            <a href="/author/@item_authors.Href">
                                @if(!item_authors.IsDBNull("PreferredName")) {
                                    <span>@item_authors["PreferredName"]</span>
                                } else {
                                    <span>@item_authors["FirstName"]</span>
                                }
                                @if(!item_authors.IsDBNull("MiddleName")) {
                                    <span>@item_authors["MiddleName"]</span>
                                }
                                @if(!item_authors.IsDBNull("LastName")) {
                                    <span>@item_authors["LastName"]</span>
                                }
                                @if(!item_authors.IsDBNull("NameSuffix")) {
                                    <span>@item_authors["NameSuffix"]</span>
                                }
                            </a>
                        </span>
                    }
                </span>
            }
            @if (!item.IsDBNull("Topic") && item.GetCategory("Topic").Count > 0) {
                if((!item.IsDBNull("Authors") && item.GetRecordList("Authors").Count > 0) || !item.IsDBNull("PubDate")) {
                    <span> - </span>
                }
                <span class="topics">
                    @foreach(CategoryFieldItem topic in item.GetCategory("Topic")) {
                        <span>@topic.Label</span>
                    }
                </span>
            }
        </div>
    </small>
    
    @if(!item.IsDBNull("PrimaryImage")) {
        <div class="primaryImg">
            @if(item.GetFiles("PrimaryImage").Count == 1){
                if(item.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                    <figure class="figure figure-fullwidth">
                        <img src="@(item.GetFiles("PrimaryImage")[0].Url)?width=1070&height=300&mode=crop" class="img-fluid" />
                    </figure>
                }
            } else {
                <div class="in-page-carousel">
                    @foreach(FileFieldItem file in item.GetFiles("PrimaryImage")) {
                        if(file.ContentType.StartsWith("image/")) {
                            <figure class="figure figure-fullwidth">
                                <img src="@(file.Url)?width=1070&height=300&mode=crop" class="img-fluid" />
                                <figcaption class="figure-caption"><em>@file.Title</em>
                                    <p>@file.Description</p>
                                </figcaption>
                            </figure>
                        }
                    }
                </div>
            }
        </div>
    }
    @if(!item.IsDBNull("Body")) {
      <div>@BRT.Raw(@item.GetString("Body"))</div>
    }
    @if(!item.IsDBNull("Files") && item.GetFiles("Files").Count > 0) {
        <div class="box box-outline">
            <h4>Files</h4>
            @foreach(FileFieldItem file in item.GetFiles("Files")) {
                if(file.ContentType.StartsWith("image/")) {
                  <img src="@(file.Url)?width=200&height=200"/>
                } else {
                  <p><a href="@file.Url" target="_blank">@(String.IsNullOrEmpty(file.Title) ? file.Filename : file.Title) <i class="fas fa-external-link-square-alt"></i></a></p>
                }
            }
        </div>
    }
    @if(!item.IsDBNull("Authors") && item.GetRecordList("Authors").Count > 0) {
        string authorCount = "Authors";
        if(item.GetRecordList("Authors").Count == 1) {
            authorCount = "Author";
        }
        <div class="box box-bg">
            <h4>@authorCount</h4>
            @foreach(EngineRecord item_authors in item.GetRecordList("Authors")) {
                <div class="media">
                    @if(!item_authors.IsDBNull("PrimaryImage") && item_authors.GetFiles("PrimaryImage").Count > 0) {
                        if(item_authors.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                            <a href="/author/@item_authors.Href">
                                <img src="@(item_authors.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="img-fluid primaryImg mr-3" alt="@(String.IsNullOrEmpty(item_authors.GetFiles("PrimaryImage")[0].Title) ? item_authors.GetFiles("PrimaryImage")[0].Filename : item_authors.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        }
                    }
                    <div class="media-body">
                        <h5>
                            <a href="/author/@item_authors.Href">
                                @if(!item_authors.IsDBNull("PreferredName")) {
                                    <span>@item_authors["PreferredName"]</span>
                                } else {
                                    <span>@item_authors["FirstName"]</span>
                                }
                                @if(!item_authors.IsDBNull("MiddleName")) {
                                    <span>@item_authors["MiddleName"]</span>
                                }
                                @if(!item_authors.IsDBNull("LastName")) {
                                    <span>@item_authors["LastName"]</span>
                                }
                                @if(!item_authors.IsDBNull("NameSuffix")) {
                                    <span>@item_authors["NameSuffix"]</span>
                                }
                            </a>
                        </h5>
                        @if(!item_authors.IsDBNull("Description")) {
                            <p>@item_authors.GetString("Description").Summarize(250)</p>
                        }
                        <div class="social">
                            @if(!item_authors.IsDBNull("Email")) {
                                <span><a href="mailto:@item_authors["Email"]" class="email"
                                    data-toggle="tooltip" title="Email"
                                ></a></span>
                            }
                            @if(!item_authors.IsDBNull("Links") && item_authors.GetRecordList("Links").Count > 0) {
                                foreach(EngineRecord item_authors_links in item_authors.GetRecordList("Links")) {
                                    if(!item_authors_links.IsDBNull("Type")) {
                                        if(!item_authors_links.IsDBNull("Link")) {
                                            <span><a href="@item_authors_links["Link"]" class="@item_authors_links.GetCategory("Type")[0].Label.ToLower()" target="_blank"
                                                data-toggle="tooltip" title="@item_authors_links.GetCategory("Type")[0].Label" 
                                            ></a></span>
                                        }
                                    } else {
                                        if(!item_authors_links.IsDBNull("Link")) {
                                            <span><a href="@item_authors_links["Link"]" class="website" target="_blank"
                                                data-toggle="tooltip" title="Link" 
                                            ></a></span>
                                        }
                                    }
                                }
                            }
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</article>)

<script src="/files/content/www/slick/slick.min.js"></script>
<script>
    // initialize carousel
    $('.in-page-carousel').slick({
        slidesToShow: 1
        , autoplay: false
        , dots: false
    });
    $(".slick-prev, .slick-next").text("");

</script>