Hoe pas je een afbeeldingsmasker (vorm) toe binnen Datamotive?
Leer hoe je afbeeldingen via CSS een eigen vorm geeft, zoals een cirkel of een schuine hoek, op één pagina of sitebreed.
Met een afbeeldingsmasker geef je afbeeldingen op je website een unieke vorm, zoals een cirkel of een schuine hoek. Dit geeft de website direct een eigen, herkenbare huisstijl. Je kunt een masker op twee manieren toepassen: op één specifieke pagina, of sitebreed voor de hele website.
Optie 1: Masker toepassen op één specifieke pagina
Wil je dat de afbeeldingsvorm alleen op één specifieke pagina zichtbaar is? Volg dan onderstaande stappen.
Voorwaarde: deze stappen maken gebruik van het tabblad Scripts van een pagina. Raadpleeg voor meer achtergrond de handleiding [Hoe stel je scripts in op een pagina in Datamotive?]
Stap 1 – Open de pagina
Log in op Datamotive en navigeer naar de gewenste pagina.
Stap 2 – Open het tabblad Scripts
Klik bovenin het paginascherm op het tabblad Scripts.
Stap 3 – Voeg een HTML-blok toe
Klik op Script toevoegen en kies voor het bloktype HTML.
Stap 4 – Plak de code
Plak de ontvangen code in het tekstveld. Zorg ervoor dat de code altijd tussen <style> en </style> tags staat, bijvoorbeeld:
<style>
div[class*="Panel_panel"] div[class*="Grid_grid"] div[class*="Block_blocks-column"]:last-child div[class*="Block_block--media"] picture > img { clip-path: circle(50% at 50% 50%); }
</style>
Stap 5 – Sla op en publiceer
Klik linksboven op Opslaan. Publiceer de pagina om het afbeeldingsmasker zichtbaar te maken op de live website.
Optie 2: Masker sitebreed toepassen
Wil je dat het afbeeldingsmasker overal op de website wordt gebruikt, bijvoorbeeld om een dealer-huisstijl consistent door te voeren? Stel dit dan centraal in via de webspace-instellingen.
Stap 1 – Ga naar Webspaces
Navigeer in het linker hoofdmenu naar Webspaces.
Stap 2 – Open het tabblad Analyses
Klik op Analyses.
Stap 3 – Voeg een nieuwe analyse toe
Klik op het +-icoon om een nieuwe analyse toe te voegen.
Stap 4 – Kies het type
Kies bij Type voor Aangepast (Custom).
Stap 5 – Geef de analyse een naam
Geef de analyse een duidelijke naam, bijvoorbeeld Huisstijl afbeeldingsmasker.
Stap 6 – Plak de code
Plak de code, inclusief de <style> en </style> tags, in het codeveld.
Stap 7 – Zet de status op actief en sla op
Controleer of de status op Actief staat en klik linksboven op Opslaan.
Let op: deze instelling geldt voor de hele webspace en hoeft niet los gepubliceerd te worden zoals een pagina.
Aandachtspunten
- Afbeeldingsformaat: test na het opslaan altijd hoe de afbeelding eruitziet op zowel een computer als een mobiele telefoon. Omdat afbeeldingen zich aanpassen aan de schermgrootte, kan de uitsnede op mobiel anders tonen dan op desktop.
- Vorm van het masker: de CSS-eigenschap
clip-pathbepaalt de exacte vorm, bijvoorbeeldcirclevoor een cirkel ofpolygonvoor een schuine hoek. Neem bij een specifieke vorm uit de huisstijl contact op met Datamotive voor de bijbehorende code.
Overzicht instellingen
| Instelling | Beschrijving | Verplicht |
|---|---|---|
| Toepassingsniveau | Pagina (via tabblad Scripts) of webspace (via Webspaces > Analyses) | Ja |
| Bloktype / Analysetype | HTML-blok (pagina) of Aangepast/Custom (webspace) | Ja |
| Naam analyse | Herkenbare naam voor de sitebrede analyse, bijvoorbeeld "Huisstijl afbeeldingsmasker" | Ja, bij Optie 2 |
CSS-code tussen <style> tags |
Bepaalt de vorm van het masker, bijvoorbeeld via clip-path |
Ja |
| Status | Moet op Actief staan om de analyse te laten werken | Ja, bij Optie 2 |
| Publiceren | Publiceer de pagina om wijzigingen zichtbaar te maken | Ja, bij Optie 1 |
| Testen op meerdere apparaten | Controleren of de uitsnede op desktop en mobiel correct oogt | Aanbevolen |