Photo Album with Topics (Detail Page)
A Detail page is a template to be used for a particular type of content. This code creates a Photo Album Detail page that will be used to display each Photo Album. It'll display the photos in the album, and then the Author(s)' information. The Photo Albums View and Category don't exist, so you'll have to create them. The instructions are included in the beginning of the code as comments. In order to work with the Photo Albums Lister Page code block, the Friendly URL of this page should be "album".
<!--A Detail page is a template to be used for a particular type of content. -->
<!--This code creates a Photo Album Detail page that will be used to display each Photo Album. -->
<!--It'll display the photos in the album, and then the Author(s)' information. -->
<!--The Photo Albums View and Category don't exist, so you'll have to create them. -->
<!--The instructions are below. -->
<!--In order to work with the Photo Albums Lister Page code block, the Friendly URL of this page should be "album".-->
<!--This code block creates a detail Photo Album page including author(s) info (if present) and topic.-->
<!--**IMPORTANT INFORMATION**-->
<!--To use this code you MUST do the following:-->
<!--1- create the "Photo Album Topics" Category:-->
<!-- In the dashboard main menu, click Admin > Categories. Click the green "+New Category Type" button on the right, and name it "Photo Album Topics".-->
<!-- Click save. You may now create the topics for your Photo Albums.-->
<!-- Save your edits.-->
<!--2 - In the Files Manager, make sure you have the following folder structure (create the folders if you don't): -->
<!-- Home > content > www > lightbox-->
<!-- Download the following files and upload them to the "lightbox" folder:-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/lightbox.css-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/photoalbum.css-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/lightbox.min.js-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/close.png-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/loading.gif-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/next.png-->
<!-- https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/prev.png-->
<!--3 - Edit the Photo Albums View:-->
<!--In the dashboard main menu, click Admin > Views. You'll see a list of your existing views. -->
<!--If you don't see the "PhotoAlbums" 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 "Photo Albums" (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="PhotoAlbumTopics" CatType="Photo Album Topics" Multiple="true" Name="Album Topics" />-->
<!--</FieldSet>-->
<!--If you've previously made edits to the View and the "ArticleFields" fieldset is already visible, all you need to do is include the <Category> lines inside the "ArticleFields" fieldset.-->
<!--Save the view and you're done.-->
@section head {
<link href="/files/content/www/lightbox/lightbox.css" rel="stylesheet"/>
<link href="/files/content/www/lightbox/photoalbums.css" rel="stylesheet"/>
}
<div id="photogalleries">
@BRT.Detail(tableId: "Content", viewId: "PhotoAlbums",
fields: new[] {"Title","Files","Authors","Body","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:
@<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("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>
</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>
@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>
}
</div>)
</div>
<script src="/files/content/www/lightbox/lightbox.min.js"></script>