Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9

Transkript

1 Arbeta med bilder på sunne.se i CMS 7.5 Sida 1 av 9 Infoga, redigera och ta bort bilder på sunne.se En webbsida bäddar inte in en bild i sidan som många andra program, till exempel Word. Alla bilder och bildobjekt som man ser på en webbsida lagras i praktiken var för sig, separat från själva webbsidan. En webbsida kan bara innehålla text, alla bilder måste länkas in. Webbsidan hämtar upp bilden som är länkad för visning och visar den på rätt plats varje gång någon besöker sidan. Det innebär att oavsett källan (din dator, din kamera, bildarkivet eller annan plats) måste alla bilder föras över och lagras på webbplatsens mediahanterare för att bilden ska kunna visas på webben. Tar du bort en bild från mediahanteraren, eller får en felaktig länk till mediahanteraren, finns ändå länken till bilden kvar på sidan. Detta medför att bilden inte kan visas och istället för din bild syns istället en ruta med ett rött kryss där bilden borde vara. Innehållsförteckning Bildens storlek i höjd, bredd och tyngd är jätteviktig!... 2 Bildens bredd och höjd... 2 Bildens filformat och tyngd = storlek i kb... 2 Bildarkiv med godkända bilder i rätt storlek... 2 Detta är Mediahanteraren... 3 Infoga bild på sidan, bilden finns redan i mediahanteraren... 4 Infoga bild med verktygsknappen Infoga och redigera bild... 4 Ett enklare sätt är att infoga bild med dra och släpp... 4 Ladda upp nya bilder och infoga dem i sidan... 5 Redigera bilden direkt i mediahanteraren inte på sidan... 6 Så här öppnar du bilden i Bildredigeraren... 7 Ändra bildens bredd i punkter/pixlar... 7 Fortsätt med att ändra bildens höjd till 140 pixlar/punkter... 7 Spara bilden när du redigerat klart... 8 Så här gör du för att ta bort en bild... 8 Först måste du veta var din bild finns... 8 Börja med att ta bort bilden i mediahanteraren... 9 När bilden är borta från mediahanteraren ska du ta bort bilden från sidan... 9

2 Arbeta med bilder på sunne.se i CMS 7.5 Sida 2 av 9 Välj alltid bilder som är representativa för Sunne kommun och som illustrerar det budskap/den text som du skriver om på sidan. Bildens storlek i höjd, bredd och tyngd är jätteviktig! Alla bilder måste anpassas till rätt format för webbsidan, det finns fastställda storlekar på bilderna som ska in på sunne.se. Bildens bredd och höjd Andra storlekar på bildens bredd än de som är angivna nedan gör att högerspalten kan hamna under texten, i stället för till höger där den ska vara. Det är heller inte bra om bilden är för lång, för då kan man missa att det finns text eller en nyhetslistning under bilden. Undantag finns för till exempel bildspel och blogginlägg, där bildens höjd kan vara annorlunda. En bild som är 390 punkter bred passar in på sidans bredd. Är den 140 punkter hög syns också det som finns under bilden. En vanlig standardbild på sunne.se som är lika bred som sidan innehåll (ej högerspalten) ska vara 390 punkter bred. Höjden ska vara 140 punkter Ska du placera en bild till höger om texten i själva sidan eller i högerspalten får bilden inte vara bredare än 150 punkter. Här spelar höjden ingen roll, eftersom bild och text visas sida vid sida Bildens filformat och tyngd = storlek i kb En bild på webben ska alltid ha filformatet.jpg eller.gif och ska normalt sett ligga runt kb. Det finns ingen anledning att ha en större storlek, tvärtom, för stora bilder och dokument tar tid att ladda ned för dina besökare och belastar webbservern. Håll ned filstorleken på bilder och dokument, så gör du dina läsare en stor tjänst genom att undvika långa nedladdningstider. Använd alltid bildredigeringsverktyget i EpiServer, se sidan 7, för att ändra storlek på dina originalbilder innan du publicerar dem. Bildarkiv med godkända bilder i rätt storlek Bilder klara att använda som har rätt format, rätt storlek, är representativa för Sunne kommun och godkända att använda finns i vårt bildarkiv på H:\Gemensamma dokument\bildarkiv www_ Bildarkivet är uppbyggt av mappar för olika kategorier och i mapparna finns bilderna sorterade efter bildens bredd. Har du andra egna bilder som ska publiceras måste de alltid anpassas till rätt bredd och storlek. Publicering av till exempel namn och foton på personer på bloggar och sociala medier är i princip alltid tillåten så länge man inte kränker personen. citat ur Datainspektionens faktablad om PUL (personuppgiftslagen). I Sunne kommun får föräldrarna välja om deras barn ska få finnas med på fotografier på webben eller ej. Har du frågor om vad som är godkänt eller ej kan du vända dig till informationsstrateg anneli.jansson@sunne.se eller webbansvarig kathrin.ramstrom@sunne.se

