Infoga bild och video i Optimizely (version 12)

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 system för digital tillgångshantering (DAM). Integrationen låter dig bläddra i Mediaflow och infoga bilder, video och SVG direkt 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.

Öppna Mediaflow-väljaren på en property

På en sida eller ett block med en Mediaflow-property ser du antingen knappen Lägg till media [Add media] (när fältet är tomt) eller en miniatyrbild (när media redan är vald).

[LADDA UPP: skarmdumpar/property-empty-add-media.png – Tom Mediaflow-property med knappen Add media]

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

Bläddra och välj filer i Mediaflow

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

Här kan du navigera mellan mappar som ni delat ut till 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å Use this file.

Beroende på vilken property-typ fältet har kan du bara se vissa filtyper (t.ex. enbart bilder på en bild-property, eller enbart SVG på en SVG-property).

Infoga en bild

På en bild-property väljer du en rasterfil (JPG, PNG, WebP osv.). Du kan sedan välja vilket format du vill använda och ange en alt-text. Bilden laddas upp till Optimizely och visas som en miniatyr.

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

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

Infoga video

På en video-property 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 i property-redigeraren – 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 iframe.

Infoga SVG

På en SVG-property (eller en kombinerad property 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 markören där du vill ha media.
2. Klicka på knappen Mediaflow.
3. Välj en fil i samma filväljare. 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 property redan har media klickar du på menyn ⋯ (hamburgaren) på miniatyren.

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-properties 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-property

Vissa sidor använder Optimizelys inbyggda bild-property (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å propertyn, 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