Image and text

Brug content elementet 'Text and images' til at vise en brødtekst i samme element som et billede.

Trin 1

Gå ind på den indholdsside i sidetræet, hvor content elementet skal være.
Klik på ‘+ Create new content’
Vælg ‘Image and text’ under fanen ‘Text and media’.

Trin 2

Start med at give content elementet en overskrift og vælg, om den skal være synlig i frontend.

Trin 3

Efter overskriften skal du forholde dig til felterne:

‘Image position’: Hvilken placering skal billedet have i forhold til teksten?
‘Large image’ og ‘Large image AND wide text’: Du kan enten gøre billedet større eller gøre både billede og tekst større.
1. Du kan kun bruge 'Large image AND wide text’, hvis du har valgt en sidestillet billedposition.

Trin 4

Når du har valgt billedets placering i forhold til teksten, skal du udfylde felterne:

‘Add image’: Sæt det billede ind, der skal stå sammen med teksten.
‘Regular text’: Skriv den brødtekst, der skal vises sammen med billedet.

Trin 5

Hvis du klikker på billedets navn, får du adgang til:

‘Alternative text (Optional)’: Du kan skrive en alternativ tekst, som bliver læst op af skærmlæsere.
- Alt-tekst er obligatorisk, med mindre billedet er dekorativt.
'Description (Caption)': Du kan skrive en beskrivende tekst, som bliver vist under billedet i frontend.
‘Open Editor’: Du kan beskære billedet og vælge forskellige visninger på forskellige typer skærm.

Billeder og tilgængelighed

Når du sætter et billede, en illustration eller en figur ind på en side, skal det være tilgængeligt for brugere med synshandicap. Derfor skal du for hvert billede vurdere:

Er billedet dekorativt (et stemningsbillede)?
Hvis ja, skal billedet ikke have en alt-tekst. I stedet skal alt-tekst-feltet være tomt, så skærmlæseren ved, den skal springe billedet over.
Har billedet indholdsmæssig betydning for indholdet på siden?
Hvis ja, skal billedet have en alt-tekst. Det er den tekst, som skærmlæseren læser op for en person med et synshandicap.

Læs mere om tilgængelighed og billeder på KUnet

Eksempel på text and images - Above center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lectus quis sem lacinia nonummy. Proin mollis lorem non dolor. In hac habitasse platea dictumst. Nulla ultrices odio. Donec augue. Phasellus dui.

Image and text

Trin 1

Trin 2

Trin 3

Trin 4

Trin 5

Billeder og tilgængelighed

Eksempel på text and images - Above center

Eksempel på text and images - Below, center

Eksempel på text and images - Float image left in text

Eksempel på text and images - Float image right in text

Eksempel på text and images - Beside Text, Right

Eksempel på text and images - Beside Text, Left