Installera Umbraco-integration (7)

Integrationen till Umbraco möjliggör publicering av bilder och filmer som finns i Mediaflow direkt i Umbracos redigeringsläge. Ett fantastiskt sätt för webbredaktörer att alltid ha tillgång till filer som är GDPR-säkra, har rätt alt-texter och filmer som är tillgänglighetsanpassade.

Inställningar i Mediaflow

Integrationen till Umbraco kan börja användas så snart den installerats. Men för att filerna ska vara tillgängliga och kunna användas optimalt behöver administratörerna ha förberett inställningarna för dem i Mediaflow först.

Installera integrationen för Umbraco

Länk till Mediaflows integration till Umbraco 7 hittar du här: https://static.mediaflowpro.com/dist/YGHILKSG/UmbracoMFP.zip

1. Integrationen består av två mappar, App_Code och  App_Plugin. Kopiera innehållet i mapparna till motsvarande mapp i din Umbraco-installation. 

2. Öppna filen ~/App_Plugins/MediaflowPro/js/controllers/modal.js. Gå till raden 1205. 

3. Klistra in refreshToken, clientID and clientSecret som du får av oss på Mediaflow. Vad noga med att lägga in dem i rätt ordning och blanda inte ihop dem. 

4. Bygg och kör ditt Umbraco-projekt. 

Lägg till en datatyp

1. Logga in på Umbracos backoffice via adressen  https://localhost:<port>/umbraco.

2. Gå till Developer-sektionen och klicka på de tre punkterna (...) vid mappen Data Types. Klicka sedan på Create.

3. Ge datatypen ett namn. Välj sedan valet MediaflowPro från rullgardinsmenyn Property editor.

4. Klicka sedan på Save. Nu har du definierat en datatyp i Umbraco. 

Lägg till en datatyp till en dokumenttyp

1. Gå till Settings, välj den dokumenttyp där integrationen ska kunna användas. Väljs sedan fliken Generic properties.

2. Klicka på Click here to add new property.

3. Välj ett Namn och uppdatera Alias vid behov. Välj datatypen du skapade i det förra steget, i detta exemplet Mediaflow Picker. Välj den flik som du vill att integrationen ska vara tillgänglig på. Klicka sedan på Save för att spara ändringarna i dokumenttypen.

Arbeta med datatypen

1. Gå till "Settings", välj den mall som motsvarar din dokumenttyp så ser du markeringen av razor view filen.

2. Vi lägger till lite "Markup" för att hämta egenskapen från vår dokumenttyp.

<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. Innan ni har lagt till media kommer det inte visas någonting på sidan.