{"componentChunkName":"component---src-templates-docs-page-index-js","path":"/docs/apps/quicq/afosto-cms/","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":"How to use Quicq on an Afosto website","slug":"docs/apps/quicq/afosto-cms/","id":"256","seo_title":"How to install Quicq on an Afosto website","seo_description":"Quicq is easy to connect with Afosto. Read here how the installation works.","locale":"en","localizations":[{"locale":"nl-NL","slug":"docs/apps/quicq/afosto/"}],"blocks":[{"contents":[{"body":"This document explains how Quicq can be activated on an Afosto webshop.\n\n### Webshop platform\n----------------\n\n1.  Go to the portal of the relevant shop via [app.afosto.com](https://app.afosto.com).\n2.  Go to \"Plugins\".\n3.  Install the plugin \"Image optimisation\".\n4.  Go to the settings of the plugin\n    1.  **Proxy name:** The value you entered at \"Key\" in the steps above. In this example: \"henksbloemenpaleis\".\n    2.  **Active:** check\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### Implementation in the template (Twig knowledge required)\n----------------\n\nIf you have an older Afosto shop, you may have to make some adjustments in the code of the template. Please consult the website administrator for this.\nNow Quicq is active, all images are transformed to a compressed format with an image filter.\n- Go to the editor via \"Design/House style\".\n\n- Search for an image in a file. (For example, in `macros/displays/products.twig` which contains the code for a product card)\n- See if the `\"src\"` or `\"data-src\"` tag has the image filter.\n    - Image without an image filter: `src=\"{{product.image_default.thumbs.400\"}\n    - Image with image filter: `src=\"{{product.image_default.thumbs.400|image({\"w\": 400, \"h\": 400})}}\"`\n\nAn image without an image filter will be ignored by Quicq. In the second example, Quicq compresses the image in question to 400x400.\n\nThere are three variables that can be filled in the image filter:\n1. `\"w\"` (width): The width of the image in digits without suffix in pixels\n2. `\"h\"` (height): the height of the image in numbers without a suffix in pixels\n3. `\"c\"` (crop): When the resolution of the image is different from the values specified above, if \"1\" is selected, it will crop the image to the specified size. The default value is \"0\", where the excess space is filled with white.\n\nAs Quicq will not work without the image filter, it is important that all images in the template are fitted with the filter.\n\nFor example, an image ready for Quicq could look like this:\n\n```\n<img src=\"{{product.image_default.filename|image({\"w\": 1920, \"h\": 1080, \"c\": 1})}}\" alt=\"{{Picture of\"|t}} {{product.name}}\" title=\"{{product.name}}\" class=\"lazyload\"/>\n```\n"}],"id":"710","type":"text"}]}}},"pageContext":{"slug":"docs/apps/quicq/afosto-cms/","id":256}},"staticQueryHashes":["4039036176"]}