News Article with Topics and Related Content (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). It also includes Related Content (News, Events, Resources, Photo Albums), therefore you must make edits to the News View to use this code. The instructions are included in the beginning of the code as comments.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). -->
<!--It also includes Related Content (News, Events, Resources, Photo Albums), -->
<!--therefore you must make edits to the News View to use this code. -->
<!--The instructions are below.-->
<!--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 detail News article page including topic and related content: -->
<!--News, Events, Resources and Photo Albums.-->
<!--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:-->
<!--1 - Make the edit below to the "News" View:-->
<!-- In the dashboard main menu, click Admin > Views. You'll see a list of your existing views. -->
<!-- If you don't see the "News" view, don't worry - it exists, but you can't see it because you haven't made any edits to it yet.-->
<!-- Click the green "+New" button on the right side and select "I'd like to customize an existing view". -->
<!-- Select "News (Content)" from the list.-->
<!-- Now that you're inside the View, click the "Document Map" dropdown list, -->
<!-- scroll down to find "FieldSet ArticleFields" and click it (do not click the black "x" circle).-->
<!-- In the code, you'll see the following new line:-->
<!-- <FieldSet Id="ArticleFields"/>-->
<!-- Now replace that whole line with the content below:-->
<!-- <FieldSet Id="ArticleFields">-->
<!-- <Relationship Id="RelatedNews" Name="Related News Articles" TableId="Content" ViewId="News" ShowAsTable="true" />-->
<!-- <Relationship Id="RelatedEvents" Name="Related Events" TableId="Content" ViewId="Events" ShowAsTable="true" />-->
<!-- <Relationship Id="RelatedResources" Name="Related Resources" TableId="Content" ViewId="Resources" ShowAsTable="true" />-->
<!-- <Relationship Id="RelatedAlbums" Name="Related Photo Albums" TableId="Content" ViewId="PhotoAlbums" ShowAsTable="true" />-->
<!-- </FieldSet>-->
<!-- If you've previously made edits to the View, all you need to do is include the <Relationship> lines inside the "ArticleFields" fieldset.-->
<!-- Save the view.-->
<!--2 - 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",
"RelatedNews.Title","RelatedNews.PrimaryImage","RelatedNews.PubDate","RelatedNews.Summary","RelatedNews.Body","RelatedNews.Topic","RelatedNews.Link",
"RelatedEvents.Title","RelatedEvents.StartDate","RelatedEvents.PrimaryImage","RelatedEvents.Summary","RelatedEvents.Body","RelatedEvents.Calendar",
"RelatedResources.Title","RelatedResources.PrimaryImage","RelatedResources.Summary","RelatedResources.Body","RelatedResources.ResourceTypes",
"RelatedAlbums.Title","RelatedAlbums.PrimaryImage","RelatedAlbums.Summary","RelatedAlbums.Body","RelatedAlbums.PhotoAlbumTopics",
"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">
<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) {
<div class="topics">
@foreach(CategoryFieldItem topic in item.GetCategory("Topic")) {
<span>@topic.Label</span>
}
</div>
}
</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>
<!--RELATED NEWS-->
@if(!item.IsDBNull("RelatedNews") && (item.GetRecordList("RelatedNews").Count > 0)) {
<div class="box box-outline">
<h4>Related News</h4>
@foreach(EngineRecord item_relatednews in item.GetRecordList("RelatedNews")) {
<article class="media">
@if(!item_relatednews.IsDBNull("PrimaryImage") && item_relatednews.GetFiles("PrimaryImage").Count > 0) {
if(item_relatednews.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
if(!item_relatednews.IsDBNull("Link")) {
<a href="@item_relatednews["Link"]" target="_blank">
<img src="@(item_relatednews.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(item_relatednews.GetFiles("PrimaryImage")[0].Title) ? item_relatednews.GetFiles("PrimaryImage")[0].Filename : item_relatednews.GetFiles("PrimaryImage")[0].Title)"/>
</a>
} else {
<a href="/article/@item_relatednews.Href">
<img src="@(item_relatednews.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(item_relatednews.GetFiles("PrimaryImage")[0].Title) ? item_relatednews.GetFiles("PrimaryImage")[0].Filename : item_relatednews.GetFiles("PrimaryImage")[0].Title)"/>
</a>
}
}
}
<div class="media-body">
<h5 class="mt-0">
@if(item_relatednews.IsDBNull("Link")) {
<a href="/article/@item_relatednews.Href">
@item_relatednews["Title"]
</a>
} else {
<a href="@item_relatednews["Link"]">
@item_relatednews["Title"]
</a>
}
</h5>
<small class="media-metadata text-muted">
@if(!item_relatednews.IsDBNull("PubDate")) {
<span>@item_relatednews.GetDateTime("PubDate").ToShortDateString()</span>
}
@if(!item_relatednews.IsDBNull("PubDate") && !item_relatednews.IsDBNull("Topic")){
<span> | </span>
}
@if (!item_relatednews.IsDBNull("Topic")) {
foreach(CategoryFieldItem topic in item_relatednews.GetCategory("Topic")) {
<span>@topic.Label</span>
}
}
</small>
@if(!item_relatednews.IsDBNull("Summary")) {
<p>@BRT.Raw(@item_relatednews.GetString("Summary").Summarize(250))</p>
} else {
<p>@BRT.Raw(@item_relatednews.GetString("Body").Summarize(250))</p>
}
</div>
</article>
}
</div>
}
<!--RELATED EVENTS-->
@if(!item.IsDBNull("RelatedEvents") && (item.GetRecordList("RelatedEvents").Count > 0)) {
<div class="box box-outline">
<h4>Related Events</h4>
@foreach(EngineRecord relatedevent in item.GetRecordList("RelatedEvents")) {
<article class="media">
@if(!relatedevent.IsDBNull("PrimaryImage") && relatedevent.GetFiles("PrimaryImage").Count > 0) {
if(relatedevent.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
<a href="/event/@relatedevent.Href">
<img src="@(relatedevent.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(relatedevent.GetFiles("PrimaryImage")[0].Title) ? relatedevent.GetFiles("PrimaryImage")[0].Filename : relatedevent.GetFiles("PrimaryImage")[0].Title)"/>
</a>
}
}
<div class="media-body">
<h5 class="mt-0">
<a href="/event/@relatedevent.Href">
@if(!relatedevent.IsDBNull("Title")) {
@relatedevent["Title"]
}
</a>
</h5>
<small class="media-metadata text-muted">
@if(!relatedevent.IsDBNull("StartDate")) {
<span>@relatedevent.GetDateTime("StartDate").ToShortDateString()</span>
}
@if(!relatedevent.IsDBNull("StartDate") && !relatedevent.IsDBNull("Calendar")){
<span> | </span>
}
@if (!relatedevent.IsDBNull("Calendar")) {
foreach(CategoryFieldItem topic in relatedevent.GetCategory("Calendar")) {
<span>@topic.Label</span>
}
}
</small>
@if(!relatedevent.IsDBNull("Summary")) {
<p>@BRT.Raw(@relatedevent.GetString("Summary").Summarize(250))</p>
} else {
<p>@BRT.Raw(@relatedevent.GetString("Body").Summarize(250))</p>
}
</div>
</article>
}
</div>
}
<!--RELATED RESOURCES-->
@if(!item.IsDBNull("RelatedResources") && (item.GetRecordList("RelatedResources").Count > 0)) {
<div class="box box-outline">
<h4>Related Resources</h4>
@foreach(EngineRecord relatedResource in item.GetRecordList("RelatedResources")) {
<article class="media">
@if(!relatedResource.IsDBNull("PrimaryImage") && relatedResource.GetFiles("PrimaryImage").Count > 0) {
if(relatedResource.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
<a href="/resource/@relatedResource.Href">
<img src="@(relatedResource.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(relatedResource.GetFiles("PrimaryImage")[0].Title) ? relatedResource.GetFiles("PrimaryImage")[0].Filename : relatedResource.GetFiles("PrimaryImage")[0].Title)"/>
</a>
}
}
<div class="media-body">
<h5 class="mt-0">
<a href="/resource/@relatedResource.Href">
@if(!relatedResource.IsDBNull("Title")) {
@relatedResource["Title"]
}
</a>
</h5>
<small class="media-metadata text-muted">
@if (!relatedResource.IsDBNull("ResourceTypes")) {
foreach(CategoryFieldItem topic in relatedResource.GetCategory("ResourceTypes")) {
<span>@topic.Label</span>
}
}
</small>
@if(!relatedResource.IsDBNull("Summary")) {
<p>@BRT.Raw(@relatedResource.GetString("Summary").Summarize(250))</p>
} else {
<p>@BRT.Raw(@relatedResource.GetString("Body").Summarize(250))</p>
}
</div>
</article>
}
</div>
}
<!--RELATED PHOTO ALBUMS-->
@if(!item.IsDBNull("RelatedAlbums") && (item.GetRecordList("RelatedAlbums").Count > 0)) {
<div class="box box-outline">
<h4>Related Albums</h4>
@foreach(EngineRecord relatedAlbum in item.GetRecordList("RelatedAlbums")) {
<article class="media">
@if(!relatedAlbum.IsDBNull("PrimaryImage") && relatedAlbum.GetFiles("PrimaryImage").Count > 0) {
if(relatedAlbum.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
<a href="/album/@relatedAlbum.Href">
<img src="@(relatedAlbum.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(relatedAlbum.GetFiles("PrimaryImage")[0].Title) ? relatedAlbum.GetFiles("PrimaryImage")[0].Filename : relatedAlbum.GetFiles("PrimaryImage")[0].Title)"/>
</a>
}
}
<div class="media-body">
<h5 class="mt-0">
<a href="/album/@relatedAlbum.Href">
@if(!relatedAlbum.IsDBNull("Title")) {
@relatedAlbum["Title"]
}
</a>
</h5>
<small class="media-metadata text-muted">
@if (!relatedAlbum.IsDBNull("PhotoAlbumTopics")) {
foreach(CategoryFieldItem topic in relatedAlbum.GetCategory("PhotoAlbumTopics")) {
<span>@topic.Label</span>
}
}
</small>
@if(!relatedAlbum.IsDBNull("Summary")) {
<p>@BRT.Raw(@relatedAlbum.GetString("Summary").Summarize(250))</p>
} else {
<p>@BRT.Raw(@relatedAlbum.GetString("Body").Summarize(250))</p>
}
</div>
</article>
}
</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>