Block för innehåll i Drupal

Grunden i innehållet i Drupal är block. Block lägger du till under rubriken Content. Varje block har olika egenskaper eftersom de är avsedda för en typ av innehåll.

Skärmdump som visar  en detalj av webbpubliceringssystemet
Lägg till en formatmall/block genom att välja "Add block".

Knappen "Add blocks" listar alla block/formatmallar som du kan använda för att bygga upp och strukturera innehållet på en sida. En sida kan innehålla flera block av samma typ. Om du exempelvis vill bryta brödtexten för att infoga en video och sedan fortsätta med brödtext så får du dela upp texten i två avsnitt som du lägger du i två block av typen Text/Image och lägger filmen i blocket Embedded Video emellan.

Du kan byta ordning på dina block genom att dra och släppa dem.

Du kan infoga ett block var du vill på sidan. Gör så här:

  1. Klicka på de tre prickarna högst upp ett befintligt block där du vill infoga ett nytt block.
  2. Välj Add above och infoga ett block.

Om du vill lägga till blocket längst ned på sidan kan du också använda knappen Add Block. 

Text/blid-block på en sida.
Text/bild-block på en sida.

Du kan välja mellan följande block:

  • Text/image text/bild
  • Documents/dokument
  • Links/Länkar
  • Promos
  • Quote/citat
  • Slideshow
  • Contact card/Kontaktkort
  • Bädda in
  • Fact box/faktaruta
  • Tabell
  • Video
  • Agenda
  • Accordion

Text/image text/bild

Text med bild infälld i texten. Här kan du välja mellan tre olika bildstorlekar och placering. Läs om bilder i manualen.

Bildtexten lägger du enkelt till i ett eget fält.

Menyförklaring

I textfältet finns en list med verktyg för att redigera texten. Länkar till dokument, sidor, epostlänkar och Pubmedartiklar kan du även skapa genom att göra dem i ett block. Vilket du väljer beror på hur du vill att din sida ska se ut.

Text body (P) – Brödtext

Headline 2 – Rubrikstorlek 2

Linked heading (h2) – Rubrikstorlek 2, och visas som en högermeny på sidan (fungerar ungefär som ankarlänkar i html). Du gör en Linked Heading genom att först välja rubrikstorlek 2, sedan kan du välja Linked Heading under rubriken "Stilar". 

När du gör Linked Heading (h2) så kommer rubrikerna att dyka upp i högerspalt på sidan, som en sidmeny. I mobilen blir det en meny för sidan i en drop-lista.. 

Skärmdump från gränssnittet Drupal 10
Linked headings görs i två steg, först väljer durubriknivå, sen gör du den länkad.

Heading (h3) – Rubriknivå 3.

Ibland kan formateringen "fastna" i ett läge. Gör då så här:

  • Markera den text där formateringen är fel.
  • Gå till Body text i rullisten och välj samma formatering som texten redan har, till exempel h2. Då försvinner formateringen och du kan välja något annat.

Radera formatering. När du klistrar in text från t.ex. en webbsida så kanske man inte får bort all formatering. Markera då texten det gäller och klicka på symbolen för Radera formatering, så rensas koden.

Nedsänkt tecken används för att sänka ned en siffra eller ett tecken i ordet, till exempel H2O. Markera den/de tecken du vill göra till nedsänkta och klicka sedan på knappen nedsänkt.

Upphöjt tecken används för att höja upp en siffra eller ett tecken i ordet, till exempel 1st January. Markera den/de tecken du vill göra till upphöjda och klicka sedan på knappen upphöjd.

Specialtecken - Genom att klicka på symbolen för specialtecken kan du infoga dessa tecken i din text. Om du inte hittar det tecken du söker kan man till exempel skriva in det i Word och sen kopiera och klistra in i texten.

Länksymbolen används för att skapa länkar både internt och externt samt e-postlänkar som är inlagda i brödtexten. Du kan även länka till ett uppladdat dokument/fil i brödtexten med den här funktionen. Du kan även välja att lägga länkar i ett eget block.

Pubmed - För att lägga in länk till publikation i PubMed. Ett fält öppnas där du fyller i länken. Du ska skriva in publikationens länk i sin helhet, till exempel https://www.ncbi.nlm.nih.gov/pubmed/31207604/.
(du kan förstora filmen om du inte ser)

Punkt- och nummerlista - Knapp för punkt- och nummerlista.

Maximera fönstret - Om du vill se mer text, klicka på Maximera. Då expanderar brödtextfältet så det täcker hela skärmen. Då ser du mer innehåll vilket gör det lättare att redigera. Klicka på symbolen igen för att gå till normalt läge och lägga till mer innehåll eller spara sidan.

