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 Artikel 1 – Installera och konfigurera Optimizely-integrationen.

Version 1.2.2 introducerar 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.

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

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. 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 CmsAdmins-användare under CMS → Admin → Mediaflow (/mediaflow/settings). 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.

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 något av följande:

• En matchande rad i virtuell rollmappning, eller
• Medlemskap i Mediaflow, Administrators, WebAdmins eller CmsAdmins (för reservnyckel-beteende), eller
• En konfigurerad global Key i inställningarna.

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.