3 Arbeta med bilder på sunne.se i CMS 7.5 Sida 3 av 9 Detta är Mediahanteraren Mediahanteraren är det inbyggda verktyget i EpiServer där vi förvarar alla bilder och dokument som vi länkar upp till webbsidan. Det är också här du laddar upp nya filer, bilder och dokument. Arkivet är tillgängligt för alla, 24 timmar om dygnet, 365 dagar om året precis som webbplatsens webbsidor. Mediahanteraren öppnar du med den svarta knappen Växla resursfönster som du hittar uppe till höger på varje sida. Klicka på den svarta knappen och välj Media (block har vi inte börjat använda än), så känner du igen dig från tidigare versioner då det hette filhanteraren. De största skillnaderna är: Nu finns inga verktygsknappar kvar upptill i mediahanteraren och du kan heller inte högerklicka. Istället finns en menyknapp till höger om varje markerad katalog eller fil. Här finns alternativ för att: skapa ny katalog, ladda upp filer, ändra namn, klipp ut kopiera och klistra in och slänga (flytta till papperskorgen) När du står på en katalog som du har rättigheter till visas ett uppladdningsområde nertill i fönstret. Här kan du klicka och ladda upp nya filer Klicka på knappnålen (uppe i vänstra hörnet i Mediahanteraren) för att fästa eller släppa loss mediahanteraren så att den inte försvinner när du klickar bredvid den. Det är praktiskt att fästa den när du jobbar med bilderna till din sida Det här fungerar precis som förut: För att göra något måste du först klicka dig fram till din katalog/mapp, där du har rättigheter. Enkelklicka för att öppna och se filerna eller klicka på + eller framför katalogen för att visa/dölja undermappar Rättigheter är satta i hela strukturen, vilket innebär att du kan bara ladda upp och ta bort filer i din/dina kataloger. Däremot kan du alltid se innehållet i andras kataloger och du kan också kopiera en bild och klistra in den i din katalog

4 Arbeta med bilder på sunne.se i CMS 7.5 Sida 4 av 9 Infoga bild på sidan, bilden finns redan i mediahanteraren I beskrivningarna nedan är förutsättningen att du har öppnat en sida i skrivläget/redigeringsläge och att den bild du ska infoga i sidan redan finns i mediahanteraren. Du kan infoga bilden på två sätt: antingen med verktygsknappen i sidan eller genom att dra och släppa bilden från mediahanteraren till sidan. Infoga bild med verktygsknappen Infoga och redigera bild 1. Klicka i editorn där du vill ha bilden. Markören ska blinka på rätt ställe 2. Klicka på knappen Infoga/redigera bild, för att öppna dialogrutan med samma namn 3. Klicka på den gula byråknappen för att öppna dialogrutan Välj innehåll som visar strukturen i mediahanteraren 4. Klicka dig fram i mappstrukturen och markera önskad bild. Klicka på ok 5. Du är nu tillbaka i dialogrutan Infoga/redigera bild. Bilden du markerade visas i rutan under Förhandsvisning 6. Skriv en titel och en beskrivning till bilden. Det du skriver i fältet titel visas som ett skärmtips ovanpå bilden när muspekaren placeras på bilden. Av tillgänglighetsskäl är det viktigt att du beskriver bilden med ord, genom att skriva text i rutan Bildens beskrivning. Med hjälp av ett program i datorn kan den som inte ser bilder istället få din beskrivning av den uppläst för sig. (Jag brukar kopiera och klistra in samma text i båda fälten för beskrivning och titel) 7. Klicka på Infoga, nu är din bild på plats på sidan. Flytta bilden till ny plats på sidan om det behövs genom att klicka och dra den till rätt ställe 8. Har du en bild som är 150 px bred kan du välja att placera den till höger om texten genom att markera bilden (får små fyrkanter runt bilden som visar att den är markerad) och sedan välja Bild höger under listpilen vid Stilar i verktygsfältet 9. Publicera ändringarna när du är färdig Ett enklare sätt är att infoga bild med dra och släpp Men du måste alltid justera bildens URL efteråt för att bilden ska vara synlig för dina besökare, det gör du på ett klick samtidigt som du skriver bildens titel och beskrivning. 1. Öppna och nåla fast mediahanteraren. Dubbelklicka dig fram i mappstrukturen så att du ser bilden du vill infoga 2. Öppna din webbsida i skrivläge/redigeraläge. Klicka där bilden ska visas, markören ska blinka där du vill ha bilden Så här ser det ut när jag drar och släpper in bilden krokus på sidan

