Media : Files, pictures, videos...

Pictures, music, videos, files can be uploaded through the Ionize File Manager or directly by FTP in your media folder.

Media can be used in 2 ways :

  • Linked to articles or pages and displayed through ionize's tags,
  • Added in articles content with the embeded editor.

Media Folder

By default, the media are stored in the /files folder of your website directory.

To change the default media folder, go in the panel : Settings > Advanced Settings > Media.

Changing the files folder name through the Ionize Settings panel :
- Renames the filesystem folder
- Updates media URLs found in the database content.

Allowed mediaTop of Page

Allowed type of media can be setup in the Ionize panel : Settings > Advanced Settings > Media.

Setting up allowed media improves security by limiting file upload.

Add and link one mediaTop of Page

To add one media, when you're editing one page or article:

  • Click on the Add Media button : This will open the File Manager
  • Browse to the folder in which you will to add your media
  • Click on the Upload button : This will let you select your medi on your computer
  • Validate : The media is send to the server.

To link one media to one article or page :

  • Click on the Add Media button : This opens the File Manager
  • Double click on the wished media : it is linked to the content

Media list & linked picturesTop of Page

We saw how to link media to pages or articles.

In some case you can ask you why to link pictures instead of putting them directly inside the article content ?

Linked media instead of adding them to the content has several advantages :

  • The media meta data (alternative text, title, etc.) are stored in database, for each media,
  • Because the media list can be looped in a view, it is easy to build a gallery from media linked to an article,
  • The <ion:media /> tag automatically resizes the picture to the wished size. This preserve the design and makes the page loading faster.

Ordering and editing linked media

To order media, simply move them in the list by drag'n'drop.

The little yellow pen will open the media data window, the little unlink icon will unlink the media from the parent page or article.

Media meta dataTop of Page

Once one media is attached to a page or a article, it is encouraged to add some meta data to it.

Once written, these meta data will be linked to the media and if you attach the same media to another article or page, you will find the same data.
In other words, once set, you don't have to set again the media meta data of one medium.

To edit the meta data of one media, click on the little yellow pen icon at the bottom of the thumbnail.

Display media in viewsTop of Page

The <ion:medias /> tag allows to loop through media linked to a page or to an article :

<!-- This example displays the 3 first pictures linked to the current page -->
<ion:page>

<!-- The size of each picture will be 300px x 200px -->
<ion:medias type="picture" limit="3" size="300,200" >

<img title="<ion:media:title />" alt="<ion:media:alt />" src="<ion:media:src />" />
</ion:medias>

</ion:page>

Look at the Ionize Media Tags documentation to see complete features of this tag.