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 de url_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 }}"
>