How to use Quicq on an Afosto website

This document explains how Quicq can be activated on an Afosto webshop.

Webshop platform

  1. Go to the portal of the relevant shop via
  2. Go to "Plugins".
  3. Install the plugin "Image optimisation".
  4. Go to the settings of the plugin
    1. Proxy name: The value you entered at "Key" in the steps above. In this example: "henksbloemenpaleis".
    2. Active: check

Afosto cms quicq plugin

Implementation in the template (Twig knowledge required)

If 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. Now Quicq is active, all images are transformed to a compressed format with an image filter.

  • Go to the editor via "Design/House style".

  • Search for an image in a file. (For example, in macros/displays/products.twig which contains the code for a product card)

  • See if the "src" or "data-src" tag has the image filter.

    • Image without an image filter: `src="{{product.image_default.thumbs.400"}
    • Image with image filter: src="{{product.image_default.thumbs.400|image({"w": 400, "h": 400})}}"

An image without an image filter will be ignored by Quicq. In the second example, Quicq compresses the image in question to 400x400.

There are three variables that can be filled in the image filter:

  1. "w" (width): The width of the image in digits without suffix in pixels
  2. "h" (height): the height of the image in numbers without a suffix in pixels
  3. "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.

As Quicq will not work without the image filter, it is important that all images in the template are fitted with the filter.

For example, an image ready for Quicq could look like this:

1 <img src="{{product.image_default.filename|image({"w": 1920, "h": 1080, "c": 1})}}" alt="{{Picture of"|t}} {{}}" title="{{}}" class="lazyload"/>