Resource (Detail Page)
A Detail page is a template to be used for a particular type of content. This code creates a Resource Article Detail page that will be used to display each Resource Article.
In order to work with the Resources (Lister Page) code block, the Friendly URL of this page should be "resource".
<!--A Detail page is a template to be used for a particular type of content. -->
<!--This code creates a Resource Article Detail page that will be used to display each Resource Article. -->
<!--In order to work with the Resources (Lister Page) code block, the Friendly URL of this page should be "resource".-->
<!--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-->
<!--You also MUST create the "ResourceTypes" Category and add it to the View:-->
<!--- To create the ResourceTypes Category:-->
<!--In the dashboard main menu, click Admin > Categories. Click the green "+New Category Type" button on the right, and name it "Resource Types".-->
<!--Click save. You may now create the topics for your Resources.-->
<!--Save your edits.-->
<!--- To edit the View:-->
<!--In the dashboard main menu, click Admin > Views. You'll see a list of your existing views. -->
<!--If you don't see the "Resources" view, don't worry - we can create it easily.-->
<!--Click the green "+New" button on the right side and select "I'd like to customize an existing view". -->
<!--Find "Resources" on the list and click it.-->
<!--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">-->
<!-- <Category Id="ResourceTypes" CatType="Resource Types" Name="Resource Types" Multiple="true" Cmd="Before:Keywords" />-->
<!--</FieldSet>-->
<!--If you've previously made edits to the View, all you need to do is include the <Category> lines inside the "ArticleFields" fieldset.-->
<!--Save the view and you're done.-->
@section head{
<link href="/files/content/www/slick/slick.css" rel="stylesheet"/>
<link href="/files/content/www/css/slick-carousel.css" rel="stylesheet"/>
}
@BRT.Detail(tableId: "Content", viewId: "Resources",
fields: new[] {"Title","PubDate","PrimaryImage","Body","ResourceTypes",
"PrimaryContact","Location","Address1","Address2","City","State","Zip","Phone","Email","Files"},
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("ResourceTypes")) && item.GetCategory("ResourceTypes").Count > 0) {
<span> - </span>
}
@if (!item.IsDBNull("ResourceTypes") && item.GetCategory("ResourceTypes").Count > 0) {
<div class="topics">
@foreach(CategoryFieldItem topic in item.GetCategory("ResourceTypes")) {
<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>
@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>
}
</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>