Hoppa till huvudinnehållet

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

Uppdaterad

Integrationen gör det möjligt för webbredaktörer att direkt komma åt filer och mappar från Mediaflow i Optimizely 11-gränssnittet och bädda in bilder antingen i "on-page"-redigering, i block eller i textredigeraren (TinyMCE).

Integrationen ansluter direkt mellan Optimizely 11-webbservern och Mediaflow-servrarna, vilket eliminerar behovet av att ladda ner filer lokalt först.

För att säkerställa prestanda och stabilitet kopieras monterade bilder alltid till din webbserver (antingen under "Page Files" eller "Global Files" i Optimizely 11). Detta innebär att din webbplats inte är beroende av Mediaflow och att integrationen inte påverkar prestandan för vanliga sidvisningar.

Alla monterade bilder finns kvar i Optimizely och inga ändringar på webbplatsen krävs om du avinstallerar integrationen.

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 bilder

Steg 1: Hämta NuGet-paket

Mediaflows integration är en standard NuGet-installation. Installera med hjälp av Visual Studio eller ladda ner paketen. Länk till integrationen finns här:

https://nuget.optimizely.com/?q=mediaflow

Det finns två NuGet-paket tillgängliga, huvudpaketet och ett paket som bara behövs om du använder TinyMCE.

  • Mediaflow.Image.Plugin: för att infoga bilder i block och sidor.

  • Mediaflow.Image.TinyMCEPlugin: för att infoga bilder inline i redigeraren för rik text (kräver TinyMCE).

Note:

Installationsinformation för äldre versioner finns senare i den här artikeln.

Installera NuGet-paketen

Använd Optimizelys standardinstallationsprocess för NuGet.

Steg 3: Anslut Mediaflow och Optimizely

Följande två värden läggs in under configuration > appSettings i din konfigurationsfil web.config

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

<add key="MFPServerID" value="" />
Värdena för MFPServerID och MFPKey hittar du i Mediaflow i integrationsinställningarna för Optimizely-integrationen.

https://app.mediaflow.com/settings/integrations

Du måste ha rätt behörigheter för att kunna se integrationsinställningarna. Om de inte är tillgängliga kan du gå in i superadmin-läge eller kontakta en Mediaflow-administratör i din organisation.

Steg 4: Konfigurera Optimizely-webbplatsen

Normalt sett behövs inga ändringar i mallar eller block i Optimizely 11; vårt plugin "hakar på" det befintliga bildegenskapsgränssnittet (UIHint.Image) i Optimizely 11. Dessutom är filerna förkonfigurerade på ditt Mediaflow-konto, så inga andra kontoinställningar behöver göras.

Konfigurera TinyMCE

För att göra knappen "Infoga bild från Mediaflow" i TinyMCE-redigeraren i Optimizely tillgänglig kan du också behöva ställa in den i standardmallen (eller motsvarande mall som används) i adminläget (för typ XHTML String >= 255).

Detta behövdes särskilt i Optimizely 10 och tidigare (och tidig version 11) om du inte använde TinyMCE-modulen (dvs. använde den tidigare inbyggda TinyMCE-redigeraren).

Skapar man upp en custom toolbar i Optimizely 11 och sätter en egen ordning på sina tools behöver ni lägga till btnMediaflowVideo och btnMediaflowVideo i toolbar-objektet.

Exempel på dylik kod:

config.Default()
.AddPlugin("media wordcount anchor code")
.Toolbar(@"formatselect
| bold italic
| epi-link anchor image epi-image-editor epi-personalized-content
| btnMediaflowVideo btnMediaflowImage
| numlist bullist outdent indent
| searchreplace fullscreen removeformat",
"help | code")
.AddSetting("image_caption", true)
.AddSetting("image_advtab", true);"
 

Steg 5: Ställa in alt-text (valfritt)

