Afbeeldingen vervangen
Afbeeldingen in je clone kun je gemakkelijk vervangen via de editor of een aparte functionaliteit binnen de substitutions. In dit artikel leggen we je meer uit over het wijzigen van afbeeldingen met Clonable.
Editor
Op dezelfde manier waarop je tekst in de editor kunt aanpassen, zijn ook afbeeldingen te wijzigen. Voer bovenin de editor de URL in van de pagina waarop je de afbeelding wilt wijzigen. Daarna kun je met de muis over de afbeelding bewegen, waarna er een oranje button met een afbeeldingsknop verschijnt, zie de afbeelding.
Je kunt op deze knop klikken, waarna er een venster verschijnt waarin je de afbeelding kunt aanpassen. Dit doe je door in het veld New image source het path of de url van de nieuwe afbeelding te plakken. Let erop dat je de volledige url van de vervangende afbeelding invoert. Als je hierna op 'Save' klikt, is de afbeelding aangepast.
Vervangingsregels
Je vindt deze functionaliteit door naar de substitution rules te gaan en vervolgens op het tweede tabblad Image replacements te klikken. Op deze pagina kun je de url's van de originele en nieuwe afbeeldingen invoeren.
In tegenstelling tot normale substitution rules is er bij het vervangen van afbeeldingen (vrijwel) geen vertraging. Je wijzigingen zijn dus direct zichtbaar en zo kun je gemakkelijk controleren of je regel werkt. Let erop dat sommige websites de browser instrueren om webpagina's te cachen. Zie je je wijziging niet direct, druk dan op CTRL + F5 om deze cache te omzeilen.
Vervangingsregels voor afbeeldingen zijn gemakkelijk in gebruik. In het veld Original image path vul je de url of het pad van de originele afbeelding in. Bij New image source voer je de volledige url in van de nieuwe afbeelding. Toegevoegde regels verschijnen onder de invoervelden in een lijst. Je kunt regels verwijderen door op het rode kruis te klikken.
Originele urls/paden worden altijd genormaliseerd. Dit houdt in dat het domein (bv. https://example.nl) en/of de eerste slash worden verwijderd. Dit doet het systeem automatisch voor je, zodat het niet uitmaakt hoe de afbeelding in de broncode staat (met of zonder domeinnaam, protocol, etc.). https://example.nl/images/logo.jpg wordt bijvoorbeeld genormaliseerd naar images/logo.jpg.
Als je een javascript-oplossing gebruikt om lazy-loading toe te voegen aan je website, kan het zijn dat de vervangingsregels voor afbeeldingen niet werken. Deze regels werken namelijk alleen op de src, srcset, data-src en data-srcset attributen van <img> elementen. Als jouw oplossing met andere velden werkt, kun je het beste normale substitution rules gebruiken.
Responsive afbeeldingen
Als je website responsive afbeeldingen gebruikt, heb je waarschijnlijk verschillende versies van je afbeeldingen met meerdere afmetingen. Clonable herkent deze varianten automatisch als je een van de volgende naamconventies gebruikt: afbeelding-100x100.jpg of afbeelding_100x100.jpg (streepje of underscore gevolgd door afmetingen gescheiden door een x). Je hoeft in dat geval alleen een regel toe te voegen voor afbeelding.jpg. Houd er wel rekening mee dat de nieuwe afbeelding ook in dezelfde afmetingen moet bestaan met dezelfde naamconventies.
Voorbeeld
In dit voorbeeld gaan we het logo op onze website clonable.net vervangen door een ander logo. Om te beginnen klikken we met de rechtermuisknop op het logo en kiezen vervolgens voor de optie Afbeeldingskoppeling kopiëren (naam kan verschillen per browser).
Die url plakken we vervolgens in het veld Original image path. De link naar de nieuwe afbeelding plaatsen we in New image source. Om de regel toe te voegen klikken we op Add.
De vervangingsregel wordt meteen toegepast en als we de webpagina verversen, zien we de nieuwe afbeelding op de plek van de oorspronkelijke afbeelding:
