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"
  }
]
}

Accessing the Data

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

  • File Manager
    The File Manager provides browserable and functional access to the site’s file storage. You can...
  • 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.
Send us a message at support@treepl.co and we will consult you as soon as possible.