Creating a Function

Implementing a simple search

Author Detail Page

Base CSS

Blog Post Detail Page with Topic and Related Content

Blog Posts Lister Page with Topics

Event Detail Page

Events Page

FAQ Detail Page with Topics and Related Content

FAQs Lister Page with Topics

Job Detail Page with Job Type and Related Content

Jobs Lister Page with Job Type

News Article Page with Topics and Related Content

News Lister Page with Topics

Photo Album Detail Page with Topics and Author

Photo Albums Lister Page

Code Examples

Creating a Function

At the the top of the page

@section head {

	@RenderSection("head")
}

    @functions {

    
    		string DistrictName {

        		get {

            			switch(Request.Friendly) {
            
                		case "ardmoredistrict":

                    				return "Ardmore District"; 
        
            
                	case "bartlesvilledistrict":

                    				return "Bartlesville District";
            
                		
           
                		default:

                    				return String.Empty;

                    
            }

        		}

    		}

    
    
	ConditionMeta.ConstantValue _districtCondition = null;

    
    ConditionMeta.ConstantValue DistrictValue {

        	get {

            		if (_districtCondition == null)

                		_districtCondition = new ConditionMeta.ConstantValue {Value = DistrictName};
            
            	return _districtCondition;

        	}

    	}


}
Written: 4/17/2019

Implementing a simple search

Useful if you are looking to implement a basic search of just one view

For Bootstrap 2

<form method="get" class="form-inline">
	<div class="input-append">Search: 
		<input class="span5" name="search" value="@Request.QueryString["search"]" type="text" />
		<button class="btn" type="submit">Search churches</button>
	</div>
</form>

For Bootstrap 3

<form method="get"  class="form-inline breadcrumb"  role="form">
    <div class="form-group  col-md-9">
     <label for="search" class="sr-only">Search: </label>          
	 <input class="form-control" name="search" value="@Request.QueryString["search"]" type="text" />
	</div>            
    <button class="btn btn-default" type="submit">Search churches</button>
</form>
Written: 4/17/2019

Author Detail Page

Author detail page containing list of published articles, finds type of content between News and Blog Posts to call the correct detail page according to the type or article.

author

@section head {

    <style>
        .pagetitle {
            display: none;
        }
        .person-img {
            text-align: center;
            margin-bottom: 30px;
        }
    </style>
}

@BRT.Detail(tableId: "Contacts", viewId: "Authors",
fields: new[] {"Category","PrimaryImage","FirstName","PreferredName","LastName",
"Email","Phone1","Phone2","Phone3","MailAddress1","MailAddress2","MailCity","MailState","MailZip","MailCountry",
"Description","Links.Type","Links.Link","Articles.Category","Articles.Title","Articles.PubDate","Articles.PrimaryImage","Articles.Summary","Articles.Body","Articles.Link"},
template:
@<div class="row">
    <div class="col-12 col-lg-8">
        <div class="customtitle">
            <h1>
                @if(!item.IsDBNull("PreferredName")) {
                    <span>@item["PreferredName"]</span>
                    <small class="text-muted">
                        @if(!item.IsDBNull("FirstName")) {
                            <span>@item["FirstName"]</span>
                        }
                        @if(!item.IsDBNull("LastName")) {
                            <span>@item["LastName"]</span>
                        }
                    </small>
                } else {
                    if(!item.IsDBNull("FirstName")) {
                        <span>@item["FirstName"]</span>
                    }
                    if(!item.IsDBNull("LastName")) {
                        <span>@item["LastName"]</span>
                    }
                }
            </h1>
        </div>
        @if(!item.IsDBNull("Description")) {
            <span>@BRT.Raw(@item["Description"])</span>
        }
    </div>
    <div class="col-12 col-lg-4">
        @if(!item.IsDBNull("PrimaryImage") && item.GetFiles("PrimaryImage").Count > 0) {
            if(item.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                <div class="person-img"><img src="@(item.GetFiles("PrimaryImage")[0].Url)?width=350&height=350&mode=crop" class="img-fluid" alt="@(String.IsNullOrEmpty(item.GetFiles("PrimaryImage")[0].Title) ? item.GetFiles("PrimaryImage")[0].Filename : item.GetFiles("PrimaryImage")[0].Title)"/></div>
            }
        }
        @if(!item.IsDBNull("Email")) {
            <span><a href="mailto:@item["Email"]" target="_blank" class="email" data-toggle="tooltip" title="Email">@item["Email"]</a></span>
        }
        @if(!item.IsDBNull("Links") && item.GetRecordList("Links").Count > 0) {
            <div class="social">
                <!--<h5>Links</h5>-->
                <center>
                    @foreach(EngineRecord item_links in item.GetRecordList("Links")) {
                        if(!item_links.IsDBNull("Type")) {
                            if(!item_links.IsDBNull("Link")) {
                                <span><a href="@item_links["Link"]" class="@item_links.GetCategory("Type")[0].Label.ToLower()" target="_blank"
                                    data-toggle="tooltip" title="@item_links.GetCategory("Type")[0].Label"        
                                ></a></span>
                            }
                        } else {
                            if(!item_links.IsDBNull("Link")) {
                                <span><a href="@item_links["Link"]" class="website" target="_blank"
                                    data-toggle="tooltip" title="Link" 
                                ></a></span>
                            }
                        }
                    }
                </center>
            </div>
        }
        
        <br/>
        <div>
            <h5>Published Articles</h5> 
            @if(!item.IsDBNull("Articles")) {
                string detailpage = null;
                foreach(EngineRecord item_articles in item.GetRecordList("Articles")) {
                    foreach(CategoryFieldItem cat in item_articles.GetCategory("Category")) {
                        detailpage = @cat.Label;
                    }
                    switch (detailpage) {
                        case "News":
                            detailpage = "article";
                            break;
                        case "Blog Posts":
                            detailpage = "post";
                            break;
                        default:
                            break;
                    }
                    if(!item_articles.IsDBNull("Title")) {
                        <p>
                            @if(!item_articles.IsDBNull("PubDate")) {
                              <small>@item_articles.GetDateTime("PubDate").ToShortDateString() - </small>
                            }
                            <a href="/@detailpage/@item_articles.Href">@item_articles["Title"]</a>
                        </p>
                    }
                }
            }
        </div>
    </div>
</div>)

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>

