Install the Umbraco-integrationen (7) – Mediaflow Knowledge Base

The integration with Umbraco enables the publication of images and videos from Mediaflow directly in Umbraco's editing mode. It's an excellent way for web editors to always have access to files that are GDPR-compliant, have the correct alt texts, and videos that are accessibility-adapted.

Settings in Mediaflow

The integration with Umbraco can be used as soon as it's installed. However, for the files to be accessible and used optimally, administrators need to have prepared the settings for them in Mediaflow first.

Installing the integration for Umbraco

Link to Mediaflow's integration to Umbraco 7 can be found here: https://static.mediaflowpro.com/dist/YGHILKSG/UmbracoMFP.zip

1. The integration consists of two folders App_Code and App_Plugin. Copy the contents of the folders to the corresponding folder in your Umbraco installation.

2. Open the file ~ / App_Plugins / MediaflowPro / js / controllers / modal.js. Go to line 1205.

3. Paste refreshToken, clientID and clientSecret that you get from us on Mediaflow. Be sure to put them in the correct order and do not mix them.

4. Build and run your Umbraco project.

Note that if you start the Umbraco solution without adding refreshToken, clientID and clientSecret the integration in Umbraco's temp files will be saved. This means that if you add them afterwards the integration may not work. Then you may need to go into Appdata and clear the temp directory and cached files and run the project again.

Add a data type

1. Log in to Umbraco's back office via the address https: // localhost: <port> / umbraco.

2. Go to the Developer section and click on the three dots (...) next to the Data Types folder. Then click Create.

3. Give the data type a name. Then select the MediaflowPro option from the Property editor drop-down menu.

4. Then click Save. You have now defined a data type in Umbraco.

Add a data type to a document type

1. Go to Settings, select the document type where the integration can be used. Then select the Generic properties tab.

2. Press Click here to add new property.

3. Select a Name and update Alias as needed. Select the type of data you created in the previous step, in this example Mediaflow Picker. Select the tab on which you want the integration to be available. Then click Save to maintain the document type changes.

Work with the data type

1. Go to the "Settings" section, select the template that corresponds to your document type and you will see the selection of the razor view file.

2. Add some "Markup".

<div class="row">
    <div class="12u">
        @if(string.IsNullOrWhiteSpace(CurrentPage.MediaflowProperty))
        {
            <p>No media selected</p>
        } else {
            <img style="width:40%" src="@CurrentPage.MediaflowProperty" />
        }
    </div>
</div>

3. Until we select a media, nothing will appear on the page.