WebP converter
- Installeer de WebP converter via mijn.instijlmedia.app
- Wacht totdat wij de app voor je installeren, of volg zelf de onderstaande stappen.
- Open de Template Editor van je Thema.
1 - url_image functie vervangen
- Zoek in de editor op de
url_image
functie. Voeg hier aan toe:| replace({'cdn.webshopapp.com':'instijl.net', '.jpg' : '.webp'})
- Herhaal de bovenstaande stap in elke snippet op elke plek in het thema.
Ook als deurl_image
in een a-href attribuut staat!
2 - url_asset functie vervangen
- Zoek in de editor op de
url_asset
functie. Voeg hier aan toe:| replace({'cdn.webshopapp.com':'instijl.net', '.jpg' : '.webp'})
- Herhaal bovenstaande stap in elke snippet op elke plek in het thema.
3 - Javascript en Custom Feeds
- Controleer of het thema afbeeldingen in de Javascript aanroept. Zo ja, pas dan ook in de javascript de url aan dmv een stukje javascript. Bijvoorbeeld:
url_image.replace('50x50x2', '200x200x2').replace('cdn.webshopapp.com', 'instijl.net').replace('.jpg', '.webp')
- Ga naar Instellingen > Feeds > Custom Feeds en kijk of er custom feeds zijn
- Als er custom feeds zijn, zoek dan in de editor op de
url_image
functie. Voeg hier aan toe:| replace({'cdn.webshopapp.com':'instijl.net', '.jpg' : '.webp'})
Doe dit voor alle feeds.
4 - Testen
- Test alle pagina's (home, collection, en product) of de afbeeldingen inderdaad via instijl.net komen en of ze allemaal werken.
Voorbeeld code:
src="{{ image | url_image('642x642x3',product.title) | replace({'cdn.webshopapp.com':'instijl.net', '.jpg' : '.webp'}) }}"
title="{{ product.title }}"
alt="{{ product.title }}"
>