Base CSS

style.css

/*===================================*/
/*GENERAL SETTINGS START*/
/*===================================*/

img {
    max-width: 100%;
    height: auto;
}






/*===================================*/
/*GENERAL SETTINGS END*/
/*===================================*/


/*===================================*/
/*BREADCRUMBS START*/
/*===================================*/

.breadcrumb li a {
    padding: 0 5px;
}

ul.breadcrumb li:not(:last-child):after {
    content: "|";
}



/*===================================*/
/*BREADCRUMBS END*/
/*===================================*/



/*===================================*/
/*HEADER AND NAV START*/
/*===================================*/

.header-wrap {
    display: flex;
    justify-content: space-between;
}

/*===================================*/
/*HEADER AND NAV START*/
/*===================================*/



/*================================================*/
/*PLEASE FIND HOMEPAGE STYLES IN homepage.css FILE*/
/*================================================*/



/*===================================*/
/*LISTER AND DETAIL PAGES START*/
/*===================================*/

.customtitle {
    /*used in pages that use the lister to create the title. 
    Ex.: authors*/
    
}

/*METADATA AND TOPIC*/

.media-metadata {
    margin-bottom: 30px;
}

.media-metadata .topics span:not(:last-child):after {
    content: " | ";
}

/*STAFF CARD*/

.staff .card .primaryImg,
.staff .card-body {
    text-align: center;
}



/*===================================*/
/*LISTER AND DETAIL PAGES END*/
/*===================================*/

/*===================================*/
/*BLOCKS AND BOXES START*/
/*===================================*/

.box {
    margin: 15px 0;
    padding: 30px;
}

.box-bg {
    background-color: #eee;
}

.box-bg:first-child {
    margin-top: 30px;
}

.box-outline {
    border: 1px solid #eee;
}

.box-bg p, .box-outline p {
    margin-bottom: 0;
}

/*===================================*/
/*BLOCKS AND BOXES END*/
/*===================================*/

/*========================================*/
/*SOCIAL + COMMON FONT-AWESOME ICONS START*/
/*========================================*/

/*SOCIAL ICONS STYLES*/
.social span a:hover {
    text-decoration: none;
}

.email, .instagram, .website, .facebook, .pinterest,
.twitter, .flickr, .linkedin, .youtube, .website,
.twitch, .discord {
    font-family: "Font Awesome 5 Brands";
    margin-right: 10px;
    font-weight: 400;
}

.email, .website {
    font-family: "Font Awesome 5 Free";
}

.email::before {
    content: "\f0e0";
}

.facebook::before {
    content: "\f39e";
}

.flickr::before {
    content: "\f16e";
}

.instagram::before {
    content: "\f16d";
}

.linkedin::before {
    content: "\f0e1";
}

.pinterest::before {
    content: "\f231";
}

.twitter::before {
    content: "\f099";
}

.website::before {
    content: "\f360";
    font-weight: 900;
}

.youtube::before {
    content: "\f167";
}

.twitch::before {
    content: "\f1e8";
}

.discord::before {
    content: "\f392";
}



/*========================================*/
/*SOCIAL + COMMON FONT-AWESOME ICONS END*/
/*========================================*/











/*===================================*/
/*MEDIA QUERIES START - DESKTOP FIRST*/
/*===================================*/


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    
}

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    
}

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    
}

Blog Post Detail Page with Topic and Related Content

Blog Posts detail page includes author(s) info if present, related news and related photo albums.

post

