I need to list related assets by a related metadata field

#1

Hi,

I am trying to create a list of related assets to be linked at the bottom of certain pages. I have set up a related asset metadata field on the metadata schema that I want to use to tag assets that are related to the current asset.

I tried adding a listing asset but can’t see how to filter results based on a metadata field. I have found similar posts in the forums that mention using a search page instead, but I cannot find any examples or instructions on how this might work.

Can you please advise on how I can do this with Squiz?

Thanks

(Jsisk) #2

It sounds like you could use the “Dynamic paramaters” section of an asset listing “Details” screen to reuse the listing where you need it.

Check out the following tutorial which might be of some use: - https://matrix.squiz.net/tutorials/2016/how-to-create-a-dynamic-asset-listing-using-keywords

In your case you could change the source of the dynamic parameter to the “Current Asset”.

I hope that this helps and let us know if you need any more information.

(Tbaatar) #3

As jsisk mentioned use dynamic parameters and set the the following parameter:

  • Array of specific asset IDs or selection group (specified assets must be children of the static related node)
  • Current Asset > Keyword (asset_metadata_XXXXXX).

Make sure not to use the percentage sign for the metadata keyword.

The other option is to use SSJS, tutorial can be found here:

Here is example of fully marked up card component:

            <script runat="server">
            //Get all of our related assets ID's into variable
            const assets = %globals_asset_metadata_ap_articles^explode:;%;
          
            if(assets.length > 0){
                assets.forEach(function(asset){
                     print('<div class="col-12 sm-col-12 md-col-6 lg-col-3 px2 mb3">');
                      print('<div class="ap-card relative rounded5 border white-background">');
                        print('<a href="%globals_asset_url:'+ asset +'%" class="half block">');
                        print('<div class="card-head relative">');
                        print('<img class="ap-image" src="https:%globals_asset_metadata_hero:'+ asset +'%?w=800&q=50" alt="%globals_asset_name:'+ asset +'%" />');
                        print('</div>');
                        print('<div class="card-body relative p2 grey-mid-text" style="height: 120px;">');
                        print('<p class="mb1 bold">%globals_asset_name:'+ asset +'%</p>'); 
                        print('<p class="text mb1">%globals_asset_metadata_metaDescription:'+ asset +'^maxwords:12%&hellip;</p>');
                        print('</div>');
                        print('<div class="card-foot relative grey-mid-text">');
                        print('<p class="m0"><span class="block p2"><small>%globals_asset_metadata_blog_publishAt:'+ asset +'^date_format:d M Y%</small></span></p>');
                        print('</div>');
                        print('</a>');
                      print('</div>');
                    print('</div>');
                  
                });
            }
        </script>

If you go down the SSJS path bare in mind you will need to write the conditions such as ordering.