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 included in the beginning of the code as comments. If you add this code to a page, it can be your "Photo Albums" 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>