Basics
Features
Best Practices
Addon Development
Related Docs
Dark Mode

#Media

Your Addon can add Media Items to the Media Library. You can package these in your Addon, download them to your Addon's Storage Path and add them by providing their filepath, or you can simply pass a URL to MercuryCMS for it to download. All files you provide MercuryCMS will automatically be converted and resized.

#Storing Media

To store Media, you can use cms.createMedia() and pass it a source which must be one of url, filepath, or use a multipart/form-data request and provide a file object called file.

// use static-cms-addon
import cms from 'static-cms-addon'

let media = await cms.createMedia({
  name: 'My Image', // optional
  altText: 'An Image I Made', // optional
  caption: 'I really, really, really like this image', // optional
  url: 'http://example.com/images/my_image.png',
})
console.log(media._id)

// use axios
let response = await axios.post(`http://localhost:${cmsPort}/api/addon/media`, {
  name: 'My Image',
  altText: 'An Image I Made',
  caption: 'I really, really, really like this image', // optional
  url: 'http://example.com/images/my_image.png',
})
console.log(response.data.media._id)

If you provide a url, that URL will be saved on the Media Item in the Media Library. If you attempt to add media from the same URL in the future, it will skip downloading and instead just return the media object that already exists. You can force the Media to be downloaded by passing refreshFromSource: true as one of the options in the request. This will force the Media to be redownloaded and saved without changing the Media's _id.

When providing a filepath, is must be absolute. Unlike url, filepath is not saved on the Media, so you can safely use the same filepath multiple times to create multiple Media Items.

If you do not provide a name, MercuryCMS will use the base filename. For example, if you use filepath: '/path/to/image.png', the Media's name will be "image".

#Media Directories

You can put Media Items into Media Directories by specifying a path. Any path you specify will put the new Media into the existing path by that name, automatically creating any directories that don't exist. For example, if you specify path: 'My Addon/Interior Photos', it will automatically create a directory called "My Addon" if it doesn't exist, then create a folder called "Interior Photos" inside the My Addon folder before adding Media into that folder.

Once you have created a Media Item, users are free to organize it into directories as they wish. If you'd like to move an existing Media Item to a different path, you can use cms.moveMedia(). This will automatically create any directories that don't exist and move the selected items to the new path. Note that moving items may confuse users into thinking the Media has been deleted. When doing this, make it clear to your users where the Media went and why.

// use static-cms-addon
import cms from 'static-cms-addon'

let media = await cms.getMedia()
let mediaItem = media[0]

await cms.moveMedia(mediaItem._id, 'My Addon/New Place') // you can pass a single _id or array of _ids

// use axios
let response = await axios.get(`http://localhost:${cmsPort}/api/addon/media`)
let mediaItem = response.data.media[0]

await axios.post(`http://localhost:${cmsPort}/api/addon/media/move` {mediaIds: [mediaItem._id], path: 'My Addon/New Place'})

#Getting Media

You can get a list of all of the Media your Addon has creating by using cms.getMedia().

// use static-cms-addon
import cms from 'static-cms-addon'

let media = await cms.getMedia()
console.log(media[0])

// use axios
let response = await axios.get(`http://localhost:${cmsPort}/api/addon/media`)
console.log(response.data.media[0])