Hvordan sørge for at bilder i en tekst-editor skalerer seg korrekt på ulike enheter
Når du legger til bilder i en tekst-editor, er det viktig å sørge for at visningen av bildene fungerer på ulike skjermstørrelser, som mobil og nettbrett. Vi ser nærmere på hvordan du oppnår det her.
1. februar 2020av Linda Fermann
Først av alt - hva er en tekst-editor?
En tekst-editor er ganske gjenkjennelig, og ser slik ut:
Du finner dette flere steder i admin. Alle steder hvor det er en sidebygger, så har du tilgang til et element som heter "Formatert tekst". Det er også flere andre steder du vil finne akkurat samme element. Det som heter "Beskrivelse" under "Grunndata" på både produkt, side og artikkel er en tekst-editor. Det samme finner du for eksempel på "Systemmeldinger" og "E-post" under menypunktet "System". Så lenge det ser slik ut som på bildet ovenfor, så kan du være sikker på at du har med en tekst-editor å gjøre.
Hvordan sørge for at bildet skalerer seg korrekt på ulike enheter?
Når du trykker på bilde-ikonet i tekst-editoren, så kan du laste opp et bilde som vil legge seg der du står med musemarkøren i tekst-editoren. Når du har lastet opp det bildet du ønsker, så får du informasjon om bredde og høyde på det aktuelle bildet.
For å få dette bildet til å skalere riktig på ulike enheter, må du gjøre følgende:
- Trykk på hengelås-ikonet, slik at det er "åpent"
- Skriv 100% på "Bredde"
- Fjern det som står på "Høyde"
- Deretter trykker du på lagre.
Dette bildet vil nå fylle bredden på tekst-editoren (100%), og høyden vil justere seg i forhold til hvor bredt det er. Forholdet mellom bredde og høyde vil altså bli beholdt uansett hvilken skjermstørrelse som det vises på. Den tekniske forklaringen til at dette skjer, er at det automatisk legges på en CSS-klasse som heter "img-responsive", og det sørger for at blidet skalerer seg riktig. Og dersom den siste setningen var "litt gresk" for deg, så er det bare å se bortifra. Det er ikke noe som du må forholde deg til - det bare skjer.
Hva med størrelsen på selve bildet?
Du bør også ha et bevisst forhold til hvor mange pixler i bredden bildet som du laster opp har. Dersom du legger inn et bilde i et element som skal vises i hele nettsidens bredde (innenfor standard marg), så bør bildet være 1170 pixler i bredden. Da vil bildet være bredt nok til at det ikke blir uskarpt i visningen. Og du bør også tenke på at bildet ikke skal være så mye større enn det, så lenge du ikke skal vise det i fullbredde (utenfor standard marg).
NB: Bilder blir automatisk komprimert så konsekvensen av for store bilder blir redusert av systemet, men likevel ikke noe hensikt å ha større bilder enn det som er satt av til fullbredde visning av bildet.