5 Arbeta med bilder på sunne.se i CMS 7.5 Sida 5 av 9 3. Dra bilden från mediahanteraren och släpp den på rätt ställe i sidan 5) VIKTIGT! Om du använder dra och släpp för att infoga din bild på sidan är det viktigt att du rättar till bildens URL efter att ha landat bilden på rätt plats, annars syns inte bilden för dina besökare, bara den som är inloggad ser bilden. Det går på ett klick samtidigt som du gör bildens beskrivning och titel. Gör så här: a) Klicka en gång på bilden, på sidan, så att den är markerad (små fyrkanter runt bilden) b) Klicka på knappen Infoga/redigera bild c) Skriv en titel och en beskrivning till bilden. Det du skriver i fältet titel visas som ett skärmtips ovanpå bilden när muspekaren placeras på bilden. Av tillgänglighetsskäl är det viktigt att du beskriver bilden med ord, genom att skriva text i rutan Bildens beskrivning. Med hjälp av ett program i datorn kan den som inte ser bilder istället få din beskrivning av den uppläst för sig. (Jag brukar kopiera och klistra in samma text i båda fälten för beskrivning och titel d) Klicka på den gula byråknappen för att öppna dialogrutan Välj innehåll. Nu listas strukturen upp i mediahanteraren. Scrolla nedåt i dialogrutan och kontrollera att bilden du har valt är markerad e) Klicka på knappen Uppdatera. Skillnaden är att före du uppdaterar finns textsträngen se med i Bildens URL, se bilderna nedan. Detta försvinner när du klickar uppdatera. Finns den här textsträngen med så kan inte bilden visas för sidan hittar den inte Före och efter en uppdatering av Bildens URL. Har bilden kvar adressen som finns i den vänstra bilden kan inte din läsare se den. 6) Flytta bilden till ny plats om det behövs genom att klicka och dra den till rätt ställe Har du en bild som är 150 px bred kan du välja att placera den till höger om texten genom att markera bilden (får små fyrkanter runt bilden som visar att den är markerad) och sedan välja Bild höger under listpilen vid Stilar i verktygsfältet 7) Publicera ändringarna när du är färdig Ladda upp nya bilder och infoga dem i sidan Oavsett var du har sparat din bild (i din dator någonstans eller på ett USB-minne) eller om den finns kvar i kameran eller mobilen måste alla bilder föras över och lagras på webbplatsens mediahanterare för att bilden ska kunna visas på webben. För att infoga bilder och dokument som inte redan finns i mediahanteraren måste du först

6 Arbeta med bilder på sunne.se i CMS 7.5 Sida 6 av 9 ladda upp bilden till mediahanteraren och sedan infoga den på sidan. Du kan inte använda verktygsknappen Infoga/redigera bild, den kan bara hämta objekt som redan finns på plats. När du har laddat upp en ny bild i originalformat ska du alltid först redigera den innan du infogar den på sidan, annars tar den för mycket plats. (Se nästa sida) Använd den inbyggda bildredigeraren för att beskära, omforma och ändra storlek på bilden till rätt format. 1. Öppna resursfönstret för mediahanteraren och nåla fast det, se sidan 3, där kan du också läsa mer om hur den fungerar 2. Öppna upp katalogstrukturen i mediahanteraren till den plats där du sparar dina bilder (detta är rättighetsstyrt). När du är på rätt plats ser du: a. De bilder som redan finns i katalogen b. Uppladdningsområdet, som ligger precis ovanför filerna 3. Klicka i uppladdningsområdet för att öppna dialogrutan Ladda upp filer 4. Klicka på +knappen. Nu öppnas ett fönster till dina filer på din dator. a. Öppna den mapp i din dator där du har din bild b. Högerklicka på bilden och byt namn. Har du inte tidigare gett bilden ett bra namn som gör att du/vi kan identifiera den, så ska du göra det nu. Bilder som heter DSC_0109RB06 eller liknande hjälper ingen människa Om du klickar på den inringade knappen (i dialogrutan där du väljer bild) och väljer Stora ikoner eller Extra stora ikoner, så visas bildminiatyrer som gör det lättare att välja rätt bild. c. Markera bilden/bilderna som ska laddas upp till mediahanteraren. Du kan markera flera bilder genom att hålla ned Ctrl eller Shift knappen och klicka på de filer du vill ladda upp. d. Klicka på Öppna och du är tillbaka till dialogrutan Ladda upp filer 5. När din/dina bilder har laddats upp visar en heldragen grön linje att det är klart. Klicka på stäng. Bilderna finns nu under uppladdningsområdet, i katalogen du laddade upp dem till Gå nu vidare med att redigera bilden där den ligger i mediahanteraren, innan du infogar den i sidan. Det sparar du mycket tid på. Redigera bilden direkt i mediahanteraren inte på sidan Inga bilder i originalstorlek ska sparas i filhanteraren eller publiceras på din webbsida. När du laddar upp en originalbild ska du alltid redigera den för att ändra storleken och alltid välja sparalternativet Ersätt originalbild när du är klar. Webben är inget arkiv för bilder, dina originalbilder får du spara i originalskick någon annan stans.