Show blocks - Om du vill se radbrytningar i form av block, klicka i rutan Show blocks. Ett block bildas när du gör radframmatning. Det måste du göra för att skapa en rubrik av något slag precis som när man använder format i ex Word. Ev. tomma stycken eller ”p-block” utan innehåll ska tas bort.

Contact card/Kontaktkort

Kontaktkort skapas med hjälp av blocket Contact Card och KI ID till personen det gäller. 

Catalogue - Standardkontaktkort

Alla anställda och anknutna vid Karolinska Institutet har en profilsida som hämtar all information från KI RIMS. Profilsidan används för att generera standardkontaktkorten, vilka är tillgängliga för alla redaktörer över hela webbplatsen. Korten uppdateras dynamiskt då ändringar sker. Den information som kan visas i kontaktkortet är namn, befattning, e-postadress, telefon, organisatorisk tillhörighet. Om personen i fråga har laddat upp en bild på sig själv på sin profilsida så visas den här också.

Detta kontaktkort skapar du inte själv som redaktör – det finns redan i systemet. När du ska infoga ett kontaktkort till en person som har en profilsida använd i första hand detta alternativ och välj sedan hur mycket som ska visas. 

Infoga ett standardkontaktkort

Välj Add Block – Contact card. Välj Catalogue och leta sedan upp personen genom att börja skriva in namnet. 

Du kan också lägga in en annan titel (funktion) som visas istället för den som hämtas från KI RIMS. Det kan vara användbart om en person ska visas i en annan kontext än sin huvudsakliga.

Du kan också välja att visa lite mer om personen; organisatorisk enhet och ev. mobilnummer. 

OBS! Just nu syns inte mobilnummer, även om du bockar i den rutan.

Leta upp en persons KI-ID

Ibland finns det personer med samma namn, och du kan då behöva hitta personens ki-id för att veta vem som är vem. KI-ID är ofta de tre första bokstäverna i förnamn och efternamn. Du kan hitta en kollegas KI ID genom att klicka på personens e-postadress i Outlook och sedan förstora fönstret. 

Eget kontaktkort (Custom card)

Ibland har du som redaktör behov av att skapa egna kontaktkort. Detta kan användas i de fall du behöver skapa ett kontaktkort för en funktion, ex Registrator, eller om personen i fråga saknar ett KI-ID. Fyll i de fält som ska visas i kontaktkortet.

Ibland kan du som redaktör även vilja fylla i lite mer text för en funktion eller en tjänst, till exempel öppettider. Fyll då i denna information i textfältet så visas det under övriga fält i kontaktkortet. Välj custom card och fyll sedan i de fält du behöver.

Quote

Texten formateras och blir större och i en annan stil. 

Fact box/faktaruta

Faktarutan används för innehåll du vill lägga till en text men inte inkludera i den som tex bakgrundsinformation, punktlistor etc. Faktarutan får en annan formatering än övrig text och får en tunn linje runt sig. Det går att välja färg på denna linje. Eventuella rubriker i faktarutan får också denna färg.

Table/Tabell

Skapa enkla tabeller eller ladda upp som CSV-fil. Tabeller kan användas på fler olika sätt. Med eller utan rubriker etc.

För att skapa en rubrikrad; välj fetad första rad eller första kolumn. Du kan korrigera antal rader och kolumner men de läggs till och dras ifrån nerifrån/högerifrån.

Du kan även skapa länkar i tabeller. Detta är dock krångligt och görs genom html, så vi rekommenderar att du löser en tabellista på annat sätt, till exempel genom att göra en punktlista i brödtext, eller rubrik- och textlistor. 

Du kan inte själv justera bredden på tabellen då systemet fungerar med 100 procent responsivitet vilket betyder att sajten anpassar sig storleksmässigt efter vad du surfar på; mobil, platta etc.

Caption: Text som du skriver in i detta fält syns/läses bara upp för talsynteser och liknande hjälpmedel.

skärmdump på sida
Blocket Picture Gallery i Drupal - används för bildspel.

Picture gallery

Detta block använder du när du vill visa ett bildspel på en sida. Du måste ha minst tre bilder i bildspelet. 

  1. Välj blocket Picture Gallery
  2. Lägg till en rubrik i fältet Headline (valfritt)
  3. Lägg till bilder, minst tre, genom att trycka på Add Picture gallery image.
  4. Lägg till en bildtext för hela bildspelet (valfritt)
skärmdump
Picture Gallery i editläge

Embed/Bädda in

