Quicq aan Afosto shop koppelen

In dit document wordt uitgelegd hoe Quicq geactiveerd kan worden op een Afosto webshop.

Webshop platform

1. Ga naar het portal van de betreffende shop via app.afosto.com

2. Ga naar "Plugins"

3. Installeer de plugin "Afbeelding optimalisatie"

4. Ga naar de instellingen van de plugin undefinedundefined

Implementatie in het template (Twig kennis vereist)

Wanneer 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. Nu Quicq actief is, worden alle afbeeldingen met een afbeeldingsfilter getransformeerd naar een gecomprimeerd formaat.

• Ga naar de editor via "Vormgeving/huisstijl"

• Zoek een afbeelding in een bestand. (bijvoorbeeld in macros/displays/products.twig waarin de code voor een productcard staat)

• Kijk of de "src" of "data-src" tag de afbeeldingsfilter hebben. undefinedundefined

Een afbeelding zonder afbeeldingsfilter zal door Quicq genegeerd worden. In het tweede voorbeeld comprimeert Quicq de betreffende afbeelding in 400x400.

Er zijn drie variabelen die gevuld kunnen worden in de afbeeldingsfilter:

1. "w" (width): De breedte van de afbeelding in cijfers zonder suffix in pixels

2. "h" (height): De hoogte van de afbeelding in cijfers zonder suffix in pixels

3. "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.

Aangezien Quicq niet functioneert zonder de afbeeldingsfilter, is het belangrijk dat alle afbeeldingen in het template voorzien worden van de filter.

Een afbeelding die klaar is voor Quicq zou er bijvoorbeeld zo uit kunnen zien:

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