Media sources

Media sources Website development
Media sources are the locations where the files used on the site are stored. They can be located on the server, on another server, or even in cloud storage. Using file sources in MODX allows you to simplify the process of file management and provide quick access to them.

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:

Pass to 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:

Create a File Source

Now select the Filesystem source type and give it a name.

Information for creating an S3 Media Source.

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 Valuejpg,jpeg,png,gif
thumbnailType When a thumbnail is displayed, the image type will be displayed as. Default Valuepng
thumbnailQuality The quality of the rendered preview, on a scale from 0 to 100. Default Value90
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.

Editing source settings

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.

New file source in 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.

Rate article
MODX 3
Add a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.