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 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>