Embed video, image and audio using the BeEmbedMedia helper

Discussions upon development of frontend websites using BEdita as a content management system
Discussioni sullo sviluppo dei siti frontend che usano BEdita come sistema di gestione dei contenuti

Embed video, image and audio using the BeEmbedMedia helper

Postby alberto pagliarini » 01 Jul 2009, 13:11

UPDATED TO BEdita 3.0 beta2

Introduction
All media objects are managed in the backend CMS application throughout the Multimedia module. Depending on the object nature, we have the following types: Video, Audio, Image and BEFile (i.e. a generic multimedia file).

Creating a new media object is as easy as uploading a file or inserting its URL in a simple form (as an external resource).
As regards the Video type, BEdita already supports some external providers: Youtube, Blip.tv and Vimeo. So by now, if you want to manage videos from these providers, you can add the video by URL.
Only Blip.tv releases the direct link to the flv file (flash video), therefore if you have a custom flv player in your frontend application I suggest using Blip.tv; on the contrary, if you're planning to use the provider's branded player, you can choose whatever you want.

How to
When you have a BEdita object, for example a Gallery, which contains some media objects (you can see them inside the "Multimedia Items" tab in the detail of the Gallery module), there is an easy and useful way to publish them throughout well formed HTML/CSS code: by using the BeEmbedMedia helper. This helper is always included in the backend AppController, as well as in every frontend application by inheritance. So, inserting a video or an image is as easy as using a CakePHP helper.
I am showing you how.

So, let's assume we have a Gallery and its nickname is "my-gallery", inside my frontend web site at http://www.example.com.
It will be automagically published at the following address:

Code: Select all
http://www.example.com/section-nickname/my-gallery


In your view code, you'll have the requested object in the template multidimensional array:
Code: Select all
$section["currentContent"]


The part of the array we are interested in is
Code: Select all
$section["currentContent"]["relations"]["attach"]

which contains a list of all related media objects, i.e. all the media objects which share a "relation" of type "attach" with the "currentContent" (our gallery) inside the "section".


Thumbnails: presentation = thumb
This parameter lets you show the thumbnails of the media objects.
When presentation is not defined the value thumb is assumed as default.

I am assuming you are also using the Smarty template engine (by default in a frontend application) in "views".
So in our "view" code, first we prepare the parameters array by writing the following code:
Code: Select all
{assign_associative var="params" presentation="thumb" width=200 mode="crop"}

or, since thumb is the default value for presentation, the following:
Code: Select all
{assign_associative var="params" width=200 mode="crop"}


Using these parameters we are instructing the helper to show the thumbnails with a width of 200 pixels and the mode crop (for all the options of BeEmbedMedia see the APIdoc or the comments inside the helper's source).
Than we cycle through the array containing all the multimedia objects and call our powerful helper:
Code: Select all
{foreach from=$section.currentContent.relations.attach item="media"}
   {$beEmbedMedia->object($media,$params)}
{/foreach}


If your gallery contains some videos from supported external providers, the thumbnail will be linked directly to the provider's page and it's not resized to 200 pixels.
To solve problems like these, or also adding some other HTML options to the embed code, BeEmbedMedia also supports a third parameter.
As regards our example we complete the code this way:
Code: Select all
{assign_associative var="params" width=200 mode="crop"}
{foreach from=$section.currentContent.relations.attach item="media"}
   {assign_associative var="htmlAttributes" width=200 alt=$media.title}
   {$beEmbedMedia->object($media,$params,$htmlAttributes)}
{/foreach}

As you can see, I also added the "alt" attribute, filling it with objects' titles.


Full size: presentation = full
If you want to embed videos (not their thumbnails) you are going to use the value "full" for the presentation option.
This instructs the helper to embed videos or show images at the original size (for Audio objects this mode is not yet implemented).

As regards our example:
Code: Select all
{assign_associative var="params" presentation="full"}
{foreach from=$section.currentContent.relations.attach item="media"}
   {$beEmbedMedia->object($media,$params)}
{/foreach}

If you want to embed video while showing thumbnails for images (or resized), here is a simple solution ready to use:
Code: Select all
{foreach from=$section.currentContent.relations.attach item="media"}
   {if $media.object_type_id == $conf->objectTypes.video.id}
      {assign_associative var="params" presentation="full"}
   {elseif $media.object_type_id == $conf->objectTypes.image.id}
      {assign_associative var="params" presentation="thumb" width=200 mode="crop"}
   {/if}
   {$beEmbedMedia->object($media,$params)}
{/foreach}



A link to the object: presentation = link
Warning: this option is quite buggy right now, so it's better to use the URLonly option and build the link by yourself (as shown below)
This options will produce a well formatted anchor pointing to the resource itself, with the title of the object inserted between the <a> and </a> tags.

For example:
Code: Select all
{assign_associative var="params" presentation=link}
{foreach from=$section.currentContent.relations.attach item="media"}
   {$beEmbedMedia->object($media,$params)}
{/foreach}



Only the URL, thanks: URLonly = true
Setting URLonly to true will force the helper to return only the URL.

For example, if our objects are all images and we want to manually use the <img> tag:
Code: Select all
{assign_associative var="params" presentation=link URLonly=true}
{foreach from=$section.currentContent.relations.attach item="media"}
   <img src="{$beEmbedMedia->object($media,$params)}">
{/foreach}



These was just an overview of the main features of the BeEmbedMedia helper.
Reply to this post for comments or consult the APIdoc to learn more.
Hope it helps you!!! :)
alberto pagliarini
BEdita Dev Staff
BEdita Dev Staff
 
Posts: 43
Joined: 18 Jun 2009, 20:11

Return to Frontend development

Who is online

Users browsing this forum: No registered users and 1 guest

cron