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".
<!--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>