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

Create a folder called Listings as a child of the Configuration folder.
Right-click on the Configuration Listings folder.
Select Create new… Pages Asset Listing.
Enter the name Footer listing.
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.

Right-click on the Footer listing asset.
Select Details.
On the Details screen, configure the following fields:
1. In Asset types to list, select Standard page.
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.
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.
Select Save.

Select footer listing type formats.
Expand the Type Formats folder.
Right-click on Default Format and select Content.
Select Edit.

Replace the existing code line with the following code:

<li>
    <a class="text-muted" href="%asset_url%">%asset_short_name%
    </a>
</li>

Select Save

Edit the footer include to include your asset listing:

Right-click on Designs Design nesters Footer.
Select Content
Select Edit

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 sections 1 and 2.

Test the asset listing

You can test your site in a browser in two ways:

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

OR
Right-click on the site asset and select Preview In new window.
1. You will see your site in the new tab.
  
  Your site will now look like this:

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.

Right-click on Footer listing.
Select Asset grouping
Select Edit
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.
  
  When you select Save, more asset listing configuration options appear.
Add the following settings:
1. Check the Direct Parent Only checkbox.
2. Select Short name in the Sort By field.
3. Select Save.
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.
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.
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.

Help Center

Menu