Installera Optimizely-integrationen (Version 12)

Installationen sker via nuget. Optimizely har sin egna nuget feed som behövs läggas till för att kunna hitta pluginet. Instruktioner för hur man gör finns här https://nuget.optimizely.com/feed/. När feeden är tillagd kan man söka efter pluginet på Mediaflow.Optimizely. För att se mer information och senaste version kan man även besöka Optimizelys sida för pluginet här: https://nuget.optimizely.com/package/?id=Mediaflow.Optimizely.

Konfiguration

All konfiguration av integrationen sker i appsettings.json och Startup.cs. Där behöver ni lägga till tre sektioner för att integrationen ska fungera korrekt. Först behöver man i appsettings.json lägga till en Mediaflow sektion. I sektionen måste man ange sin nyckel. Det finns även några valbara alternativ som kan användas för att anpassa integrationen till vad som passar er bäst.

"Mediaflow": {
  "Key": "[din-nyckel]",
  "LimitEmbedType": "javascript",
 "ForceAltText": true,
 "SaveLocation": "page",
}

"EPiServer": {
    "CmsUI": {
        "ProtectedModule": {
            "Items": [
                {
                    "Name": "Mediaflow.Optimizely"
                }
            ]
        }
    }
}

Vill ni ha stöd för Mediaflow i TinyMCE behöver ni lägga till konfiguration till Startup.cs.

services.Configure<TinyMceConfiguration>(config => {
  config.Default().AddEpiserverSupport()
                  .AddExternalPlugin("mfinsertmedia", "/EPiServer/Mediaflow.Optimizely/Scripts/mfSelector/tinymce.selector.js")
                  .AppendToolbar("mfinsertmedia");
});

Efter det är tillagt ska en Mediaflow-knapp ha lagts till i din toolbar.

För att använda Mediaflow-väljaren som en egen property kan den läggas till på den aktuella modellen som "MediaflowObject" likt exemplet nedan:

using Mediaflow.Optimizely.Models;

[Display(GroupName = SystemTabNames.Content)]
public virtual MediaflowObject MediaflowPicker { get; set; }

Från MediaflowPicker kan man sen läsa ut om vald media är en bild eller video, samt metadata kring bredd, höjd, id i Mediaflow,  Alt-text osv.

Nedan ser du ett enkelt exempel på hur en bild eller video kan skrivas baserat på typ.

@if (Model.CurrentPage.MediaflowPicker.Type == "image") {
  <img src="@Model.CurrentPage.MediaflowPicker.FileUrl" alt="@Model.CurrentPage.MediaflowPicker.AltText" />
} else {
  @Html.Raw(Model.CurrentPage.MediaflowPicker.EmbedCode)
}

Använda MediaflowPicker i listor

Optimizely rekommenderar att lägga komplexa properties i ett block som sen läggs i en ContentArea. Detta är även det vi rekommenderar och kan uppnås genom koden i exemplet nedan:

[AllowedTypes(new[] { typeof(MediaflowBlock) })]
public virtual ContentArea MFBlockList { get; set; }

public class MediaflowBlock : SiteBlockData
{
    [Display(
        GroupName = SystemTabNames.Content,
        Order = 1
        )]
    public virtual MediaflowObject Media { get; set; }
}

Rättigheter

Mediaflow är inte öppen för alla grupper i Optimizely för att man ska kunna begränsa användare så att de inte kommer åt Mediaflow. De grupper som är tillåtna är CmsAdmins, WebAdmins, Administrators och gruppen "Mediaflow" som kan läggas till för att tilldela medlemmar tillgång till Mediaflow.

Rollmappning

Vill man begränsa vilka mappar en viss roll i Optimizely kan se, kan detta göras med hjälp av rollmappning. Detta kan användas av kunder som har flera olika redaktörsgrupper  i Optimizely och som ska ha tillgång till olika sidor på sin webbplats. På detta sätt kan man ge tillgång till olika mappar med innehåll för olika grupper. 

I appsettings.json så kopplar man en roll i Optimizely till en egen nyckel som i sin tur är kopplad till en grupp i Mediaflow där tillgång till mappar kan begränsas. Denna uppsättning kräver ytterligare integrationsnycklar i Mediaflow.

"Mediaflow" : {
  "VirtualRoleMapping" : [
    {
      "VirtualRole": "CmsAdmins",
      "ServerKey": "ZZXXCCVVBB"
    },
    {
      "VirtualRole": "CmsEditors",
      "ServerKey": "AABBCCDDEE"
    },
    {
      "VirtualRole": "*",
      "ServerKey": "QQWWEERRTT"
    }
  ]
}