@BRT.Detail(tableId: "Content", viewId: "BlogPosts",
fields: new[] {"PrimaryImage","Title","PubDate",
"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",
"RelatedNews.Title","RelatedNews.PrimaryImage","RelatedNews.PubDate","RelatedNews.Summary","RelatedNews.Body","RelatedNews.Topic","RelatedNews.Link",
"RelatedAlbums.Title","RelatedAlbums.PrimaryImage","RelatedAlbums.Summary","RelatedAlbums.Body","RelatedAlbums.PhotoAlbumTopics",
"Summary","Body","Topic","Files"},
template:
@<div>
    <small>
        <div class="media-metadata text-muted">
            @if(!item.IsDBNull("PubDate")) {
              <span>@item.GetDateTime("PubDate").ToShortDateString()</span>
            }
            @if(!item.IsDBNull("PubDate") && !item.IsDBNull("Authors")){
                <span> - </span>
            }
            @if(!item.IsDBNull("Authors")) {
              <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("FirstName")) {
                              <span>@item_authors["FirstName"]</span>
                            }
                            @if(!item_authors.IsDBNull("LastName")) {
                              <span>@item_authors["LastName"]</span>
                            }
                        </a>
                    </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>
            }
        </div>
    </small>
    
    @if(!item.IsDBNull("PrimaryImage")) {
      foreach(FileFieldItem file in item.GetFiles("PrimaryImage")) {
        if(file.ContentType.StartsWith("image/")) {
            <div class="primaryImg">
                <img src="@(file.Url)?width=1050&height=300" class="img-fluid"/>
            </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>
        }
    <!--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")) {
                bool hasLink = false;
                if(!item_relatednews.IsDBNull("Link")){
                    hasLink = true;
                }
                <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(!hasLink) {
                                <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 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>
    }
</div>)

Blog Posts Lister Page with Topics

Blog Posts lister page showing author and topics under title, right column loads topics for filtering.

blogs

<div class="row">
    <div class="col-sm-3 order-sm-2">
        @BRT.CategoryList(tableId:"Content", viewId:"BlogPosts", fieldId:"Topic", 
        template: 
        @<div class="topic-list-wrap">
            <h4 class="topic-list">Topics</h4>
            <p><a href="/blogs">All</a></p>
            @foreach(EngineRecord c in item) {
                <p><a href="/blogs?topic=@c["Id"]">@c["Label"]</a></p>
            }
        </div>)
    </div>
    <div class="col-sm-9">
        @BRT.Lister(tableId: "Content", viewId: "BlogPosts",
        fields: new[] {"PrimaryImage","Title","PubDate","Authors.FirstName","Authors.LastName","Authors.PrimaryImage","Summary","Body","Topic","Link"},
        condition: (String.IsNullOrEmpty(Request.QueryString["topic"])?null:ConditionMeta.Parse("[Topic.Id]='" + Request.QueryString["topic"] + "'")),
        template:
        @<div>
          @foreach(EngineRecord record in item) {
            <article class="media">
                @if(!record.IsDBNull("PrimaryImage") && record.GetFiles("PrimaryImage").Count > 0) {
                    if(record.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                        if(!record.IsDBNull("Link")) {
                            <a href="@record["Link"]" target="_blank">
                                <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        } else {
                            <a href="/post/@record.Href">
                                <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        }
                    }
                }
                <div class="media-body">
                    <h5 class="mt-0 mb-0">
                        <a href="/post/@record.Href">
                            @if(!record.IsDBNull("Title")) {
                              @record["Title"]
                            }
                        </a>
                    </h5>
                    <small class="media-metadata text-muted">
                        @if(!record.IsDBNull("PubDate")) {
                          <span>@record.GetDateTime("PubDate").ToShortDateString()</span>
                        }
                        @if(!record.IsDBNull("PubDate") && !record.IsDBNull("Authors")){
                            <span> - </span>
                        }
                        @if(!record.IsDBNull("Authors")) {
                          <span>by: </span>
                          <span class="topics">
                              @foreach(EngineRecord record_authors in record.GetRecordList("Authors")) {
                                <span>
                                    <a href="/author/@record_authors.Href">
                                        @if(!record_authors.IsDBNull("FirstName")) {
                                          <span>@record_authors["FirstName"]</span>
                                        }
                                        @if(!record_authors.IsDBNull("LastName")) {
                                          <span>@record_authors["LastName"]</span>
                                        }
                                    </a>
                                </span>
                                }
                          </span>
                        }
                        @if(!record.IsDBNull("Authors") && (!record.IsDBNull("Topic") && record.GetCategory("Topic").Count > 0)){
                            <span> - </span>
                        }
                        @if (!record.IsDBNull("Topic") && record.GetCategory("Topic").Count > 0) {
                            <span class="topics">
                                @foreach(CategoryFieldItem topic in record.GetCategory("Topic")) {
                                    <span>@topic.Label</span>
                                }
                            </span>
                        }
                    </small>
                    @if(!record.IsDBNull("Summary")) {
                        <p>@BRT.Raw(@record.GetString("Summary").Summarize(250))</p>
                    } else {
                        <p>@BRT.Raw(@record.GetString("Body").Summarize(250))</p>
                    }
                </div>   
            </article>
            }
        </div>)
    </div>
</div>

Event Detail Page

Starts with default helper to load the event details, followed by a customized lister to show related content: News, Events, Resources and FAQs. Required updates to the Events View included.

event

@section head {
    <style>
        .caleventtitle {
            display: none;
        }
    </style>
}

@BRT.CalendarDetail("events")

@BRT.Detail(tableId: "Content", viewId: "Events",
fields: new[] {"Title",
"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",
"RelatedFAQs.Title","RelatedFAQs.PrimaryImage","RelatedFAQs.Summary","RelatedFAQs.Body","RelatedFAQs.FAQTopics"},
template:
@<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")) {
                <div 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") && relatedevent.GetCategory("Calendar").Count > 0) {
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedevent.GetCategory("Calendar")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            }
                        </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>   
                </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">
                            <a href="/article/@item_relatednews.Href">
                                @if(!item_relatednews.IsDBNull("Title")) {
                                  @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") && item_relatednews.GetCategory("Topic").Count > 0) {
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in item_relatednews.GetCategory("Topic")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            }
                        </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 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>
                        @if (!relatedResource.IsDBNull("ResourceTypes") && relatedResource.GetCategory("ResourceTypes").Count > 0) {
                            <small class="media-metadata text-muted">
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedResource.GetCategory("ResourceTypes")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            </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 FAQs-->
    @if(!item.IsDBNull("RelatedFAQs") && (item.GetRecordList("RelatedFAQs").Count > 0)) {
        <div class="box box-outline">
            <h4>Related FAQs</h4>
            @foreach(EngineRecord relatedFAQ in item.GetRecordList("RelatedFAQs")) {
                <article class="media">
                    @if(!relatedFAQ.IsDBNull("PrimaryImage") && relatedFAQ.GetFiles("PrimaryImage").Count > 0) {
                        if(relatedFAQ.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                            <a href="/faq/@relatedFAQ.Href">
                                <img src="@(relatedFAQ.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(relatedFAQ.GetFiles("PrimaryImage")[0].Title) ? relatedFAQ.GetFiles("PrimaryImage")[0].Filename : relatedFAQ.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        }
                    }
                    <div class="media-body">
                        <h5 class="mt-0">
                            <a href="/faq/@relatedFAQ.Href">
                                @if(!relatedFAQ.IsDBNull("Title")) {
                                  @relatedFAQ["Title"]
                                }
                            </a>
                        </h5>
                        @if (!relatedFAQ.IsDBNull("FAQTopics") && relatedFAQ.GetCategory("FAQTopics").Count > 0) {
                            <small class="media-metadata text-muted">
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedFAQ.GetCategory("FAQTopics")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            </small>
                        }
                        @if(!relatedFAQ.IsDBNull("Summary")) {
                            <p>@BRT.Raw(@relatedFAQ.GetString("Summary").Summarize(250))</p>
                        } else {
                            <p>@BRT.Raw(@relatedFAQ.GetString("Body").Summarize(250))</p>
                        }
                    </div>   
                </article>
            }
        </div>
    }
</div>)
Starts with default helper to load the event details, followed by&nbsp;a customized lister to show related content: News, Events, Resources and FAQs.

Events View Related Content

<FieldSet Id="ArticleFields">
  <Relationship Id="RelatedEvents" TableId="Content" ViewId="Events" Name="Related Events" ShowAsTable="true" Reciprocal="true" FieldId="RelatedEvents" />
  <Relationship Id="RelatedResources" TableId="Content" ViewId="Resources" Name="Related Resources" ShowAsTable="true" />
  <Relationship Id="RelatedNews" TableId="Content" ViewId="News" Name="Related News" ShowAsTable="true" />
  <Relationship Id="RelatedFAQs" TableId="Content" ViewId="FAQs" Name="Related FAQs" ShowAsTable="true" />
</FieldSet>
Make sure to update the Events View with the code above so that t he related content works.<br /> Double check that all the relevant views exist and are correctly named.<br /> For any related content you don&#39;t want to display, simply don&#39;t add the relationship to the veiw.<br /> When removing relationships, remember to also remove that section of content from the code page - both in the Fields section and in the code itself.

Events Page

Use one of the provided Event Helpers to generate the page. The first option loads all visible/available calendars, the second option only loads specified calendars.

events

<!--CHOOSE ONLY ONE!!-->

<!--Default calendar helper-->
@BRT.Calendar(DetailPage:"event-detail")

<!--Option to display specific calendars, separate with commas-->
@BRT.Calendar(DetailPage:"event-detail", Calendars:"123456")
Make sure the detail page name is correct.

FAQ Detail Page with Topics and Related Content

faq

@BRT.Detail(tableId: "Content", viewId: "FAQs",
fields: new[] {"Title","Body","FAQTopics","PubDate","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",
"RelatedFAQs.Title","RelatedFAQs.PrimaryImage","RelatedFAQs.Summary","RelatedFAQs.Body","RelatedFAQs.FAQTopics"},
template:
@<div>
    <small class="media-metadata text-muted">
        @if(!item.IsDBNull("PubDate")) {
          <span>@item.GetDateTime("PubDate").ToShortDateString()</span>
        }
        @if(!item.IsDBNull("PubDate") && !item.IsDBNull("FAQTopics")){
            <span> - </span>
        }
        @if (!item.IsDBNull("FAQTopics") && item.GetCategory("FAQTopics").Count > 0) {
            <div class="topics">
                @foreach(CategoryFieldItem topic in item.GetCategory("FAQTopics")) {
                    <span>@topic.Label</span>
                }
            </div>
        }
    </small>
    @if(!item.IsDBNull("PrimaryImage")) {
      foreach(FileFieldItem file in item.GetFiles("PrimaryImage")) {
        if(file.ContentType.StartsWith("image/")) {
            <div class="primaryImg">
                <img src="@(file.Url)?width=1050&height=300" class="img-fluid"/>
            </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>
    }
    <!--RELATED FAQs-->
    @if(!item.IsDBNull("RelatedFAQs") && (item.GetRecordList("RelatedFAQs").Count > 0)) {
        <div class="box box-outline">
            <h4>Related FAQs</h4>
            @foreach(EngineRecord relatedFAQ in item.GetRecordList("RelatedFAQs")) {
                <article class="media">
                    @if(!relatedFAQ.IsDBNull("PrimaryImage") && relatedFAQ.GetFiles("PrimaryImage").Count > 0) {
                        if(relatedFAQ.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                            <a href="/faq/@relatedFAQ.Href">
                                <img src="@(relatedFAQ.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(relatedFAQ.GetFiles("PrimaryImage")[0].Title) ? relatedFAQ.GetFiles("PrimaryImage")[0].Filename : relatedFAQ.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        }
                    }
                    <div class="media-body">
                        <h5 class="mt-0">
                            <a href="/faq/@relatedFAQ.Href">
                                @if(!relatedFAQ.IsDBNull("Title")) {
                                  @relatedFAQ["Title"]
                                }
                            </a>
                        </h5>
                        @if (!relatedFAQ.IsDBNull("FAQTopics") && relatedFAQ.GetCategory("FAQTopics").Count > 0) {
                            <small class="media-metadata text-muted">
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedFAQ.GetCategory("FAQTopics")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            </small>
                        }
                        @if(!relatedFAQ.IsDBNull("Summary")) {
                            <p>@BRT.Raw(@relatedFAQ.GetString("Summary").Summarize(250))</p>
                        } else {
                            <p>@BRT.Raw(@relatedFAQ.GetString("Body").Summarize(250))</p>
                        }
                    </div>   
                </article>
            }
        </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">
                            <a href="/article/@item_relatednews.Href">
                                @if(!item_relatednews.IsDBNull("Title")) {
                                  @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") && item_relatednews.GetCategory("Topic").Count > 0) {
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in item_relatednews.GetCategory("Topic")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            }
                        </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")) {
                <div 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") && relatedevent.GetCategory("Calendar").Count > 0) {
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedevent.GetCategory("Calendar")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            }
                        </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>   
                </div>
            }
        </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>
                        @if (!relatedResource.IsDBNull("ResourceTypes") && relatedResource.GetCategory("ResourceTypes").Count > 0) {
                            <small class="media-metadata text-muted">
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedResource.GetCategory("ResourceTypes")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            </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>
    }
</div>)

FAQs Lister Page with Topics

faqs

<div class="row">
    <div class="col-sm-3 order-sm-2">
        @BRT.CategoryList(tableId:"Content", viewId:"FAQs", fieldId:"FAQTopics", 
        template: 
        @<div class="topic-list-wrap">
            <h4 class="topic-list">Topics</h4>
            <p><a href="/faqs">All</a></p>
            @foreach(EngineRecord c in item) {
                <p><a href="/faqs?topic=@c["Id"]">@c["Label"]</a></p>
            }
        </div>)
    </div>
    <div class="col-sm-9">
        @BRT.Lister(tableId: "Content", viewId: "FAQs",
        fields: new[] {"PrimaryImage","Title","PubDate","Summary","Body","FAQTopics"},
        condition: (String.IsNullOrEmpty(Request.QueryString["topic"])?null:ConditionMeta.Parse("[FAQTopics.Id]='" + Request.QueryString["topic"] + "'")),
        template:
        @<div>
          @foreach(EngineRecord record in item) {
            <article class="media">
                @if(!record.IsDBNull("PrimaryImage") && record.GetFiles("PrimaryImage").Count > 0) {
                    if(record.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                        <a href="/faq/@record.Href">
                            <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                        </a>
                    }
                }
                <div class="media-body">
                    <h5 class="mt-0">
                        <a href="/faq/@record.Href">
                            @if(!record.IsDBNull("Title")) {
                              @record["Title"]
                            }
                        </a>
                    </h5>
                    <small class="media-metadata text-muted">
                        @if(!record.IsDBNull("PubDate")) {
                          <span>@record.GetDateTime("PubDate").ToShortDateString()</span>
                        }
                        @if(!record.IsDBNull("PubDate") && !record.IsDBNull("FAQTopics")){
                            <span> - </span>
                        }
                        @if (!record.IsDBNull("FAQTopics")) {
                            if(record.GetCategory("FAQTopics").Count > 1){
                                foreach(CategoryFieldItem topic in record.GetCategory("FAQTopics")) {
                                    <span class="topic">@topic.Label</span>
                                }
                            } else {
                                foreach(CategoryFieldItem topic in record.GetCategory("FAQTopics")) {
                                    <span>@topic.Label</span>
                                }
                            }
                        }
                    </small>
                    @if(!record.IsDBNull("Summary")) {
                        <p>@BRT.Raw(@record.GetString("Summary").Summarize(250))</p>
                    } else {
                        <p>@BRT.Raw(@record.GetString("Body").Summarize(250))</p>
                    }
                </div>  
            </article>
            }
        </div>)
    </div>
</div>

Job Detail Page with Job Type and Related Content

job

@* --------- 
This code block loads a Job Post article with Job Posting Type and related content (in this order): 
News, Photo Albums.

**IMPORTANT INFORMATION**

To use this code you MUST create the "JobPostingTypes" Category and make the following edit to the "JobPostings" View.

To create the "JobPostingTypes" Category:

In the dashboard main menu, click Admin > Categories. Click the green "+New Category Type" button on the right, and name it "Job Posting Types".
Click save. You may now create your Job Postings types.
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 "JobPostings" view, don't worry - we can create it easily.
Click the green "+New" button on the right side and select "I'd like to create a new type of Content". 
Enter the name "Job Postings" (without the quote marks) and click Create.

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="JobPostingTypes" CatType="Job Posting Types" Name="Position Type" Cmd="After:Keywords" />
      <Relationship Id="RelatedNews" Name="Related News Articles" TableId="Content" ViewId="News" 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> and <Category> lines inside the "ArticleFields" fieldset.

Save the view and you're done.
------------ *@

@BRT.Detail(tableId: "Content", viewId: "JobPostings",
fields: new[] {"Title","PubDate","PrimaryImage","Body","JobPostingTypes","PrimaryContact","Location","Address1","Address2","City","State","Zip","Phone","Email","Files",
"RelatedNews.Title","RelatedNews.PrimaryImage","RelatedNews.PubDate","RelatedNews.Summary","RelatedNews.Body","RelatedNews.Topic","RelatedNews.Link",
"RelatedAlbums.Title","RelatedAlbums.PrimaryImage","RelatedAlbums.Summary","RelatedAlbums.Body","RelatedAlbums.PhotoAlbumTopics"},
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("JobPostingTypes")) && item.GetCategory("JobPostingTypes").Count > 0) {
                <span> - </span>
            }
            @if (!item.IsDBNull("JobPostingTypes") && item.GetCategory("JobPostingTypes").Count > 0) {
                <div class="topics">
                    @foreach(CategoryFieldItem topic in item.GetCategory("JobPostingTypes")) {
                        <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" />
                            @*
                            <figcaption class="figure-caption"><em>@item.GetFiles("PrimaryImage")[0].Title</em>
                                <p>@item.GetFiles("PrimaryImage")[0].Description</p>
                            </figcaption>
                            *@
                        </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>
        }
    </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") && item_relatednews.GetCategory("Topic").Count > 0) {
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in item_relatednews.GetCategory("Topic")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            }
                        </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 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("Topic") && relatedAlbum.GetCategory("Topic").Count > 0) {
                                <div class="topics">
                                    @foreach(CategoryFieldItem topic in relatedAlbum.GetCategory("Topic")) {
                                        <span>@topic.Label</span>
                                    }
                                </div>
                            }
                        </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>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>

Jobs Lister Page with Job Type

jobs

<div class="row">
    <div class="col-sm-3 order-sm-2">
        @BRT.CategoryList(tableId:"Content", viewId:"JobPostings", fieldId:"JobPostingTypes", 
        template: 
        @<div class="topic-list-wrap">
            <h4 class="topic-list">Topics</h4>
            <p><a href="/jobs">All</a></p>
            @foreach(EngineRecord c in item) {
                <p><a href="/jobs?topic=@c["Id"]">@c["Label"]</a></p>
            }
        </div>)
    </div>
    <div class="col-sm-9">
        @BRT.Lister(tableId: "Content", viewId: "JobPostings",
        fields: new[] {"PrimaryImage","Title","PubDate","Authors.FirstName","Authors.LastName","Authors.PrimaryImage","Summary","Body","JobPostingTypes","Link"},
        condition: (String.IsNullOrEmpty(Request.QueryString["topic"])?null:ConditionMeta.Parse("[JobPostingTypes.Id]='" + Request.QueryString["topic"] + "'")),
        template:
        @<div>
          @foreach(EngineRecord record in item) {
            <article class="media">
                @if(!record.IsDBNull("PrimaryImage") && record.GetFiles("PrimaryImage").Count > 0) {
                    if(record.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                        if(!record.IsDBNull("Link")) {
                            <a href="@record["Link"]" target="_blank">
                                <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        } else {
                            <a href="/job/@record.Href">
                                <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        }
                    }
                }
                <div class="media-body">
                    <h5 class="mt-0 mb-0">
                        <a href="/job/@record.Href">
                            @if(!record.IsDBNull("Title")) {
                              @record["Title"]
                            }
                        </a>
                    </h5>
                    <small class="media-metadata text-muted">
                        @if(!record.IsDBNull("PubDate")) {
                          <span>@record.GetDateTime("PubDate").ToShortDateString()</span>
                        }
                        @if(!record.IsDBNull("PubDate") && (!record.IsDBNull("JobPostingTypes") && record.GetCategory("JobPostingTypes").Count > 0)){
                            <span> - </span>
                        }
                        @if (!record.IsDBNull("JobPostingTypes") && record.GetCategory("JobPostingTypes").Count > 0) {
                            <div class="topics">
                                @foreach(CategoryFieldItem topic in record.GetCategory("JobPostingTypes")) {
                                    <span>@topic.Label</span>
                                }
                            </div>
                        }
                    </small>
                    @if(!record.IsDBNull("Summary")) {
                        <p>@BRT.Raw(@record.GetString("Summary").Summarize(250))</p>
                    } else {
                        <p>@BRT.Raw(@record.GetString("Body").Summarize(250))</p>
                    }
                </div>   
            </article>
            }
        </div>)
    </div>
</div>

News Article Page with Topics and Related Content

News detail that loads: date, topic(s), primary image (if there's more than one image then load slick carousel), body, Media Contact info (this is not author, it's a relationship to people), files, and then a lot of related content. Includes View Setup and links to core slick carousel css/js files, as well as base carousel css).

article

@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: "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" />
                            @*
                            <figcaption class="figure-caption"><em>@item.GetFiles("PrimaryImage")[0].Title</em>
                                <p>@item.GetFiles("PrimaryImage")[0].Description</p>
                            </figcaption>
                            *@
                        </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>
News detail that loads: date, topic(s),&nbsp;primary image (if there&#39;s more than one&nbsp;primary image then load slick carousel),&nbsp;body, Media Contact info (this is not author, it&#39;s a relationship to people),&nbsp;files, and then a lot of related content. Includes News View edit.<br /> <br /> <strong>** Must include &lt;link href=&quot;/files/content/www/slick/slick.css&quot; rel=&quot;stylesheet&quot;/&gt; and &lt;script src=&quot;/files/content/www/slick/slick.min.js&quot;&gt;&lt;/script&gt; for carousel to work.<br /> ** Must include &lt;script src=&quot;/files/content/www/js/popper.min.js&quot;&gt;&lt;/script&gt; for tooltips to work</strong>

News View Related Content

<FieldSet Id="ArticleFields">
  <Category Id="Topic" />
  <Relationship Id="RelatedNews" TableId="Content" ViewId="News" Name="Related News Articles" ShowAsTable="true" Reciprocal="true" FieldId="RelatedNews" />
  <Relationship Id="RelatedEvents" TableId="Content" ViewId="Events" Name="Related Events" ShowAsTable="true" Reciprocal="true" FieldId="RelatedNews" />
  <Relationship Id="RelatedResources" TableId="Content" ViewId="Resources" Name="Related Resources" ShowAsTable="true" />
  <Relationship Id="RelatedFAQs" TableId="Content" ViewId="FAQs" Name="Related FAQs" ShowAsTable="true" Reciprocal="true" FieldId="RelatedNews" />
  <Relationship Id="RelatedAlbums" TableId="Content" ViewId="PhotoAlbums" Name="Related Photo Albums" ShowAsTable="true" Reciprocal="true" FieldId="RelatedNews" />
  <Relationship Id="MediaContact" TableId="Contacts" ViewId="People" Name="Media Contact" ShowAsTable="true" />
</FieldSet>
Make sure all related content Views exist and have the correct parameters. If not using any of the related content, simply remove the relationship from the view, and also make sure to remove all the appropriate code from the page (both in the Fields section and the code section).

slick-carousel.css

/*CAROUSEL STYLES*/
        .in-page-carousel {
            max-width: 100%;
            margin: 0 auto 30px;
        }
        
        .in-page-carousel figure {
            margin: 0;
            padding: 0;
        }
        
        .slick-prev, .slick-next {
            position: absolute;
            top: 45%;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            cursor: pointer;
            color: #666;
            border: none;
            outline: none;
            border-radius: 50px;
            height: 40px;
            width: 40px;
            display: inline-block;
            background: #fff;
            background: rgba(255,255,255, 0.5);
            z-index: 10;
        }
        
        .slick-prev {
            left: 15px;
        }
        
        .slick-next {
            right: 15px;
        }
        
        .slick-prev:before, .slick-next:before {
            font-weight: 900;
            font-family: "Font Awesome 5 Free";
        }
        
        .slick-prev:before {
            content: "\f053";
        }
        
        .slick-next:before {
            content: "\f054";
            padding-left: 3px;
        }
        
        .slick-slide img {
            margin: 0 auto;
            padding: 0;
        }
Basic css for page with slick carousel.<br /> This is not the core slick css file, this is just basic styling to get things rolling quicker.

News Lister Page with Topics

Lister page containing right column for topic filtering.

news

<div class="row">
    <div class="col-sm-4 order-sm-2">
        @BRT.CategoryList(tableId:"Content", viewId:"News", fieldId:"Topic", 
        template: 
        @<div class="topic-list-wrap">
            <h4 class="topic-list">Filter by Topic</h4>
            <p><a href="/news">All</a></p>
            @foreach(EngineRecord c in item) {
                <p><a href="/news?topic=@c["Id"]">@c["Label"]</a></p>
            }
        </div>)
    </div>
    @BRT.Lister(tableId: "Content", viewId: "News",
    fields: new[] {"Title","PubDate","PrimaryImage","Summary","Body","Topic","Link"},
    condition: (String.IsNullOrEmpty(Request.QueryString["topic"])?null:ConditionMeta.Parse("[Topic.Id]='" + Request.QueryString["topic"] + "'")),
    template:
    @<div class="col-sm-8">
        @foreach(EngineRecord record in item) {
            <article class="media">
                @if(!record.IsDBNull("PrimaryImage") && record.GetFiles("PrimaryImage").Count > 0) {
                    if(record.GetFiles("PrimaryImage")[0].ContentType.StartsWith("image/")) {
                        if(!record.IsDBNull("Link")) {
                            <a href="@record["Link"]" target="_blank">
                                <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        } else {
                            <a href="/newsdetail/@record.Href">
                                <img src="@(record.GetFiles("PrimaryImage")[0].Url)?width=120&height=120&mode=crop" class="mr-3 img-fluid" alt="@(String.IsNullOrEmpty(record.GetFiles("PrimaryImage")[0].Title) ? record.GetFiles("PrimaryImage")[0].Filename : record.GetFiles("PrimaryImage")[0].Title)"/>
                            </a>
                        }
                    }
                }
                <div class="media-body">
                    <h5 class="mt-0 mb-0">
                        @if(!record.IsDBNull("Link")) {
                            <a href="@record["Link"]" target="_blank">
                                @record["Title"]
                            </a>
                        } else {
                            <a href="/newsdetail/@record.Href">
                                @if(!record.IsDBNull("Title")) {
                                  @record["Title"]
                                }
                            </a>
                        }
                    </h5>
                    <small class="media-metadata text-muted">
                        @if(!record.IsDBNull("PubDate")) {
                          <span>@record.GetDateTime("PubDate").ToShortDateString()</span>
                        }
                        @if(!record.IsDBNull("PubDate") && !record.IsDBNull("Topic")){
                            <span> - </span>
                        }
                        @if (!record.IsDBNull("Topic")) {
                            if(record.GetCategory("Topic").Count > 1){
                                foreach(CategoryFieldItem topic in record.GetCategory("Topic")) {
                                    <span class="topic">@topic.Label</span>
                                }
                            } else {
                                foreach(CategoryFieldItem topic in record.GetCategory("Topic")) {
                                    <span>@topic.Label</span>
                                }
                            }
                        }
                    </small>
                    @if(!record.IsDBNull("Summary")) {
                        <p>@BRT.Raw(@record.GetString("Summary").Summarize(250))</p>
                    } else {
                        <p>@BRT.Raw(@record.GetString("Body").Summarize(250))</p>
                    }
                </div>   
            </article>
        }
    </div>)
</div>

Photo Album Detail Page with Topics and Author

Upload the attached files to a folder named "lightbox" and make sure the links in the lister and detail pages work. **These files are also in the Photo Album Lister Page article, if you've already done this, no need to do it again.**

album

<!--PHOTO ALBUM DETAIL WITH LINKS TO CSS AND JS-->
<!--MUST UPLOAD LIGHTBOX FILES TO FILES MANAGER AREA-->


@section head {
    <link href="/files/content/www/lightbox/lightbox.css" rel="stylesheet"/>
    <link href="/files/content/www/css/photoalbums.css" rel="stylesheet"/>
}


<div id="photogalleries">
    @BRT.Detail(tableId: "Content", viewId: "PhotoAlbums",
    fields: new[] {"Title","Files","Authors","Body","PhotoAlbumTopics"},
    template:
    @<div class="album">
        <small>
            <div class="media-metadata text-muted">
                @if(!item.IsDBNull("Authors") && item.GetRecordList("Authors").Count > 0) {
                  <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("FirstName")) {
                                  <span>@item_authors["FirstName"]</span>
                                }
                                @if(!item_authors.IsDBNull("LastName")) {
                                  <span>@item_authors["LastName"]</span>
                                }
                            </a>
                        </span>
                        }
                  </span>
                }
                @if((!item.IsDBNull("Authors") && item.GetRecordList("Authors").Count > 0) && (!item.IsDBNull("PhotoAlbumTopics") && item.GetCategory("PhotoAlbumTopics").Count > 0)){
                    <span> - </span>
                }
                @if (!item.IsDBNull("PhotoAlbumTopics") && item.GetCategory("PhotoAlbumTopics").Count > 0) {
                    <span class="topics">
                        @foreach(CategoryFieldItem topic in item.GetCategory("PhotoAlbumTopics")) {
                            <span>@topic.Label</span>
                        }
                    </span>
                }
            </div>
        </small>
        @if(!item.IsDBNull("Body")){
            <div>@BRT.Raw(@item.GetString("Body"))</div>
        }
        <div class="row">
            @if (item.GetFiles("Files").Count>0) {
                for(int photo = 0; photo < @item.GetFiles("Files").Count; photo++) {
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="albumbox">
                            <a href="@item.GetFiles("Files")[photo].Url" data-title="@item.GetFiles("Files")[photo].Description" data-lightbox="gallery"><img class="img-fluid" src="@item.GetFiles("Files")[photo].Url?width=468&height=468&mode=crop&enlarge=true" /></a>
                                @if(!String.IsNullOrEmpty(item.GetFiles("Files")[photo].Title) || !String.IsNullOrEmpty(item.GetFiles("Files")[photo].Description)){
                                    <a href="@item.GetFiles("Files")[photo].Url" data-title="@item.GetFiles("Files")[photo].Description" data-lightbox="gallery">
                                        <div class="albumdeets">
                                            <h5 class="albumtitle">@item.GetFiles("Files")[photo].Title</h5>
                                        </div>
                                    </a>
                                }
                        </div>
                    </div>
                }
            }
        </div>
    </div>)
