MODX provides three default file source types: File System, Amazon S3 Integration, and FTP. Other sources can be created by adding a new source type or by uploading them from Package Management.
Using File Sources
The following sections cover the basic usage of file sources.
Creating a Media Source
Go to Media > File Sources. Here you will see a list of the currently available media sources:
Before we continue, it is important to note the difference between a “Media Source” and a “Media Source Type”. The source media type is a classification of the source, such as an S3 source type or a Filesystem source type. These types point the source to different storage systems.
For now, create a media source by clicking the “Create” button on the “File Source” tab. A window should appear with a basic form for a source:
Now select the Filesystem source type and give it a name.
This media source type allows you to connect to an Amazon S3 bucket.
Available Properties
Name | Description |
---|---|
url |
Required. The URL of the Amazon S3 instance. Often http://myaccount.s3.amazonaws.com/ or https://s3.amazonaws.com/myaccount/. If you have trouble viewing thumbnails but they work correctly, make sure the URL ends with a slash. |
bucket |
Required. The bucket to connect to when logging in. |
key |
Required. The Amazon key used to authenticate with the bucket. |
secret_key |
Required. The Amazon secret key used to authenticate with the bucket. |
imageExtensions |
A list of file extensions that can be turned into thumbnails. Default Value: jpg,jpeg,png,gif |
thumbnailType |
When a thumbnail is displayed, the image type will be displayed as. Default Value: png |
thumbnailQuality |
The quality of the rendered preview, on a scale from 0 to 100. Default Value: 90 |
skipFiles |
A comma-separated list of file names to skip when viewing the source. Default value: .svn,.git,notes,nbproject,.idea,.DS_Store |
Once this is done, you will see your media source listed. Right-click on it and select “Edit File Source”.
Editing your new media source
This screen will display basic information about the new media source, a list of type-specific properties for the source that you can edit, and a “Permissions” tab that will allow you to restrict access to the source.
For now, let’s set the basePath
and baseUrl
properties to img/
(this is the path to the folder with images), and then add the values ,webp,avif
to the imageExtensions
property (we expand the list of supported images). Save the source.
Using your source
Once you’ve created it, you’ll be able to see the source in the drop-down list in the left tree on the “Files” tab.
If you select this source, you will now be able to see only the contents of the img/
directory in your MODX installation! (If you have not yet created the img/
directory in your installation, do so now.)
Also, you can connect this source to the TV type (input parameters): “Image” and “File” in the corresponding tab, when creating or editing a TV. This will take effect when editing awhen executing a TV on a resource from that context, and when displaying that TV in that context.
Now we’ll probably want to consider restricting access to that source so that our content editors can’t accidentally edit it and mess it up. Read this article to learn how.