Hoe werkt het Image component in Strapi?
Wil je graag een soort collage van afbeeldingen maken op je homepage of landingpage dan is het Image Component een goede optie.
Het is mogelijk om op een 4x4 of 3x4 raster afbeeldingen divers te plaatsen voor Desktop view (zie afbeelding 1)
Het is per afbeelding mogelijk een Call to Action in de vorm van tekst of een button toe te voegen.
In afbeelding 2 is de component in Strapi te zien.
Images: Voeg hier de afbeeldingen toe (image properties)
Per image property is het mogelijk om te kiezen voor het tonen van een achtergrond kleur, afgeronde of hoekige hoeken en blending.
Image layout: Je kan per afbeelding ervoor kiezen hoe je de afbeelding wilt tonen.
Image fit:
- Cover: afbeelding toont buiten de kaders bij in- of uitzoomen
- Contain: afbeelding blijft netjes binnen de kaders.
Image focal point: je kan focus leggen op een bepaald deel van je afbeelding
De afbeeldingen kan je plaatsen op een raster van 12 velden breed en 4 rijen hoog. Als je kiest voor een afbeelding 'width' 1 derde en hoogte 2x, dan beslaat de afbeelding 4 velden breed en 2 rijen van het raster. Het is dan mogelijk om ernaast afbeeldingen te plaatsen die ook 1 of 2 derde breed zijn.
Kies je voor een kwart of half, dan kan je de breedte opvullen met een andere afbeelding die ook kwart of half is.
De afbeeldingen worden automatisch geplaatst op basis van volgorde van image properties. Deze volgorde kan je gemakkelijk wijzigen door de verschillende image properties te slepen in Strapi.
Width: Hoe past de afbeelding in het raster. (1 derde / 2 derde/ kwart /half of volledige breedte) Kies je voor 1 derde, dan komt automatisch de volgende afbeedling ernaast als deze 1 of twee derde is.
Height: Het is naast de breedt ook mogelijk om de hoogte te kiezen van de afbeelding op het raster. Er zijn totaal 4 rijen.
Link:
Hier kan je een call to action toevoegen voor je afbeelding
Link alignment: waar wil je de Call-to-Action tonen
Theme: Welke thema geef je de afbeelding
Show as Button: Call to action button of text
Button theme: Welke thema voor de Call to action.