Photo Albums with Topics (Lister Page)

<!--A Lister is a block of code that loads a list of records from a specific view. -->
<!--This code creates a Photo Albums Lister displaying the Primary Image of each album, -->
<!--and a snippet of the Summary (or Body) field. A sidebar loads the Photo Album Topics. -->
<!--Both the Photo Albums View and Topics Category need to be created. -->
<!--The instructions are below. -->
<!--If you add this code to a page, it can be your "Photo Albums" page.-->

<!--This code block creates a lister page of the existing Photo Albums.-->
<!--A column on the right side allows your visitors to filter by 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 - To create/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 "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" Name="Topics" Cmd="After:Keywords" />-->
<!--    </FieldSet>-->
    
<!--    If you've previously made edits to the View, all you need to do is include the <Category> lines inside the "ArticleFields" fieldset.-->
    
<!--    Save the view-->

<!--3 - 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 file and upload them to the "lightbox" folder:-->
    
<!--    https://www.brickriver.com/files/central_assets/forcodesnippets/lightbox/photoalbum.css-->

@section head {
    <link href="/files/content/www/lightbox/photoalbum.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">
            <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 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) {
                    <div class="col-lg-4 col-md-6 col-xs-12">
                        <div class="albumbox">
                            @if (record.GetFiles("PrimaryImage").Count>0) {
                                <a href="/album/@record.Href"><img class="img-fluid" src="@record.GetFiles("PrimaryImage")[0].Url?width=468&height=468&mode=crop&enlarge=true" /></a>
                            }
                            <a href="/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>