Kentico CMS 7.0 Developer's Guide

Using the Media selection control

Using the Media selection control

Previous topic Next topic Mail us feedback on this topic!  

Using the Media selection control

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

The Media selection form control can be used to enable users to select files on the Form tab of a document. It allows to use any file from any source (from Document attachments, Content and Media libraries) in your documents. The following example demonstrates how you can achieve this:


1. Navigate to Site Manager -> Development -> Document types and create a custom document type with 3 fields, which will enable content editors to select images, videos and documents. Name the document type Test document type and the three fields ItemPhoto, ItemVideo and ItemDocument. Make sure that all three fields use the Media selection Form control:




2. In the Document type properties user interface, switch to the Transformations tab and specify the new transformation as follows:


<%@ Register Src="~/CMSInlineControls/MediaControl.ascx" TagName="Media" TagPrefix="cms" %>


Name: <%# Eval ("ItemName") %><br />

Photo: <cms:Media id="MediaElement1" runat="server" URL='<%# Eval<string>("ItemPhoto")%>' /><br />

Video: <cms:Media id="MediaElement2" runat="server" URL='<%# Eval<string>("ItemVideo")%>' AVControls="true" /><br />

Document: <a href="<%# Eval("ItemDocument")%>"target="_blank">Show me</a><br />

Description: <%# Eval ("ItemDescription")%>




3. Now go to CMS Desk -> Content, create a new document of the Test document type type and specify its data on the Form tab:




4. Finally, switch to the Live site mode to see the results. You will need to use some of the viewers (e.g. the Repeater web part) to display data of your new document using your defined transformation:




As you can see, the Media selection control is able to identify the type of content from its URL property automatically. It is recognized according to the following URL parameters:


Width - the width of the image or media player.

Height - the height of the image or media player.

Ext - the extension of the file (i.e. the type of media).


These parameters are automatically attached to the selected file URL when selecting the media using the Media selection field: