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