News Article with Topics (Detail Page)
A Detail page is a template to be used for a particular type of content. This code creates a News Article Detail page that will be used to display each News Articles. It includes Date, Topic(s), Primary Image, Body, Contact Information, attached Files and Author(s). In order to work with the News Lister Page code block, the Friendly URL of this page should be "article".
<!--A Detail page is a template to be used for a particular type of content. -->
<!--This code creates a News Article Detail page that will be used to display each News Articles. -->
<!--It includes Date, Topic(s), Primary Image, Body, Contact Information, attached Files and Author(s).-->
<!--In order to work with the News Lister Page code block, the Friendly URL of this page should be "article".-->
<!--This code block creates a News article page including topics.-->
<!--The code detects the presence of Primary Images, and if there is more than one, it'll automatically create a carousel.-->
<!--**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"/>
}
@BRT.Detail(tableId: "Content", viewId: "News",
fields: new[] {"Title","PubDate","PrimaryImage","Body","Topic","PrimaryContact","Location","Address1","Address2","City","State","Zip","Phone","Email","Files",
"Authors.PrimaryImage","Authors.Type","Authors.PreferredName","Authors.FirstName","Authors.MiddleName","Authors.LastName",
"Authors.NameSuffix","Authors.Email","Authors.Description","Authors.Links.Type","Authors.Links.Link"},
template:
@<article class="detailpage">
<div>
<small class="text-muted">
@if(!item.IsDBNull("PubDate")) {
<span>@item.GetDateTime("PubDate").ToString("MMMM dd, yyyy")</span>
}
@if((!item.IsDBNull("PubDate")) && (!item.IsDBNull("Topic")) && item.GetCategory("Topic").Count > 0) {
<span> - </span>
}
@if (!item.IsDBNull("Topic") && item.GetCategory("Topic").Count > 0) {
<span class="topics">
@foreach(CategoryFieldItem topic in item.GetCategory("Topic")) {
<span>@topic.Label</span>
}
</span>
}
</small>
</div>
@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>
}
<div>@BRT.Raw(@item.GetString("Body"))</div>
<div>
@if(!item.IsDBNull("PrimaryContact")) {
<div class="box box-outline">
<h4>Contact Information</h4>
<h5>@item["PrimaryContact"]</h5>
@if(!item.IsDBNull("Location")) {
<p>@item["Location"]</p>
}
@if(!item.IsDBNull("Address1")) {
<p>
<span>@item["Address1"]</span>
@if(!item.IsDBNull("Address2")) {
<span>, @item["Address2"]</span>
}
</p>
}
@if(!item.IsDBNull("City")) {
<span>@item["City"]</span>
}
@if(!item.IsDBNull("State")) {
foreach(CategoryFieldItem cat in item.GetCategory("State")) {
<span>@cat.Label</span>
}
}
@if(!item.IsDBNull("Zip")) {
<span>@item["Zip"]</span>
}
@if(!item.IsDBNull("Phone")) {
<p>@item["Phone"]</p>
}
@if(!item.IsDBNull("Email")) {
<p><a href="mailto:@item["Email"]">@item["Email"]</a></p>
}
</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/")) {
<p><a href="@file.Url" target="_blank">@(String.IsNullOrEmpty(file.Title) ? file.Filename : file.Title) <i class="fas fa-file-image"></i></a></p>
} 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"></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>
}
</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>