Infoga bild och video i Optimizely (version 13)

Med integrationen till Optimizely kan ni publicera era bilder, videor och SVG-filer från Mediaflow direkt på er webbplats eller intranät. Ett smidigt sätt för redaktörer att alltid ha tillgång till filer som är GDPR-säkra, har rätt alt-texter och filmer som är tillgänglighetsanpassade. Som Optimizely-användare behöver du inte ladda ner filer till din dator först, och behöver därför inte heller en egen inloggning i Mediaflow. (Du kan givetvis ha en Mediaflow-inloggning utifrån andra behov.)

Kom igång

Du kan börja använda integrationen så snart den installerats i Optimizely. För att filerna ska kunna väljas och användas optimalt behöver inställningarna i Mediaflow vara förberedda först.

Bra att veta

För maximal prestanda och stabilitet kopieras de monterade bilderna fysiskt över till Optimizelys server. Det innebär att er webbplats inte är beroende av Mediaflow för att fungera, och integrationen påverkar inte prestandan på den.

Det här gör integrationen

Mediaflow är organisationens plattform för digitala filer (DAM). Integrationen låter dig bläddra i Mediaflow och infoga bilder, video och SVG direkt till våra egenskaper när du redigerar sidor och block.

• När du infogar en bild kopieras filen till Optimizelys mediabibliotek på webbservern (under sidfiler eller en global mapp, beroende på webbplatsens inställningar).
• Video lagras vanligtvis som inbäddningskod från Mediaflow.
• SVG-filer laddas upp i CMS:et på samma sätt som bilder.

Egenskaper kontra Property

Som redaktör eller administratör i Optimizely kanske egenskaper gå under benämningen property. Här i texten fortsätter vi använda det svenska namnet, egenskaper.

Öppna Mediaflow-väljaren på en egenskap

På en sida eller ett block med en Mediaflow-egenskap ser du antingen knappen Lägg till media [Add media] (när egenskapen är tom) eller en tumnagel (när media redan är vald).

1. Öppna sidan eller blocket i redigeringsläge.
2. Hitta Mediaflow-egenskapen (t.ex. Mediaflow Image, Mediaflow Image, SVG or video eller ett TinyMCE-fält).
3. Klicka på Lägg till media [Insert media], eller klicka på tumnageln för att öppna väljaren igen.

Bläddra och välj filer i Mediaflow

Klicka på texten Lägg till media [Insert media] för att lägga till media, så öppnas Mediaflows filväljare.

Här kan du navigera mellan mappar som en administratör valt att visa i Optimizelyintegrationen, eller söka efter en fil.

När du hittat bilden eller videon du vill använda klickar du på filen och sedan på Använda denna fil [Use this file].

Beroende på egenskapen kan du bara se vissa filtyper (t.ex. enbart bilder på en bild-egenskap, eller enbart SVG på en SVG-egenskap).

Infoga en bild

På en bild-egenskap väljer du en bildfil (JPG, PNG, WebP osv.). Du kan sedan välja vilket nedladdningsformat du vill använda dig av och ange en alt-text. Bilden laddas upp till Optimizely och visas som en tumnagel.

När bilden är infogad i Optimizely ser du filnamnet och du har möjlighet att byta ut filen till en annan från Mediaflow genom att välja Välj media från Mediaflow [Insert media].

Du kan också klicka på Redigera metadata [Edit metadata], och ändra metadatan som hör till bilden.

Infoga video

På en video-egenskap väljer du en videofil i Mediaflow. Du kan välja starttid i videon och inbäddningstyp. Integrationen lagrar inbäddningskod och visar en förhandsvisning på egenskapen – ingen videofil lagras i CMS:ets mediabibliotek på samma sätt som bilder.

Om din webbplats tillåter båda inbäddningstyperna kan du få välja mellan JavaScript och iframe. 

I textredigeraren (TinyMCE) infogas video alltid som en iframe.

Infoga SVG

På en SVG-egenskap (eller en kombinerad egenskap som tillåter vektorgrafik) väljer du en SVG-fil. Filen laddas upp och saneras för användning på webbplatsen.

Om en SVG-fil är ogiltig kan uppladdningen misslyckas med ett felmeddelande. Prova en annan fil eller kontakta din administratör.

Använd Mediaflow i textredigeraren (TinyMCE)

När TinyMCE är konfigurerat för din innehållstyp visas knappen Mediaflow i verktygsfältet.

1. Placera musen där du vill lägga till media.
2. Klicka på knappen Mediaflow.
3. Välj en fil i filväljaren. I TinyMCE kan du välja bilder, video och SVG.
4. Bilden eller videon infogas i brödtextfältet.

Redigera metadata på en bild i textredigeraren

Klicka på en Mediaflow-bild i brödtexten och välj Redigera metadata [Edit metadata] i bildens verktygsfält, eller högerklicka på bilden. Där ändrar du alt-text, beskrivning och fotograf. Är obligatorisk alt-text aktiverad måste alt-texten fyllas i.

Ändrar du metadata på mediaobjektet via Go to media uppdateras bilden på den publicerade sidan automatiskt – du behöver inte ta bort och infoga den igen.

Ändra, redigera eller ta bort media

När en egenskap redan har media klickar du på menyn ⋯ (hamburgaren) på tumnageln.

Redigera metadata (alt-text, beskrivning, fotograf)

För bilder och SVG använder du Redigera metadata [Edit metadata] för att uppdatera tillgänglighets- och kreditfält.

Dessa värden kan visas på den publicerade webbplatsen beroende på era mallar. Alt-text är särskilt viktig för tillgänglighet.

När alt-text krävs

Om din administratör har aktiverat obligatorisk alt-text måste du ange alt-text i väljaren innan du kan infoga en bild.

Beskär en bild

För bild-egenskaper som stödjer beskärning använder du beskärningsverktyget i filväljaren innan du bekräftar valet. Du kan öppna Redigera media [Edit media] senare för att justera beskärningen.

Infoga media på en standard bild-egenskap

Vissa sidor använder Optimizelys inbyggda bild-egenskap (ContentReference med UIHint.Image). När Mediaflow är aktiverat får du även alternativet Infoga media (Mediaflow) [Insert media (Mediaflow)] vid sidan av den vanliga CMS-bildväljaren.

Filen laddas upp till CMS:ets mediabibliotek och länkas på egenskapen, ungefär som när du väljer en bild från Media.

Så hittar du uppladdade filer i Optimizely

Efter att du infogat en bild visas den i Optimizely under Media. Beroende på webbplatsens inställningar kan filer lagras under den aktuella sidans mapp eller i en global mapp (t.ex. Mediaflow eller ett eget mappnamn).

Fråga din administratör om du är osäker på vilken mappstruktur er webbplats använder.

Om filväljaren inte fungerar