Implementera innehåll i Optimizely (version 12)

Den här artikeln riktar sig till dig som bygger webbplatsen i Optimizely 12 – du sätter upp innehållstyper, mallar och konfigurerar hur Mediaflow-integrationen beter sig. Den förutsätter att add-onet redan är installerat och registrerat enligt Installera Optimizely-integrationen (version 12).

Från version 1.2 finns dedikerade property-typer för bild, video och SVG, utöver den kombinerade MediaflowObject-propertyn som används på många webbplatser.

Mediaflows property-typer

Integrationen erbjuder flera sätt att lägga in Mediaflow-media på en innehållstyp. Välj typ utifrån vad redaktören ska kunna välja:

Lägg till MediaflowObject som egen property

Lägg till Mediaflow-väljaren som en egen property på modellen som MediaflowObject:

using Mediaflow.Optimizely.Models;

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

Från MediaflowPicker kan du läsa ut information om vald media – om det är bild, video eller SVG – samt metadata som bredd, höjd, Mediaflow-id, alt-text, beskrivning och fotograf.

Rendera media baserat på typ

Enkelt exempel på hur du visar media beroende på typ:

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

Propertyn Type kan ha värdena image, video, vector (SVG) eller audio. Bild och SVG renderas som <img>; video bäddas in via EmbedCode.

Använda MediaflowPicker i listor

Optimizely rekommenderar att lägga komplexa properties i ett block som sedan placeras i en ContentArea. Det rekommenderar även Mediaflow:

[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; }
}

Mediaflow i TinyMCE och SVG-stöd

Vill du ha stöd för Mediaflow i textredigeraren (TinyMCE), lägg till konfiguration i Startup.cs:

services.Configure<TinyMceConfiguration>(config =>
{
    config.Default()
          .AddEpiserverSupport()
          .AddMediaflowTinyMcePlugin();
});

Efter detta visas en Mediaflow-knapp i TinyMCE-verktygsfältet. Pluginet konfigurerar även TinyMCE att bevara SVG-markup när redaktörer infogar vektorgrafik. Filväljaren i TinyMCE visar alltid bild, video och SVG – filtypsfiltret påverkar inte TinyMCE.

Obs: Video bäddas alltid in som iframe i TinyMCE-redigeraren, eftersom TinyMCE inte stödjer inline-JavaScript.

Metadata på bilder i brödtext

Från version 1.2.5 hämtar bilder som infogats via TinyMCE sin alt-text, beskrivning och fotograf från mediaobjektet när sidan renderas. Ändringar som görs senare (via Go to media eller Edit metadata på bilden) syns då utan att bilden behöver infogas igen. Det sköts av den paketerade visningsmallen DisplayTemplates/XhtmlString.cshtml, som är aktiv när AddMediaflowViews() anropas efter AddCms().

Har webbplatsen en egen XhtmlString.cshtml används den i stället. Behåll funktionen genom att rendera via Mediaflows tillägg:

@using Mediaflow.Optimizely.Utility
@model EPiServer.Core.XhtmlString
@{ Html.RenderXhtmlString(Model.WithMediaflowMetadata()); }

Innehållet som sparas i databasen ändras inte. En alt-text som redaktören ändrat för en enskild användning (i TinyMCE:s egen bilddialog) behålls; beskrivning och fotograf följer alltid mediaobjektet.

Konfigurationsval som påverkar bygget

Följande inställningar (i appsettings.json, se Artikel 1) styr hur media beter sig och bör beslutas tillsammans med dig som bygger webbplatsen.

LimitEmbedType

Styr hur video bäddas in från Mediaflow. Video kan bäddas in antingen som en standard-iframe eller som inline-JavaScript. Anges parametern visas endast det valda alternativet för användaren; anges ingen parameter får användaren välja själv. JavaScript rekommenderas eftersom det har bäst kompatibilitet med Mediaflows tillgänglighetsfunktioner.

