{"componentChunkName":"component---src-templates-docs-page-index-js","path":"/nl/docs/apps/quicq/afosto/","result":{"data":{"site":{"siteMetadata":{"logo":"https://content.afosto.io/5719193282412544/brand/AFO-Logo-compleet-kleur-RGBat4x.png","siteUrl":"https://afosto.com","siteName":"Afosto.com","twitter":"https://twitter.com/afosto","facebook":"https://twitter.com/afosto","company":{"foundingDate":"2014","founders":["Tjeuke horsten","Peter Bakker"],"phoneNumber":"050 711 95 19","email":"support@afosto.com"},"address":{"streetAddress":"Kieler Bocht 15C","locality":"Groningen","region":"GR","postalCode":"9723 JA","country":"NL"}}},"strapi":{"doc":{"title":"Quicq gebruiken op een Afosto site","slug":"docs/apps/quicq/afosto/","id":"237","seo_title":"Quicq gebruiken op een Afosto site","seo_description":"Quicq is eenvoudig te koppelen met Afosto. Lees hier hoe de installatie in zijn werk gaat.","locale":"nl-NL","localizations":[{"locale":"en","slug":"docs/apps/quicq/afosto-cms/"}],"blocks":[{"contents":[{"body":"In dit document wordt uitgelegd hoe Quicq geactiveerd kan worden op een Afosto webshop.\n\n### Webshop platform\n----------------\n\n1.  Ga naar het portal van de betreffende shop via [app.afosto.com](https://app.afosto.com)\n2.  Ga naar \"Plugins\"\n3.  Installeer de plugin \"Afbeelding optimalisatie\"\n4.  Ga naar de instellingen van de plugin\n    1.  **Proxy naam:** De waarde die je ingevoerd hebt bij \"Sleutel\" in bovenstaande stappen. In dit voorbeeld: \"henksbloemenpaleis\"\n    2.  **Actief:** check\n\n\n![Afosto cms quicq plugin](https://qcqcdn.com/afosto/Screenshot_2021_11_12_at_13_28_14_7035401b04/Screenshot_2021_11_12_at_13_28_14_7035401b04.png?w=600)\n\n\n### Implementatie in het template (Twig kennis vereist)\n----------------\n\nWanneer het om een oudere Afosto shop gaat, kan het zijn dat er aanpassingen in de code van het template gemaakt moet worden. Raadpleeg hiervoor de website beheerder.\nNu Quicq actief is, worden alle afbeeldingen met een afbeeldingsfilter getransformeerd naar een gecomprimeerd formaat.\n- Ga naar de editor via \"Vormgeving/huisstijl\"\n\n- Zoek een afbeelding in een bestand. (bijvoorbeeld in `macros/displays/products.twig` waarin de code voor een productcard staat)\n- Kijk of de `\"src\"` of `\"data-src\"` tag de afbeeldingsfilter hebben.\n    - Afbeelding zonder afbeeldingsfilter: `src=\"{{product.image_default.thumbs.400\"`\n    - Afbeelding met afbeeldingsfilter: `src=\"{{product.image_default.thumbs.400|image({\"w\": 400, \"h\": 400})}}\"`\n\nEen afbeelding zonder afbeeldingsfilter zal door Quicq genegeerd worden. In het tweede voorbeeld comprimeert Quicq de betreffende afbeelding in 400x400.\n\nEr zijn drie variabelen die gevuld kunnen worden in de afbeeldingsfilter:\n1. `\"w\"` (width): De breedte van de afbeelding in cijfers zonder suffix in pixels\n2. `\"h\"` (height): De hoogte van de afbeelding in cijfers zonder suffix in pixels\n3. `\"c\"` (crop): Wanneer de afbeelding een andere resolutie heeft dan de boven gespecificeerde waarden, zal deze wanneer \"1\" de afbeelding bijsnijden tot de gespecificeerde grootte. De standaardwaarde is \"0\", waarbij de overtollige ruimte met wit gevuld wordt.\n\nAangezien Quicq niet functioneert zonder de afbeeldingsfilter, is het belangrijk dat alle afbeeldingen in het template voorzien worden van de filter.\n\nEen afbeelding die klaar is voor Quicq zou er bijvoorbeeld zo uit kunnen zien:\n\n```\n<img src=\"{{product.image_default.filename|image({\"w\": 1920, \"h\": 1080, \"c\": 1})}}\" alt=\"{{\"Foto van\"|t}} {{product.name}}\" title=\"{{product.name}}\" class=\"lazyload\"/>\n```\n"}],"id":"488","type":"text"}]}}},"pageContext":{"slug":"docs/apps/quicq/afosto/","id":237}},"staticQueryHashes":["4039036176"]}