Du kan bädda in innehåll från vilken tjänst som helst, till exempel KI Play, Google Maps, iFrames, Twitter och Instagram och våra egna Verktyg för listor (nyheter, kalender, organisation, jobb, program- och kurser). Du kan inte bädda in javascript. Det är också möjligt att bädda in video här, men blocket Embedded video är specifikt avsett för videotjänster.

Filmer från KI Play

När man bäddar in en film som ligger i KI Play så görs detta på ett annat sätt än andra video-tjänster. Man hämtar en inbäddningskod i KI play och klistrar in den i blocket embed. Hur man hämtar koden finns beskrivet i grundkursen för Canvas, och det är alltså samma kod som hämtas när man vill visa upp filmen på ki.se.

Embedded video/Inbäddad video

Använd detta block för videotjänster så får du en bättre lämpad formatering för videos från till exempel YouTube eller liknande videotjänster. För videos från KI Play gäller vanlig Embed ovan.  

För att ladda upp videon, tryck på Select video och välj sedan Browse video för att visa en film som finns sen tidigare i Drupal eller Add video för att lägga till en ny.

Om du lägger till en ny film skriv (eller klistra in) den URL som du hittar när du ska dela filmen i fältet "Video URL". 

Links/Länkar

Länksymbolen används för att skapa länkar både internt och externt samt e-postlänkar. Du kan även länka till ett uppladdat dokument/fil i brödtexten med den här funktionen.

Vad är en bra länk?

Varje länk ska ha ett så tydligt syfte att användaren kan avgöra om hen ska följa länken eller inte. Skriv därför länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang. Skriv aldrig länkar av typen "Läs mer" eller "klicka här".

Läs mer om tillgänglighet och länkar på sidan: Tillgänglighet på webben – vad krävs av dig som redaktör.

Olika typer av länkar

Länkar kan vara externa, interna eller e-postlänkar. Du kan även länka till ett uppladdat dokument/fil i brödtexten med den här funktionen. Externa länkar går till en annan sida och ser likadana ut som i adressfönstret, tex https://sll.se. Interna länkar går till en annan sida inom ki.se och kan därför använda sidans plats inom Drupal. På så sätt blir länken alltid rätt och du behöver inte hålla reda på om url:en ändras.

Externa länkar

  • Markera den text (gärna en hel mening eller del av mening) du vill länka i texten.
  • Klicka på länksymbolen i menyn.
  • Fyll i den externa länken under URL
  • Klicka Spara

Interna länkar

Länkar du inom ki.se, använd alltid en relativ länk. Relativa länkar använder sidans nodnummer (samma nodnummer kan gå till olika sidor på olika sajter) och ser ut såhär: /node/10816 medan samma länk som absolut länk ser ut såhär: https://medarbetare.ki.se/manual-for-redaktorer-kise. Relativa länkar genereras av verktyget Linkit och är stabilare än absoluta länkar. Undvik därför absoluta länkar. Såhär skapar du länkar genom Linkit:

  1. Markera den text (gärna en hel mening eller del av mening) du vill länka i texten.
  2. Klicka på länksymbolen i menyn.
  3. Skriv titeln till det du söker. Det ska räcka med att du börjar skriva så får du förslag.
  4. En lista syns med de val du har. De visas i grupper om sidor, dokument, nyheter etc. I det blå fältet visas all information om sidan. Om du inte hittar sidan du vill länka till - dubbelkolla om sidan kanske tillhör en annan sajt. 
  5. Klicka på det blåa fältet när du hittat rätt.
  6. Om det är en sida så visas sidans ID som kallas nod-id
  7. Klicka Spara

Länka till Linked headings

Om du vill hänvisa besökaren till en viss rubrik/ankarlänk på en sida, så kan du länka direkt dit. Gör så här:

  1. Gå till sidan du vill länka till och högerklicka på den Linked heading du vill länka till. Högerklicka och välj Kopiera länkadress (lite olika bereonde på operativsystem och webbläsare) 
  2. Markera den text (gärna en hel mening eller del av mening) du vill länka i texten.
  3. Klicka på länksymbolen i menyn.
  4. Klistra in länkadressen i fältet URL du nyss kopierade.
  5. Klicka spara

Observera att du som redaktör måste hålla lite koll på dessa länkar, då de får en specifik länkadress som beror på vilken placering de har i högerspaltens meny. Om någon lägger till eller tar bort en linked heading på sidan du länkat till, kommer din länk att gå sönder.

E-postlänkar

  • Markera den text (gärna en hel mening eller del av mening) du vill länka i texten.
  • Klicka på länksymbolen i menyn.
  • Skriv in mejladressen, till exempel mailadressen@valfri.mail
  • Klicka Spara

