Billede

1. Klik på "Tilføj indhold" i en Content Section

2. Klik på "Billede"

3. Vælg eller upload et billede ved at klikke på "plusset" i billedfeltet. Husk at angive en alt-tekst.

Billedet er nu sat ind og kan nu tilpasses. Klik på "edit settings" i højre side af komponenten. Se næste foldetekst for detaljer om billedindstillinger.

Sådan åbner du billedindstillinger:

Generelt

Når du indstiller et billede afgøres højden på billedet ud fra hvilken bredde der er valgt, hvilket billedformat der er valgt og om der er valgt 'vis hele billedet'. 

Vis hele billedet

Vælges "Vis hele billedet" beskæres billedet ikke.
OBS: fokuspunktet fungerer ikke hvis denne vælges. 

Billedformat

Der kan vælges mellem tre formater: 

• 16:9
• 1:1 
• 9:16 

Herunder kan du se eksempler på to billeder med de forskellige formater valgt:

Bredde på billedet

• XSmall = 150px bredde
• Small = 300px bredde
• Medium = 400px bredde
• Large = 600px bredde
• Tekstbredde = 752px bredde 
• Custom (redaktøren skriver selv hvilken bredde der ønskes)

Hvis ingen bredde vælges, vises billedet som Medium.

Vandret position

• Venstre
• Center
• Højre

Billedet placeres i forhold til komponenten eller sidetypen, det er tilføjet på. Hvis ingen position vælges, er 'venstre' standard.

Placeringen af fokuspunktet bestemmer, hvilken del af billedet der vises, når der ikke er plads til at vise hele billedet. Fokuspunktet beskærer eller zoomer ikke på billedet, men afgør, hvilket område på billedet som er vigtigst at vise ift. den plads der er tilgængelig. 

For at vælge fokuspunktet skal du klikke på 'rediger'-ikonet som vist herunder:

Herefter kan du rykke på fokuspunktet ved at trække i det.

Herunder kan du se et eksempel på det samme billede med to forskellige fokuspunkter:

OBS: fokuspunktet fungerer ikke hvis du har valgt 'Vis hele billedet' i billedindstillinger.

• JPG til fotos
• PNG eller SVG til grafik og ikoner

Når du uploader billeder, er der forskellige faktorer, der påvirker, hvilken størrelse du skal vælge. Her er en oversigt:

Formål med billedet: Vi anbefaler at du vælger billedstørrelse ud fra hvilket komponent billedet skal bruges i. Et billede der skal bruges i et teasercard behøver ikke samme størrelse som i et hero banner. Men husk at billedet evt. skal bruges flere steder. 

Automatisk størrelses-tilpasning: Umbraco laver selv en ny version ud fra originalbilledet så det passer til formatet der bruges i komponenten. Hvis du uploader et meget lille billede til et hero card, vil Umbraco forstørre billedet, MEN kvaliteten vil blive dårlig. Det modsatte vil være tilfældet med store billeder, hvor kvaliteten ikke påvirkes. 

Derfor anbefales det at uploade så stort som muligt (det påvirker ikke sitets hastighed, da Umbraco justerer billederne selv til det specifikke formål) 

Responsivt design: For komponenter der ændrer sig meget ift. skærmens størrelse, fx hero-banneret, er det vigtigt at indstille fokuspunktet. Billedets bredde og højde vil nemlig ændre sig i forhold til skærmstørrelsen og derfor er det vigtigt at fokuspunktet markerer hvilket område på billedet som er det vigtigste at få vist. 

JPG billeder der skal vises i fuldskærm fx i et hero banner, bør være i en opløsning så de passer til en 4K skærm dvs. 3840 x 2160 pixel. 

PNG billeder med grafik kan med fordel uploades i dobbelt størrelse af det der er brug for til visningen. F.eks. en graf/illustration i et dokument.

SVG filer er skalerbare, så der betyder størrelsen ikke noget.