Contributors:

api (File System)

This module component fetches data from the file system with reference to a specific folder/directory on your site.

{% component type: "api", resource: "File System", folder: "/", collectionVariable: "yourLiquidVariableName" %}

Parameters and Options

type

api

This system parameter identifies the type of component for retrieving data from the CMS

resource

File System

The system resource used for the data collection.

folder

/ default
<Your Folder Path>

The folder URL to retrieve files from (default value is '/' for root directory).
A custom folder path might look like this: /images/gallery01/

Only files directly within the specified path will be retrieved. Sub folders and their child files are not returned in the collection.

collectionVariable

<yourLiquidVariableName>

Assigns the data to a Liquid collection enabling further access to the data on the Page or Template using Liquid.

Your collectionVariable value must only contain English letters, numbers or underscores. Spaces or special characters are not supported.

Liquid Output

The below example is the output for all files found within the specified folder path of /images/documentation/sample-images.

{
  "Items": [
    {
      "Url": "/images/documentation/sample-images/sample-img-01.jpg"
    },
    {
      "Url": "/images/documentation/sample-images/sample-img-02.jpg"
    },
    {
      "Url": "/images/documentation/sample-images/sample-img-03.jpg"
    },
    {
      "Url": "/images/documentation/sample-images/sample-img-04.jpg"
    }
  ],
  "Params": {
    "type": "api",
    "resource": "File System",
    "folder": "/images/documentation/sample-images",
    "collectionvariable": "sampleImages"
  }
}

Accessing the Data

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

Since this component type does not use layouts, the data is accessible only via the Liquid collection provided by the collectionVariable added to the Component tag.

An example using collectionVariable with value "sampleImages" to list all files from the specified folder parameter:

{% component type: "api", resource: "File System", folder: "/images/documentation/sample-images", collectionVariable: "sampleImages" %}

Looping through the collection to render all the item URLs in a list, giving us:

/images/documentation/sample-images/sample-img-01.jpg
/images/documentation/sample-images/sample-img-02.jpg
/images/documentation/sample-images/sample-img-03.jpg
/images/documentation/sample-images/sample-img-04.jpg

The code:

<ul>
    {% for i in sampleImages.items %}
        <li>{{i['url']}}</li>
    {% endfor %}
</ul>

Accessing a specific item within the collection. In this case the third item (zero based index), which in our example would render the value /images/documentation/sample-images/sample-img-03.jpg

{{sampleImages.items[2]['url']}}