Change log

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

Parameter
Values
Required
Description
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']}}

Related Articles

  • Content Modules
    File Manager
    The File Manager provides browserable and functional access to the site’s file storage. You can...
  • Extras
    Force Download Handler
    If the file link has ?downloadable=1 URL parameter than the content will be dowloadable to...

External Resources

There are currently no external resources available.

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.

Questions?

We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.