7 Arbeta med bilder på sunne.se i CMS 7.5 Sida 7 av 9 Det är mycket lättare att markera bilden och redigera den direkt i mediahanteraren än på sidan. Du har också bättre kontroll på vilken bildfil du jobbar med när du gör det i mediahanteraren och inte i sidan. På sidan 2 kan du läsa mer om mått och storlekar för en bild på webben. Så här öppnar du bilden i Bildredigeraren 1. Klicka på menyknappen som finns till höger om bilden där den ligger i din katalog i mediahanteraren. (Dubbelklickar du på bilden så förhandsgranskar du bilden, klicka på Tillbaka för att komma tillbaka till redigeraläget.) 2. Välj att Öppna bilden i Bildredigeraren Med bildredigeringsverktyget kan du storleksförändra och beskära bilder. De förändringar du gör här ändrar också bildfilens storlek Ändra bildens bredd i punkter/pixlar Om bilden är en originalbild så är den alldeles för stor för att få plats på en webbsida och har definitivt inte de mått som bilder ska ha för att följa standard. Det första du måste göra är att ändra bildens storlek. 1. Klicka på Ändra storlek. Bildens originalstorlek i antal punkter visas i fälten efter bredd och höjd. I förhandsgranskningsfönstret ser du också direkt att bilden är alldeles för stor för att använda som den är på webben Använd inte inställningarna i rutan Förinställningar. De anpassar bilden efter höjden inte efter bredden. Här ser du vilka mått bilden har i bredd och höjd 2. Skriv 390 (för en bild mitt på sidan) eller 150 (för en bild till höger om texten) i rutan efter bredd 3. Klicka (skriv ingenting) i rutan efter höjd. Kontrollera att rutan behåll proportionerna är ibockad (då anpassar sig bilden till rätt proportioner för höjen). 4. Klicka på Utför. Nu har du rätt bredd på bilden för att den ska passa in på sidan Jobbar du med blogg eller nyheter behöver du inte ändra höjden. Jobbar du med en annan sidtyp ska du i nästa steg ändra bildens höjd. Fortsätt med att ändra bildens höjd till 140 pixlar/punkter För att dina besökare inte ska missa att det finns text under bilden ska din bild ha rätt höjd, vilket är 140 pixlar/punkter. Det gäller alla sidtyper med undantag för nyhet eller blogginlägg, för dessa sidtyper är bilden ok bara den har bredden 390 punkter/pixlar. Ändra bildens höjd gör du genom att beskära den.

