Installera Optimizely-integration för video (Version 11)

Katalogerna i zip-filen ska läggas in i motsvarande mappar i Episerver-roten (inga filer skrivs över utan alla ska vara nya). De två .cs-filerna som ligger i roten är i "källskodsformat" (istället för en dll). Lägg in dem i projektet. Observera att du behöver ändra namespacet i filen MFPImageEditorDescriptor.cs till ert namespace (heter bara "EPiServerSite1" i filen nu).

Lägg sedan till i module.config i rätt sektion under module:

<dojo>
<paths>
   <add name="mfp" path="Scripts" />
</paths>
  </dojo>

Du behöver lägga till följande två värden under configuration > appSettings i ert konfigurationsfil web.config 

<add key="MFPKey" value="" />
<add key="MFPServerID" value="" />

Övrig installationsinformation

För att ”Infoga bild från MediaflowPro”-knappen i TinyMCE-editorn i Episerver ska vara tillgänglig måste du även ställa in det i standardmallen (eller motsvarande mall som används) i adminläget (för typen XHTML String >= 255). (Gäller den texten för Episerver 10 och tidigare (och tidig version 11) om du inte kör med TinyMCE-modulen (dvs istället använder den tidigare inbyggda TinyMCE-editorn). Normalt sett behövs inga ändringar i mallar eller block i Episerver utan vårt plugin ”hakar på” den befintliga image-propertyn (UIHint.Image) i EPiServer. I övrigt distribueras filerna förinställda på ert Mediaflow-konto, så inga andra kontoinställningar behöver göras.

Värdena på MFP.ServerID och MFP.Key hittar du om du går in under kugghjulet i Mediaflow - administrera - Integration - Episerver. Observera att du måste ange vilka mappar som ska finnas tillgängliga i Episerver via gruppen "Webbredaktörer i Episerver" i fliken "Mapptillgång". Du måste även tända minst ett nerladdnings/publiceringsformat mot gruppen via Administrera > Nerladdningsformat. Notera att ett krav för nätverket är att brandväggen Episervern ligger bakom inte blockerar anrop till följande domäner; mediaflowpro.com och [ServerID].inviewer.se. (T.ex "16.inviewer.se")

Så fungerar integrationen

Webbredaktörerna kommer direkt åt filer och mappar från Mediaflow och kan direkt montera bilder inifrån Episervers gränssnitt, antingen i ”on-page”-redigering, formulär-redigering eller i texteditorn (TinyMCE). Du behöver därmed inte ladda ner filer till din dator först utan integrationen sker direkt mellan Episerver och bildbanken i Mediaflow. Du behöver inte vara separat inloggad i Mediaflow när du arbetar i Episerver, utan inloggning sker automatiskt baserat på Episerver-användaren.

För att inte påverka prestanda och stabilitet kopieras alltid de monterade bilderna över till er webbserver (antingen under ”Page Files” eller under ”Global Files” i Episerver) vilket innebär att er webbsida inte är beroende av Mediaflow för att fungera. Integrationen påverkar inte prestandan på den vanliga sidvisningen, och du behöver inte anpassa sidor eller mallar i Episerver för att välja bilder från Mediaflow. Om du sedan väljer att sluta använda Mediaflow för Episerver behöver du inte göra några ändringar förutom att ta bort integrationen. Allt fortsätter då att fungera på sajten, och alla monterade bilder ligger kvar i Episerver.

Mediaflow stöder Episerver 7.1 och framåt (både som MVC or Web Forms). Pluginet distribueras som en zip-fil med innehållet i underkataloger som matchar katalogerna enligt en Episerver standardinstallation. Observera att pluginet i dagsläget inte finns tillgängligt som ett NuGet-paket. I roten på den zip-filen ligger två C#-filer som källkod (dvs inte som en kompilerad dll) som ska läggas in i projektet och kompileras (är även möjligt att lägga i App_code-katalogen i webbroten för automatisk kompilering).

Alt-texter och Episerver

På grund av begränsningar i hur integrationen med Episerver är uppbyggd, blir implementering av alt-text-funktionen något du får anpassa lokalt för att det ska synas. Vi kan inte i vår integration avgöra vilket “fält” ni använder i era mallar och block för alt-texten. Detta innebär att ni själva måste koppla ihop det fält som ni använder med den informationen som kommer ifrån Mediaflow.

Du skapar kopplingen till alt-textfältet genom att ändra i filen prepareimage75.aspx som ligger i mappen ClientResources\Scripts\mfpinsertmedia. I den filen (omkring rad 127) tar du bort kommentaren och lägger in vilket fält som ni använder för alt-text och kopplar det till variabeln sDescription som där innehåller alt-texten från MediaflowPro. Om ni till exempel använder ett fält som heter "AltText" så anger du file1.Name = sFilename; file1.AltText = sDescription; Där finns också möjlighet att lägga till ett fält för fotograf bland annat, om ni använder det i era mallar (se kommentaren i filen)

Inställningar i Mediaflow

Integrationen till Optimizelykan 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 videofiler

Mediaflows videoplugin är en standard Nuget installation

Steg 1: Gå till följande adress och ladda ner filerna (två stycken)
https://nuget.episerver.com/?q=mediaflow

Här finns två nuget-paket. Om man inte har TinyMCE så finns den med eftersom båda två behövs.

Mediaflow.Video.Plugin = för infogning av video i block och sidor
Mediaflow.Video.TinyMCEplugin = för infogning av video i löptext (kräver att man har TinyMCE)

Steg 2: Installera nuget-paketen

Steg 3: Fyll i MFPKey

Fyll i fältet MFPKey korrekt i web.config-filen under configuration > appSettings. Raden ska ha lagts in automatiskt, men värdet måste anges manuellt.

<add key="MFPKey" value="NYCKEL FRÅN MEDIAFLOW" />

Steg 4: Lägg in relevant kod för infogning av video i block

Nuget-paketet innehåller inte något färdigt block, utan två properties som ni enkelt kan lägga in i egna block och sidor. Det finns två typer av block att använda, ett vanligt "Mediaflow Video"-block som ger en vanlig video med Mediaflow spelaren och ett "Mediaflow Background Video"-block som ger en HTML-spelare som är mutad och loopas, som lämpar sig bra att användas som designelement på sidan.

Använd följande kod för att lägga till videospelaren som en property:

using Mediaflow.Video.Plugin;
...

  [BackingType(typeof(PropertyMediaflowVideo))]
  [UIHint("MFVideo")]
  public virtual MediaflowVideo video1 { get; set; }

using Mediaflow.Video.Plugin;
...

[BackingType(typeof(PropertyMediaflowBackgroundVideo))]
[UIHint("MFBackgroundVideo")]
public virtual MediaflowBackgroundVideo video2 { get; set; }

@using Mediaflow.Video.Plugin
@model MediaflowBackgroundVideo

<div>
    @Html.Raw(Model.EmbedCode)
</div>

Eftersom att HTML-spelaren är ett bakgrundselement så behöver ni själva ordna med custom HTML och CSS för presentationen av spelaren. Efter det kan ni skriva ut den på sidan med något som liknar detta: 

@Html.PropertyFor(x => x.CurrentPage.Video, new { CssClass = "row equal-height",
tag = Global.ContentAreaTags.FullWidth })

Steg 5: Infoga video i Brödtext 

När nuget paketen har installerats och MFPKey skrivits in så innebär detta att man nu kan klicka på "infoga video från Mediaflow" knappen när man är i brödtext blocket.

Trafikinformation