Som ett alternativ kan du lägga till alt-texter i Optimizely 11 från Mediaflow. På grund av hur Optimizely fungerar måste du göra en anpassad implementering av alt-text-funktionen för varje webbplats, eftersom vår integration inte kan avgöra vilket fält du använder i dina mallar och block för alt-text. För att säkerställa att alt-texten placeras i rätt fält behöver du koppla ihop det fält du använder med den information som skickas från Mediaflow.

Modifiera filen prepareimage75.aspx

  • Gå till \modules_protected\Mediaflow.Image.Plugin\

  • Packa upp filen Mediaflow.Image.Plugin.zip

  • En ny katalog med namnet mfimage skapas. Öppna katalogen och inuti finns det en fil som heter prepareimage75.aspx. Sökvägen ska vara: modules\_protected\Mediaflow.Image.Plugin\mfimage\prepareimage75.aspx

  • Öppna och redigera filen. Runt rad 127 infogar du det fält du använder för alt-text. Detta kopplar det till variabeln sDescription. Observera att variabeln av gamla skäl heter sDescription, även om den innehåller alt-texten från Mediaflow.

Exempel: om du använder ett fält med namnet "AltText" anger du:

file1.Name = sFilename; file1.AltText = sDescription;
 

Det finns även möjlighet att koppla fält för fotograf, om du använder det i dina mallar. Använd samma. Använd samma procedur som ovan och använd variabelnamnet sPhoto.

Observera!

Dessa inställningar kan komma att skrivas över om en ny version av integrationen installeras. Kontrollera att din inställning för alt-text fortfarande är på plats efter uppdatering till en ny version.

Ytterligare konfigurationsalternativ

Det finns också ett antal andra parametrar som kan konfigureras. Detta görs i konfigurationsfilen web.config under configuration > appSettings.

MFPDescriptionAsAlt

Styr om beskrivningsfältet i Mediaflow kan hämtas som alt-text i Optimizely.

Möjliga värden

  • true Om det finns text i alt-textfältet i Mediaflow kommer denna text att infogas. Om alt-text saknas kommer texten från beskrivningsfältet att användas istället (standardalternativ).

  • false Alt-texten hämtas endast från fältet alt-text. Om det är tomt hämtas inga data alls från Mediaflow. Använd detta om beskrivningsfältet i Mediaflow aldrig ska importeras till Optimizely.

Exampel på detta:

<add key="MFPDescriptionAsAlt" value="false" />
 

EmptyAlt

Styr om alt-textfältet måste fyllas i innan användaren kan montera en bild.

Möjliga värden

  • true Alt-textfältet kan vara tomt, vilket innebär att det inte är obligatoriskt att lägga till en alt-text (standardalternativ).

  • false Fältet alt-text får inte vara tomt, vilket innebär att det är obligatoriskt att lägga till en alt-text.

Exampel på detta:

<add key="MFPAllowEmptyAlt" value="false" />
 

MFPSaveLocation

Styr var bilderna ska sparas i Optimizely-bildarkivet. Observera att bilderna alltid kopieras till webbplatsens webbserver.

Möjliga värden

  • any Användaren kan välja om bilden ska sparas under "Page files" eller "Global files" (standardalternativ).

  • pagefiles Filer sparas alltid under "Sidfiler" / "Bilder på den här sidan".

  • globalfiles Filer sparas alltid i mappen "MediaflowPro" under "Globala filer".

Exampel på detta:

<add key="MFPSaveLocation" value="pagefiles" />
 

MFPResponsiveInsert

Styr om bilder ska monteras responsivt i den löpande texten (TinyMCE).

Möjliga värden

  • true Bilderna monteras responsivt, vilket innebär att de krymper i storlek om det behövs (standardalternativ).

  • false Bilderna monteras med en fast storlek.

Exampel på detta:

<add key="MFPResponsiveInsert" value="false" />
 

Segmentera innehåll beroende på olika användargrupper