8 Arbeta med bilder på sunne.se i CMS 7.5 Sida 8 av 9 1. Klicka på knappen Beskär. a. Dra upp en ruta med muspekaren och justera den genom att dra i noderna (fyrkanterna) på den streckade linjen. Det som är innanför linjen är det som blir kvar av bilden när du har beskurit den. I fälten för bildens storlek ser du hela tiden vilket mått bilden får när du drar i noderna eller b. Skriv 390 i fältet efter bredd och 140 i fältet efter höjd. Klicka en extra gång i någon av rutorna för att uppdatera funktionen. Nu har du en bild som är exakt 390 x 140. Är du inte nöjd med var beskärningen görs så kan du flytta rutan genom att placera muspekaren inuti rutan och försiktigt dra den uppåt eller nedåt 2. Klicka på Utför när du är nöjd med bildens höjd Spara bilden när du redigerat klart 1. Inställningen för Kvalitet Använd alltid den rekommenderade inställningen Maximum 2. Inställningen för Spara a. I 95% ska du alltid välja Ersätt originalbilden. Har du redigerat en ny originalbild, ska du alltid - 100% - välja att ersätta originalbilden. Originalbilder sparar vi inte på i filhanteraren, de får du själv spara någon annan stans. Här sparar vi av utrymmesskäl bara webbanpassade bilder Det finns undantag, i 5% eller mindre av alla fall: b. Ibland händer det att du måste redigera en bild som redan finns i mediahanteraren. Om du vet att bilden används på någon annan sida så ska du välja det andra alternativet Spara bilden som en kopia. Annars syns dina förändringar på bilden även på den sida som redan är publicerad. Alternativet Spara bilden som en kopia placerar din bild i en särskild filkatalog för just den här sidan. Ingen förändring sker då på originalbilden 3. Klicka på OK, längst ned i bildredigeraren för att spara bilden 4. Bilden öppnas i ett visningsläge. Klicka på länken Tillbaka 5. Infoga nu bilden på sidan, enligt sidan 4-5 Så här gör du för att ta bort en bild Bilden måste tas bort både ur mediahanteraren och på sidan, om den inte används på andra sidor också, då ska den bara bort på den aktuella sidan. Först måste du veta var din bild finns Vet du i vilken katalog bilden finns, så kan du gå direkt till instruktionen vid 1 nedan. a) Gå till sidan där bilden som ska tas bort finns. Öppna sidan i skriv/redigeraläge. Klicka en gång på bilden, så att den är markerad

9 Arbeta med bilder på sunne.se i CMS 7.5 Sida 9 av 9 b) Klicka på knappen Infoga/redigera bild c) I dialogrutan för Infoga/redigera bild: Klicka på den gula byråknappen d) I dialogrutan Välj innehåll listas strukturen upp för katalogerna i mediahanteraren och bilden markeras. Scrolla nedåt i dialogrutan för att se var bilden finns. Notera sökvägen och välj Avbryt A: Börja med att ta bort bilden i mediahanteraren 1) Öppna mediahanteraren och nåla fast den (se sidan 2) så slipper du leta upp bilderna en gång till 2) Gå till den katalog där bilden ligger och scrolla bland bilderna under uppladdningsfönstret tills du hittar bilden som du ska ta bort 3) Klicka på bildens menyknapp och välj: Flytta till papperskorgen. 4) Något av följande två besked dyker upp: a) Om din bild INTE finns på någon sida PÅ SUNNE.SE: Du får ett meddelande som talar om att om det finns en inkommande länk, det vill säga en länk från någon annan webbplats, till bilden, så kommer länken inte att fungera efter att du har tagit bort bilden. Externa länkar från andra webbplatser kan vi aldrig kontrollera, välj att Flytta till papperskorgen, så är bilden borta b) Om din bild FINNS på någon/några av sidorna på sunne.se: Du ser namnet och sökvägen på sidan/sidorna där bilden finns i beskedet. Välj Flytta till papperskorgen ändå om du är säker på att bilden bara finns på den sida som du ska redigera Är du osäker på om du kan ta bort bilden, så kan du kolla upp sidan/sidorna först. För muspekaren till raden med sidans namn så dyker länken Visa upp längst till höger. Klicka på Visa så hamnar du på sidan där bilden finns. Om du har nålat fast mediahanteraren kan du samtidigt se bilden där den är lagrad och välja Flytta till papperskorgen igen. Tar du nu bort bilden behöver du ge sidan en ersättningsbild (om den inte redan har fått det) B: När bilden är borta från mediahanteraren ska du ta bort bilden från sidan Nu har du tagit bort bilden, men sidan har fortfarande länken till bilden kvar på sidan. Om någon besöker sidan kan de inte se bilden, eftersom den är borta. I stället ser de ett rött X på sidan där bilden skulle visas och eventuellt en text, om du har skrivit en titel till bilden 5) Gå till sidan och ta bort bilden. Klicka en gång på bilden för att markera den och välj sedan Delete. Ge eventuellt sidan en ersättningsbild istället för bilden du tog bort 6) Spara och publicera sidan Här kommer länken Visa att synas när du pekar på sidans namn