</div>

<script src="/files/content/www/lightbox/lightbox.min.js"></script>
Includes links to core lightbox css and js, and custom css for displaying the photos on the page (pre-lightbox).<br /> Create the photoalbums.css file in the Files Manager with the content included in the next section.

photoalbum.css

#photogalleries .albumbox {
    margin-bottom: 30px;
    position: relative;
}

#photogalleries .albumdeets {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    padding: 50px 10px 10px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

#photogalleries .albumdeets .albumtitle {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff;
    font-weight: 100;
}

#photogalleries .albumdeets p, 
#photogalleries .albumdeets a {
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 1px 1px #000;
    font-weight: 100;
    letter-spacing: 0.3px;
}

#photogalleries .albumdeets p, 
#photogalleries .albumdeets a {
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 1px 1px #000;
    font-weight: 100;
    letter-spacing: 0.3px;
}

#photogalleries .albumdeets .media-metadata {
    color: #fff;
}

#photogalleries .albumsummary {
    font-size: 12px;
}

#photogalleries .album .albumdeets {
    padding: 10px;
}

.lightbox .lb-image {
    border-radius: 0;
}
Create the file called&nbsp;photoalbum.css and use the code above in it. Make sure it is linked in both the lister and detail pages.

Photo Albums Lister Page