Documents/dokument

PDF eller Word-filer kan laddas upp i Drupal och länkas in med detta verktyg. Här ser du ett redan uppladdat dokument och formuläret för att ladda upp nästa. I samband med uppladdningen fyller du i vad dokumentet ska heta. Ett bra namn gör det lättare att hitta dokumentet i systemet när du behöver länka in det till en sida.

Det enklaste sättet att ladda upp ett dokument är via en sida, men du kan också gå till den svarta listen och välja Content/Add media/Documents för att ladda upp dokument.

Ersätta och ta bort dokument

När du laddat upp ett dokument och exempelvis vill ersätta det med en senare version, så ska du ersätta dokumentbehållaren med en ny fil – filen byts ut men länken (URL:en) till dokumentet bibehålls. Gör så här:

  • Gå till my workbench
  • Välj fliken Documents
  • Sök fram ditt dokument och klicka edit.
  • Radera filen och ladda upp en ny.

För att ta bort inaktuella filer, gör som ovan men välj alternativet Delete. Filen tas bort och är inte längre sökbar. Som redaktör kan du inte radera filer eller dokumentbehållare som du inte själv laddat upp.

Skapa bättre sök- och hittbarhet för ditt dokument

När du laddar upp ett dokument är det viktigt att fylla i fältet Notes som fungerar som ett ingressfält och som visas upp i träffresultatet när någon sökt efter ditt dokument. Använd upp till 250 tecken för att beskriva vad ditt dokument är och hur innehållet kan användas. Om man fyllt i detta fält ökar chansen för att ditt dokument blir hittat. Om du inte fyllt i det så visas bara dokumentets titel i träffresultatet, vilket kan vara lite magert när en användare ska avgöra om det är rätt dokument eller inte som föreslås i träfflistan. 

Agenda

Om du skapar en konferens eller liknande där inte kalendarie-event passar så kan du använda detta block för att skapa din agenda. 

Accordion (dragspel)

Dragspel kallar vi blocket som döljer en del av sidan tills att besökaren aktivt väljer att öppna det. Det enda som syns är rubriken. Att använda dragspel kan vara ett bra sätt att skapa översikt på din sida. Tänk på att innehåll i en accordion inte är sökbart på sidan (med hjälp av ctrl+f), så göm inte viktigt innehåll här.

En Accordion kräver också att du sätter tydliga rubriker eftersom besökaren inte ser innehållet om de inte öppnar dragspelet. Rubriken är också sökbar på sidan.

  1. Välj blocket Accordion
  2. Lägg till en rubrik i fältet Headline (valfritt)
  3. Fylli din första flik i ditt dragspel, ett så kallat Accordion item
  4. Ge din flik en tydlig rubrik
  5. Lägg till text i brödtextfältet. Tänk på att din text inte kan vara längre än 1500 tecken. Har du en längre text än så bör du överväga ett annat format eller att dela upp den i mindre delar.
  6. Formatera din text, med mellanrubriker, listor och fet stil.
  7. Lägg till en flik till i ditt dragspel - Add accordion item
  8. Upprepa steg 3-6
  9. Fortsätt tills du har lagt till alla flikar du vill ha i ditt dragspelet.

Promos på sida

På sidor kan de läggas in i rader om en till tre. Vill du lägga till fler promos så får du skapa ett nytt promoblock.

Du kan välja att ha en sammanfattade rubrik för de promos som ligger i raden om det kan hjälpa en användare att förstå vad dina promos har gemensamt.

Välj hur du vill att dina promos ska visas på sidan genom att markera den bild som motsvarar den layout du vill ha.

Du kan välja att ha en orange, grå eller plommonfärgad bakgrund på hela raden. Det översta blocket med promos på en sida kommer alltid att få vit bakgrund. Detta går inte att ändra.

Skärmdump på paragrafen Chart i Drupal
Så här ser det för dig som redaktör när du vill skapa ett tillgänglighetsanpassat diagram.

Chart

Om du vill visa ett diagram, använd blocket Chart. Här kan du välja mellan ett antal olika typer av diagram - som till exempel pajdiagram, linje, kolumner, bubblor med flera.

Lägg in din data i kolumnerna och raderna, och använd sedan Preview för att se vilken typ av diagram som passar bäst för det du ska presentera. Du kan välja mellan ett antal färger och lite längre ner kan du också välja mer detaljerat hur informationen ska presenteras på webbsidan.

När du är klar så sparar du bara sidan som vanligt. För en besökare är diagrammet tillgänglighetsanpassat och det går också att interagera med diagrammet och markera delar av det.