Som standard har alla användare i Optimizely 11 tillgång till samma delade innehåll när de monterar bilder från Mediaflow på sin webbplats. Om du har flera grupper av webbredaktörer som arbetar med olika delar av webbplatsen kan det finnas ett behov av att segmentera innehållet. Det innebär att användarna får tillgång till olika innehåll beroende på vilken grupp de tillhör. Detta kan åstadkommas med hjälp av funktionen Virtual Role i Optimizely.

Observera!

För att göra detta krävs en unik autentiseringsnyckel i Mediaflow för varje grupp. Observera att detta kan vara förenat med en kostnad beroende på ert avtal.


Det första steget är att skapa en Virtual Role för varje grupp som ska se unikt innehåll. Dessa måste sedan kopplas till en autentiseringsnyckel i filen web.config under configuration > appSettings (på liknande sätt som vid en standardinstallation med endast en nyckel).

Det är också möjligt att ange ett wildcard där alla användare som inte tillhör en grupp/Virtual Role ser samma innehåll.

Detta måste inkluderas i web.config:

  • MFPKey Bör ha värdet "virtual"

  • MFPServerID ID för Mediaflow-servern, som du hittar på integrationsfliken i Mediaflow.

  • MFPVirtualRoleMapping Ska ha värdet för varje Virtual Role och den unika nyckel som ska associeras med gruppen. Separera med semikolon. För jokertecken, använd en asterisk (*) istället för gruppens/den virtuella rollens namn.

Exampel på detta:

<configuration>
  <appSettings>
    <add key="MFPKey" value="virtual" />
    <add key="MFPServerID" value="16" />
    <add key="MFPVirtualRoleMapping" value="CMSEditors=ZZXXCCVVBB;StandardUsers=KKJJHHGGFF;*=QQWWEERRTT"/>
  </appSettings>
 </configuration>
 

Äldre versioner

Integrationen med Optimizely finns också i äldre versioner från och med version 7.1 (både som MVC eller Web Forms). Dessa distribueras som .zip-filer och har en annan installationsprocedur än de som distribueras via Nuget.

Vänligen kontakta Mediaflows support för att få tillgång till äldre integrationer.

Observera!

Observera att äldre integrationer varken stöds eller uppdateras med de funktioner och säkerhetsuppdateringar som finns i den senaste versionen.

Installationsinformation för äldre integrationer

De äldre insticksprogrammen distribueras som en zip-fil med innehåll i underkataloger som matchar katalogerna i en standardinstallation av Optimizely. I roten av zip-filen finns det två C#-filer som källkod (inte som en kompilerad dll) som ska läggas till i projektet och kompileras (det går också bra att placera dem i App_code-katalogen i webbroten för automatisk kompilering).

Katalogerna i zip-filen ska placeras i motsvarande mappar i Optimizely-roten (inga filer ska skrivas över, utan alla ska vara nya). Observera att du måste ändra namnrymden i filen MFPImageEditorDescriptor.cs till din namnrymd (för närvarande heter den "EPiServerSite1" i filen).

Lägg sedan till följande i module.config i rätt avsnitt under modulen:

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

Lägga till alt-texter i äldre versioner

På grund av hur Optimizely fungerar måste du göra en anpassad implementering av alt-text-funktionen för varje webbplats, eftersom vår integration inte kan avgöra vilket fält du använder i dina mallar och block för alt-text. Därför måste du länka det fält du använder till den information som kommer från Mediaflow.

Modifiera filen prepareimage75.aspx

  • Gå till ClientResources\Scripts\mfpinsertmedia och öppna filen prepareimage75.aspx.

  • Runt rad 127 infogar du det fält du använder för alt-text. Detta kopplar det till variabeln sDescription. Observera att variabeln av gamla anledningar heter sDescription, även om den innehåller alt-texten från Mediaflow.

Example på detta: om du använder ett fält med namnet "AltText" anger du:

file1.Name = sFilename; file1.AltText = sDescription;
Det finns även möjlighet att koppla fält för fotograf, om du använder det i dina mallar. Använd samma procedur som ovan och använd variabelnamnet sPhoto.

Relaterade artiklar