Step 8: List assets

Asset listings dynamically generate a list of assets. Some uses for asset listings are:

  • Landing pages listing child pages

  • Image carousels

  • Document listings

  • Comments.

In this example, an asset listing is used to generate a list of links in the footer dynamically. The footer could be generated using the menu design area from Step 3. However, it is a good candidate for an asset listing as it can be nested into the design as an include.

Create an asset listing

  1. Create a folder called Listings as a child of the Configuration folder.

  2. Right-click on the Configuration  Listings folder.

  3. Select Create new…​  Pages  Asset Listing.

  4. Enter the name Footer listing.

  5. Select Create.

Configure the asset listing

Asset listings have many configuration options. For this basic listing, you will configure what kind of assets to show, and how many levels of sub-pages to list.

  1. Right-click on the Footer listing asset.

  2. Select Details.

  3. On the Details screen, configure the following fields:

    1. In Asset types to list, select Standard page.

      This gif shows that the easiest way to find the asset type you want is to start typing in the input field and then select from the presented options
    2. Scroll down to Asset Locations.

    3. Enter the asset ID of the site asset into the Root Nodes field, or use the asset picker.

      This image shows the root node field set to the site asset.
    4. Set minimum depth/height to 2. This setting will limit the pages listed in the footer to two levels.

    5. Set maximum depth/height to 2.

      This image shows the maximum and minimum listing levels set to 2.
  4. Select Save.

  1. Select footer listing  type formats.

  2. Expand the Type Formats folder.

  3. Right-click on Default Format and select Content.

  4. Select Edit.

  5. Replace the existing code line with the following code:

    <li>
        <a class="text-muted" href="%asset_url%">%asset_short_name%
        </a>
    </li>
  6. Select Save

Edit the footer include to include your asset listing:

  1. Right-click on Designs  Design nesters  Footer.

  2. Select Content

  3. Select Edit

  4. Replace the lines:

    <div class="col-6 col-md">
    <h5>About</h5>
    </div>

    with the following line:

%globals_asset_contents_raw:_XXXXX_% (1)
1 Change XXXXX to the asset ID of the Footer listing asset.

Test your site

For a good asset listing demonstration, you must first add more pages to your site.

Add more pages to the site

Add more pages to Section 1 and Section 2 to test the asset listing. Add three pages as sub-pages of Section 1 and three pages as sub-pages of section 2. Create the pages as Standard Pages. Add the following pages under Section 1:

  • Page 1a

  • Page 1b

  • Page 1c

Add the following pages under Section 2:

  • Page 2a

  • Page 2b

  • Page 2c

When you have created the new pages, the page structure will look like the image below:

This image shows the new pages added under section 1 and section 2.

Test the asset listing

You can test your site in a browser by using one of the following methods:

  1. Copy the URL from the site asset and paste it into a browser.

    OR

  2. Right-click on the site asset and select Preview  In new window.

    This image shows the drop-down menu that appears when you right-click on the site asset. It shows Preview selected
  3. You will see your site in the new tab.

    Your site will now look like this:

    This image shows the Test Site main page with all the sub-assets listed in the footer.

The asset listing is working, but now the assets must be organized under the level 1 sections of the site to create a 2-level footer design.

Group the asset listing by parent

You can specify how to group your asset listings. In this example you will group by parent asset.

  1. Right-click on Footer listing.

  2. Select Asset grouping

  3. Select Edit

  4. In the Add New Group section:

    1. Check the checkbox in the New Group? section.

    2. Select at the top level in the first drop-down list.

    3. Select Parent Asset in the second drop-down list.

    4. Select Save.

      This image shows the settings in the Add New Group section of the Asset Grouping page.

      When you select Save, more asset listing configuration options appear.

  5. Add the following settings:

    1. Check the Direct Parent Only checkbox.

    2. Select Short name in the Sort By field.

    3. Select Save.

      This image shows the settings in the Add New Group section of the Asset Grouping page.
  6. Configure the format of the group listings:

    1. Right-click on Group Formats  Group Level 1 Format folder.

    2. Select Content.

    3. Select Edit.

    4. Replace the existing code line with the following code:

      <div class="col-6 col-md">
      <h5>%group_name%</h5>
      <ul class="list-unstyled text-small">
      %group_listing%
      </ul>
      </div>
    5. Select Save.

  7. You now need to tell the asset listing about your custom grouping:

    1. Right-click on, Footer listing.

    2. Select Details.

    3. Select Edit.

    4. Scroll down to the List Formatting section.

    5. Select Custom grouping from the List Format field.

    6. Select Save.

      These settings will display the group name under a heading and then list individual level 2 pages in a nested list.

  8. This footer is implemented using <div> tags, however the default for an asset listing is <ul> tags. Remove the wrapping <ul> tags:

    1. Right-click on Footer listing  Page Contents.

    2. Select Content.

    3. Select Edit.

    4. Remove the <ul> tags, leaving %asset_listing%.

    5. Select Save.

Reload your page in the browser: You will see the pages in your site grouped into sections:

This image shows the formatted asset listings on the home page of the site.

Further reading

For more information about the use of asset listings, read the Asset listings documentation.