Medias

mediasTop of Page

Iterator tags for medias.

Tag : <ion:medias />

Display medias from articles

<ion:page:articles>

<!-- Get the pictures only -->
<ion:medias type="picture" size="400,300">

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

</ion:medias>

<!-- Get the pictures and the videos (from 1.0.6) -->
<ion:medias type="picture,video">

<!-- do something with pictures -->
<ion:media:type is="picture">

<img src="<ion:media:src" />

</ion:media:type>

<!-- do something with videos -->
<ion:media:type is="video">

<ion:media:provider is='youtube'><iframe src="<ion:media:src />" ></iframe></ion:media:provider>
       <ion:media:provider is='vimeo'><iframe src="<ion:media:src />" ></iframe></ion:media:provider>
       <ion:media:provider is='dailymotion'><iframe src="<ion:media:src />" ></iframe></ion:media:provider>

</ion:media:type>

</ion:medias>


</ion:page:articles>

medias attributes

AttributeOptionalValuesExample
type no picture, video, music, file
<ion:medias type="video">
...
</ion:medias />
extension yes The file extension to filter on.
Example : extension="pdf"
<ion:medias type="file" extension="pdf">
...
</ion:medias>
limit yes Integer.
Limits the displayed media to the given number.
<ion:medias type="music" limit="3">
...
</ion:medias>
range yes Start and stop index, coma separated.
Start at 1.
Example : range="2,4" displays the medias from the second to the 4th one.
<ion:medias type="picture" range="2,3" >
... display the
</ion:medias>
size yes

Only availbable with the type="picture" attribute

Returns resized pictures.

<ion:medias type="picture" size="300" >
<img src="<ion:media:src />" />
</ion:medias>
method yes

Only availbable with type="picture"

Resize the picture using the given method :

  • adaptive : the resized picture will fill the given size, even the original height or width doesn't fit the proportions of the asked size,
  • square : will produce one square picture
  • border : will add one coloured border on the resized missing side
  • width : forces the width of the resized picture
  • height : forces the height of the resized picture

If not set and size is set, the default behaviour will resize the picture by using the first size argument use it on the wider side of the picture.

mediaTop of Page

Tag : <ion:media />

Used to display data from one media of the <ion:medias /> collection.

media attributes

As the <ion:medias /> tag, the <ion:media /> tag can set the size of pictures.

AttributeOptionalValuesExample
size yes

Only availbable with the type="picture" attribute

Returns resized pictures.

<ion:medias type="picture" >
<img src="<ion:media:src size='300' />" />
</ion:medias>
method yes

Only availbable with type="picture"

Resize the picture using the given method :

  • adaptive : the resized picture will fill the given size, even the original height or width doesn't fit the proportions of the asked size,
  • square : will produce one square picture
  • border : will add one coloured border on the resized missing side
  • width : forces the width of the resized picture
  • height : forces the height of the resized picture

If not set and size is set, the default behaviour will resize the picture by using the first size argument use it on the wider side of the picture.

media children tags

TagReturnsExample
<ion:src />

The complete URL to the media.
Example : http://domain.tld/files/pictures/portfolio/my_work.jpg

If one size is asked with the size attribute of the parent <ion:medias /> tag, this URL will be the one of the resized version of the picture.
Example : http://domain.tld/files/.thumbs/pictures/300/my_work.jpg

<ion:medias size="300" />
<ion:media:src />
</ion:medias>
<ion:path /> The complete relative path to the media, including the folder set in Settings > Advanced Settings > Media base folder and the file name.
Example : files/pictures/portfolio/my_work.jpg
<ion:media:path />
<ion:base_path/> Relative path to the folder of the media, with trailing slash.
Example : files/pictures/portfolio/
<ion:media:base_path />
<ion:file_name /> File name of the media.
Example : my_work.jpg
<ion:media:file_name />
<ion:alt /> Media alternative text
<ion:media:alt />
<ion:title /> Title of the media
<ion:media:title />
<ion:description/> Description
<ion:media:description />
<ion:copyright /> Copyright
<ion:media:copyright />
<ion:link /> Link of this media to one external / internal content.
<ion:media:link />
<ion:date /> Logical date of the media. If not set, no date will be returned.
<ion:media:date format="d.m.Y" />
<ion:extension /> File extension of the media
<ion:media:extension is="jpg">
... displayed if file is .jpg
</ion:media:extension>
<ion:mime /> Mime of the file
<ion:media:mime />

Resizing picturesTop of Page

Getting resized pictures from the <ion:medias /> tag is done through 2 attributes : size and method.

Let's discover what they return depending on the used method.

Just size, no method

The pictures will be resized based on their wider size : The wider side of the returned pictures will have the asked size.

<ion:media type="picture" size="150" >
<img src="<ion:media:src />" />
</ion:medias>

Ionize Media resize - no method

Method "height"

Sets the height as "master" size of the resized picture. the returned pictures will all have the asked height.

<ion:medias type="picture" size="150" method="height" >
<img src="<ion:media:src />" />
</ion:medias>

Ionize Media resize - method "height"

Method "width"

Sets the width as "master" size of the resized picture. The returned pictures will all have the asked width.

<ion:medias type="picture" size="150" method="width" >
<img src="<ion:media:src />" />
</ion:medias>

Ionize Media resize - method "width"

Method "border"

Resizes the pictures based on their wider side and adds one coloured border to complete one squared rendering.

<ion:medias type="picture" size="150" method="border" color="#930031" >
<img src="<ion:media:src />" />
</ion:medias>

Ionize Media resize - method "border"

Method "adaptive"

Resizes the pictures to fill the asked size. No matter the picture orientation, each picture will fill the asked size.

<ion:medias type="picture" size="180,140" method="adaptive" >
<img src="<ion:media:src />" />
</ion:medias>

Ionize Media resize - method "adaptive"

Method "square"

Returns squared resized pictures.

The square crop of each resized picture can start :

  • At the top left,
  • at the middle (default),
  • At the right bottom.

The square crop preference is set on each picture in Ionize, in the "options" tab of the linked picture.

<ion:medias type="picture" size="200" method="square" >
<img src="<ion:media:src />" />
</ion:medias>

Ionize Media resize - method "square"

Media development tipsTop of Page

Refresh the pictures size at each page visit

Resize pictures are created one time, when the first user visits the page.

During development, it can be useful to refresh thumbnail at each page reload.

To do that, simply add the attribute refresh="true" to the medias tag.

<ion:medias type="picture" size="200" method="square" refresh="true" >
<img src="<ion:media:src />" />
</ion:medias>

This is not recommended on production website because picture resizing needs server's CPU.