Includes link to core lightbox css file and right column for filtering by topic. Custom css file content included both here and in the lister page code. Create the css file in the Files Manager only once and link it on both the Photo Albums lister and detail pages. Upload the attached files to a folder named "lightbox" and make sure the links in the lister and detail pages work.

albums

@section head {
    <link href="/files/content/www/css/photoalbums.css" rel="stylesheet"/>
}


<div class="row">
    <div class="col-sm-3 order-sm-2">
        @BRT.CategoryList(tableId:"Content", viewId:"PhotoAlbums", fieldId:"PhotoAlbumTopics", 
        template: 
        @<div class="topic-list-wrap">
            <!--<div>-->
                <h4 class="topic-list">Topics</h4>
                <p><a href="/photo-albums">All</a></p>
                @foreach(EngineRecord c in item) {
                    <p><a href="/photo-albums?topic=@c["Id"]">@c["Label"]</a></p>
                }
            <!--</div>-->
        </div>)
    </div>
    <div class="col-sm-9">
        <div id="photogalleries">
            @BRT.Lister(tableId:"Content", viewId:"PhotoAlbums",
            fields: new[] {"Title","PubDate","PrimaryImage","Summary","Body","PhotoAlbumTopics","HideOnPhotoAlbumsPage"},
            condition: (String.IsNullOrEmpty(Request.QueryString["topic"])?null:ConditionMeta.Parse("[PhotoAlbumTopics.Id]='" + Request.QueryString["topic"] + "'")),
            sortFields: new EngineCore.Meta.SortFieldMeta[] {new EngineCore.Meta.SortFieldMeta {FieldId = "PubDate", Descending=true}}, 
            template: 
            @<div class="row">
                @foreach(EngineRecord record in item) {
                    if(record.IsDBNull("HideOnPhotoAlbumsPage") || !record.GetBoolean("HideOnPhotoAlbumsPage")){
                        <div class="col-lg-4 col-md-6 col-xs-12">
                            <div class="albumbox">
                                @if (record.GetFiles("PrimaryImage").Count>0) {
                                    <a href="/photo-album/@record.Href"><img class="img-fluid" src="@record.GetFiles("PrimaryImage")[0].Url?width=468&height=468&mode=crop&enlarge=true" /></a>
                                }
                                <a href="/photo-album/@record.Href">
                                    <div class="albumdeets">
                                        <h5 class="albumtitle">@record.GetString("Title")</h5>
                                        @if (!record.IsDBNull("Summary")) {
                                            <p class="albumsummary">@record.GetString("Summary")</p>
                                        }
                                    </div>
                                </a>
                            </div>
                        </div>
                    }
                }
            </div>)
        </div>
    </div>
</div>
Make sure to include the css file.

photoalbums.css

#photogalleries .albumbox {
    margin-bottom: 30px;
    position: relative;
}

#photogalleries .albumdeets {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    padding: 50px 10px 10px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

#photogalleries .albumdeets .albumtitle {
    font-size: 18px;
    margin-bottom: 0;
    color: #fff;
    font-weight: 100;
}

#photogalleries .albumdeets p, 
#photogalleries .albumdeets a {
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 1px 1px #000;
    font-weight: 100;
    letter-spacing: 0.3px;
}

#photogalleries .albumdeets p, 
#photogalleries .albumdeets a {
    color: #fff;
    margin-bottom: 0;
    text-shadow: 0 1px 1px #000;
    font-weight: 100;
    letter-spacing: 0.3px;
}

#photogalleries .albumdeets .media-metadata {
    color: #fff;
}

#photogalleries .albumsummary {
    font-size: 12px;
}

#photogalleries .album .albumdeets {
    padding: 10px;
}

.lightbox .lb-image {
    border-radius: 0;
}
Create the file called&nbsp;photoalbum.css and use the code above in it. Make sure it is linked in both the lister and detail pages.