Hero with image or video

Content elementet 'Hero with image or video' viser et billede eller en video med et label eller en kort introduktionstekst øverst på en forside. Det kan kun sættes ind på en site-forside.

Trin 1

  1. Start med at stille dig i ‘Page’-modulet.
  2. Brug sidetræet til at finde og klikke på forsiden for det site, du vil sætte ‘Hero with image or video' ind på.
  3. Klik på ‘+ Create new content’ under den øverste ‘Front page top’-colPos.

Trin 2

  • Vælg ‘Hero with image or video’ for at sætte din Hero ind på sitets forside.

Trin 3

Overvej at give content elementet en backend-header.

Det kan for eksempel være en fordel, hvis du skal bruge flere Hero-versioner med forskelligt indhold, som du kan skifte i mellem.

  • Der kan kun være 1 aktiv Hero på forsiden ad gangen.
  • Hvis du vil arbejde med flere versioner, skal et være enabled (aktivt) og de andre være disabled (inaktive).

Trin 4

  1. Vælg, om du vil give content elementet et label eller eller en introduktionstekst under ‘Choose text layout’:
    1. Label: 65 tegn inklusive mellemrum.
    2. Introduktionstekst: 155 tegn inklusive mellemrum.
  2. Sæt link ind til sitets ‘Om’-side under ‘Hero text link’.
  3. Vælg, om teksten skal stå til venstre eller højre på billedet under ‘Hero text position’.
    1. Hvis du vælger en introduktionstekst under ‘Choose text layout’, kan du i stedet vælge, om teksten skal stå i toppen eller bunden af billedet.
  4. Hvis du har valgt et label under 'Choose text layout’, kan du vælge om teksten skal stå i en boks eller have en baggrundsfarve under ‘Hero text style’.
    1. Vælger du en introduktionstekst i stedet, forsvinder ‘Hero text style’ som valgmulighed.
  5. Vælg, om dit label eller din introduktionstekst skal have en hvid eller en kontrast-baggrundsfarve under ‘Hero text background colour’.

Trin 5

Hvis du vil have et billede i din Hero

  1. Vælg ‘Background image’ under ‘Select background layout for hero’.
  2. Klik på ‘Add image’ under ‘Hero background image’ for at sætte et billede ind.

Placering af billeder til Hero-content elementer

TYPO3 komprimerer automatisk alle uploadede billeder, så de fylder mindst muligt. Det kan der være brug for at undgå med billeder, der skal være i Hero-content elementet på instituttets forside.

Derfor er der oprettet en mappe per site, som ikke komprimerer uploadede billeder: ‘__no_resize__’.

Her kan I lægge billeder til Hero-content elementet på forsiden og billeder til andre udvalgte billeder, som kræver visning i fuld størrelse.

Hvis du vil have en video i din Hero

  1. Vælg ‘Background video’ under ‘Select background layout for hero’.
  2. Tilføj en video til visning på desktop ved at klikke på ‘Add existing video’ under ‘Video for desktop’.*
  3. Tilføj en video til visning på mobil eller tablet ved at klikke på ‘Add existing video’ under ‘Video for mobile’.
  4. Tilføj et fallback-billede, som bliver vist, mens videoen loader i frontend.

* For at sikre at videoerne på KU's sites er så bæredygtige som muligt i forhold til filstørrelse, er det kun Webteamet i Nørregade, der kan uploade nye videoer til at bruge i Hero-content elementerne.

Under ‘Autoplay’ kan du vælge, om videoen skal starte med at spille automatisk eller ej.

Trin 6

Du har mulighed for at lave jumpboard-knapper i dit Hero-content element, som leder brugeren videre til nogle af sitets mest besøgte eller relevante sider:

  1. Klik på ‘+ Add featured link’ under ‘Add featured links to Hero’ for hver jumpboard-knap, du vil tilføje.
  2. Vælg, om dine jumpboard-knapper skal have kontrastfarve eller ej i frontend.

For hver jumpboard-knap skal du:

  1. Skrive en link-tekst
  2. Sætte et link ind.

Du har også mulighed for at skrive en kort teasertekst til hver jumpboard-knap.

Der kan være 4 jumpboard-knapper i Hero-content elementet. Hvis du skriver teasertekster til jumpboard-knapperne, kan der kun være 3 knapper.

Eksempel på 'Hero with image or video' med jumpboard-knapper

Eksempel på 'Header with image or video' uden jumpboard-knapper