Media content

The CMS supports displaying media content like images, audio and video files. All the files have to be stored initially on our local drive in order to be published. At the moment the only supported online repository is Google Cloud Storage.

How to publish media files? #

When we need to display some media content in our pages we start by adding the media file into our local media folder. So lets say we have added a video file (getting-started-tutorial.mp4), and now our media folder looks like this:

        
            media
              └─── default
                     └─── elemental-cms-logo.jpg
              └─── videos
                     └─── getting-started-tutorial.mp4
        
    

Now we can publish our getting-started-tutorial.mp4 file by using the media push command as shown below:

        
            elemental-cms media push media/videos/getting-started-tutorial.mp4
        
    

Using the media files #

In order to use our media files on any of our pages we use the elemental_media_url_for function like this:

        
            <div>
                <img src="{{ elemental_url_for_media('default/elemental-cms-logo.jpg') }}" />
            </div>
        
    

By using this function when the application runs locally the server will use the local media file, while when it runs remotely the server will serve the Google Cloud Storage versión of the file.

Exploring the remote repository #

We can browse our remote repository using the CLI by issuing a media list --all command. This command will display all the files stored at Google Cloud Storage, and it will display a related missing file indicator.

If the missing file indicator (*) is shown to the right of the file name that means that the local file is missing. And if the missing file indicator is shown to the left of the file name that means that the remote file is missing.

        
            elemental-cms media list --all

            * default/image.jpg
            default/my-json-file.json *
            readme.md

            3 media files found
            * is an indicator of missing files either on remote folder (left) or local folder (right)
        
    
Content