Observera att video alltid bäddas in som iframe i TinyMCE.

SaveLocation

Styr var bilder sparas i Optimizelys mediasektion (page = sidans egen mediamapp, valfri sträng = global namngiven mapp, tom = global mapp "Mediaflow"). Bilder kopieras alltid till webbservern oavsett val. Påverkar mappstrukturen redaktörer ser – samordna gärna med innehållsmodellen.

ForceAltText

När true måste alt-text anges innan en bild kan monteras (kan inte vara tomt). Bra för tillgänglighet; kan sakta ner redaktörer som infogar många bilder.

FileTypeFilter och AllowedMediaTypes

FileTypeFilter är en kommaseparerad lista med filändelser som skickas till Mediaflow-väljaren (t.ex. jpg,png,gif) och styr vad redaktören kan se i MediaflowObject-properties. Filtret gäller inte TinyMCE eller de dedikerade bild-, video- och SVG-propertyerna. AllowedMediaTypes begränsar vilka Optimizely-medietyper uppladdningar kan skapa, via fullständiga typnamn, t.ex. Mediaflow.Optimizely.Models.Media.MediaflowImageMedia.

Runtime-inställningar i admin-UI

En del av konfigurationen kan ändras i körläge av en administratör (CmsAdmins, WebAdmins eller Administrators – även via Opti ID) under CMS → Admin → Mediaflow (/mediaflow/settings). Menyvalet visas bara för användare med administratörsbehörighet. Värden som sparas här lagras i Optimizelys databas och åsidosätter standardvärdena från appsettings.json för den miljön. På DXP har varje miljö sin egen databas – konfigurera varje miljö separat.

Obligatorisk alt-text

Aktivera Obligatorisk alt-text för bilder [Mandatory alt text for images] för att kräva att redaktörer anger alt-text i väljaren innan bilder infogas. Gäller flöden som stödjer alt-text.

Global filtypsfilter

Globalt filtypsfilter [Global filetype filter] gäller MediaflowObject-properties (det kombinerade fältet). Ange kommaseparerade filändelser, t.ex. jpg,jpeg,png,gif,webp. Är fältet tomt används add-onets standardlista. Dedikerade bild-, video- och SVG-properties tillämpar fortfarande sina egna typer. TinyMCE påverkas inte av filtret.

Virtuell rollmappning

Mappa Optimizely-virtuella roller till Mediaflow-refresh tokens (serverkeys). Styr vilket Mediaflow-bibliotek/behörighet varje redaktörsgrupp ser.

Använd Add mapping för att lägga till rader. Up/Down ändrar prioritet – första matchande roll vinner. Placera specifika roller ovanför jokertecknet *.

Säkerhet: Behandla serverkeys som hemligheter. Föredra att konfigurera nycklar i serverkonfiguration eller DXP App Settings framför att klistra in dem i skärmdumpar eller delade dokument.

Spara och återställ

Klicka Save för att tillämpa ändringar. För att kasta överstyrningar och läsa om värden från appsettings.json, öppna /mediaflow/settings/reset. Detta rensar databasöverstyrningarna för dessa inställningar.

Behörighet att använda Mediaflow i CMS

Redaktörer behöver vara inloggade i CMS och ha något av följande:

• En matchande rad i virtuell rollmappning, eller
• En konfigurerad reservnyckel (Key) i kombination med medlemskap i CmsEditors, CmsAdmins, WebEditors, WebAdmins, Administrators eller Mediaflow.

Med Opti ID: använd rollnamnen CmsEditors och CmsAdmins i rollmappningen. Se installationsartikeln för Opti ID-uppsättning.

Användningsrapportering

Integrationen kan rapportera var Mediaflow-tillgångar används (sidkontext, URL:er, användare) tillbaka till Mediaflow för analys. Detta sker automatiskt när redaktörer infogar eller använder media. 

Om er organisation har krav på databehandling, inkludera Mediaflow-användning i er integritets- eller DAM-dokumentation.