Naar hoofdcontent

Afbeeldingen vervangen

Afbeeldingen in uw clone kunt u gemakkelijk vervangen via een aparte functionaliteit binnen de substitutions. U kunt deze functionaliteit vinden door naar de substitution rules te gaan en vervolgens op het tweede tabblad Image replacements te klikken. Op deze pagina kunt u de url's van de originele en nieuwe afbeeldingen kunt invoeren. In dit artikel leggen we u meer uit over deze functionaliteit.

Vervangingsregels

Verwerkingstijd

In tegenstelling tot normale substitution regels is er bij het vervangen van afbeeldingen (vrijwel) geen vertraging. Uw wijzigingen zijn dus direct zichtbaar en zo kunt u gemakkelijk controleren of uw regel werkt. Let erop dat sommige websites de browser instrueren om webpagina's te cachen. Mocht u uw wijziging niet direct zien, druk dan op CTRL + F5 om deze cache te omzeilen.

Venster voor invoer van afbeeldingsregels

Vervangingsregels voor afbeeldingen zijn gemakkelijk in gebruik. In het veld Original image path vult u de url of het pad van de originele afbeelding in. Bij New image source voert u de volledige url in van de nieuwe afbeelding. Toegevoegde regels verschijnen onder de invoervelden in een lijst. U 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 u om te zorgen dat het niet uitmaakt hoe de afbeelding in de broncode staat (met of zonder domeinnaam, protocol, etc). https://example.nl/images/logo.jpg zal bijvoorbeeld genormaliseerd worden naar images/logo.jpg.

JavaScript-gebaseerde lazyload

Indien u een javascript oplossing gebruikt om lazy-loading toe te voegen aan uw 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. Indien uw oplossing met andere velden werkt kunt u het beste normale substitution regels gebruiken.

Responsive afbeeldingen

Indien uw website responsive afbeeldingen gebruikt heeft u waarschijnlijk verschillende versies van uw afbeeldingen met meerdere afmetingen. Clonable herkent deze varianten automatisch indien u één van de volgende naamconventies gebruikt: afbeelding-100x100.jpg of afbeelding_100x100.jpg (streepje of underscore gevolgd door afmetingen gescheiden door een x). U hoeft in dat geval alleen een regel toe te voegen voor afbeelding.jpg. Houdt er wel rekenening 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).

Oud logo op clonable.net

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. Venster voor invoer van afbeeldingsregels

De vervangensregel wordt meteen toegepast en als we de webpagina verversen zien we de nieuwe afbeelding op de plek van de oorspronkelijke afbeelding:

Nieuw logo op clonable.net