# Shoppable Klantfotogalerij: volledige gids

> Overzicht Shoppable Klantfotogalerij (dfugcgallery) toont echte foto's van uw klanten op de startpagina en onder de productfiches, met aanklikbare hotspots die naar de producten op elke foto verwijzen. De foto's…

- Pagina: <https://www.datafirefly.com/nl/documentation/dfugcgallery/>
- Taal: nl
- Bijgewerkt op: 2026-09-09
- Andere talen: [fr](https://www.datafirefly.com/documentation/dfugcgallery/index.md), [en](https://www.datafirefly.com/en/documentation/dfugcgallery/index.md), [es](https://www.datafirefly.com/es/documentation/dfugcgallery/index.md), [de](https://www.datafirefly.com/de/documentation/dfugcgallery/index.md), [it](https://www.datafirefly.com/it/documentation/dfugcgallery/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfugcgallery/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfugcgallery/index.md)
- Index: <https://www.datafirefly.com/nl/documentation/llms.txt>

## Overzicht

Shoppable Klantfotogalerij (`dfugcgallery`) toont echte foto's van uw klanten op de startpagina en onder de productfiches, met aanklikbare hotspots die naar de producten op elke foto verwijzen. De foto's komen uit twee bronnen: uploads door uw ingelogde klanten (geverifieerde kopers) en de import van uw Instagram-publicaties via de officiële API. Alles loopt via een moderatiewachtrij in de backoffice, waar u ook de producthotspots plaatst.

## Installatie

1. Ga in uw PrestaShop-backoffice naar **Modules → Modulebeheer → Een module installeren**.
2. Kies het bestand `dfugcgallery.zip` en bevestig.
3. De module maakt automatisch zijn twee databasetabellen aan, zijn beheertabblad **UGC-galerij** (onder Catalogus) en zijn beschermde map om afbeeldingen te bewaren.
4. Klik op **Configureren** om de instellingen te openen.

De module werkt met PrestaShop 8.0 tot 8.2 en 9.x, met minimaal PHP 8.0. Hij maakt geen enkele override en gebruikt uitsluitend native hooks: `displayHome`, `displayFooterProduct`, `displayCustomerAccount` en `displayHeader`.

## Configuratie

De configuratiepagina van de module bundelt alle instellingen:

- **Galerij op de startpagina**: in- of uitschakelen en het maximale aantal getoonde foto's.
- **Galerij op de productfiche**: in- of uitschakelen en het maximale aantal foto's in de strook onder elke fiche.
- **Automatisch goedkeuren**: staat dit aan, dan worden klantuploads meteen gepubliceerd zonder moderatie. Instagram-imports gaan altijd langs de moderatie, ongeacht die instelling.
- **Maximale grootte per bestand**: in megabyte, geldig voor elke geüploade foto.
- **Instagram-token**: het long-lived token waarmee uw publicaties worden geïmporteerd (zie het volgende onderdeel).

## Instagram verbinden

De import gebruikt de officiële API « Instagram API with Instagram Login ». Er is één keer een configuratie nodig:

1. Ga naar het ontwikkelaarsportaal van Meta en maak een toepassing van het type Business aan.
2. Voeg het product **Instagram** toe en stel « API setup with Instagram login » in.
3. Koppel het professionele Instagram-account van uw winkel.
4. Genereer een **long-lived token** met de machtiging `instagram_business_basic`.
5. Plak dat token in het veld **Instagram-token** van de configuratie van de module en sla op.

De module vernieuwt het token automatisch vóór elke import. Zolang u minstens één keer per 60 dagen een import start, verloopt het token nooit en hoeft u er niet meer naar om te kijken.

Om te importeren opent u **Catalogus → UGC-galerij** en klikt u in de werkbalk op de knop **Importeren vanaf Instagram**. De module haalt uw recente publicaties op, slaat de al geïmporteerde dubbels over (ontdubbeling op media-identificatie), neemt de eerste afbeelding van carrousels en zet alles op de status « In afwachting ». Video's en Reels worden in deze versie overgeslagen.

## Uploads door uw klanten

Ingelogde klanten krijgen in hun klantenzone een link **Mijn foto's**. Op de verzendpagina kunnen zij:

- tot 5 foto's per keer versturen (jpg, png of webp);
- optioneel een product koppelen, waarbij de lijst alleen de producten uit hun geldige bestellingen toont, zodat elke getagde foto van een geverifieerde koper komt;
- een bijschrift toevoegen;
- de status van hun foto's bekijken (in afwachting, goedgekeurd, geweigerd) en ze op elk moment verwijderen.

Vóór elke verzending is een uitdrukkelijk toestemmingsvakje verplicht. Verwijdert de klant een foto, dan worden de bestanden van de server gewist, niet alleen de vermelding in de database: de module is op AVG-conformiteit gebouwd.

## Moderatie

De lijst **Catalogus → UGC-galerij** toont alle foto's met miniatuur, bron (Upload of Instagram), auteur, status en datum. U kunt:

- filteren op bron en op status;
- elke foto met één klik goedkeuren, weigeren of verwijderen via de acties per regel;
- die acties in bulk toepassen via de selectievakjes;
- de hotspot-editor openen via de actie **Bekijken**.

Alleen goedgekeurde foto's verschijnen in de winkel.

## Hotspot-editor

Met de editor koppelt u producten aan precieze plaatsen op elke foto:

1. Zoek een product op naam, referentie of identificatie in het zoekveld.
2. Kies het en **klik daarna op de foto** op de gewenste plek om het punt te zetten.
3. Sleep een bestaand punt om het te verplaatsen.
4. Verwijder zo nodig een punt via de lijst ernaast.
5. Klik op **Opslaan** om de posities te bewaren.

De posities worden bewaard als percentage van de breedte en de hoogte van de afbeelding: het resultaat is identiek op mobiel, tablet en desktop. Aan winkelzijde pulseert elk punt discreet en opent het bij een klik een productkaart met de naam, de actuele prijs opgemaakt in de valuta van de bezoeker, de omslagafbeelding en een rechtstreekse link naar de fiche.

Tagt een klant bij het uploaden een product, dan ontstaat er automatisch een hotspot in het midden van de foto. U hoeft die tijdens de moderatie alleen naar de juiste plek te slepen.

## Weergave in de winkel

- **Startpagina**: een responsief raster met een badge die per foto het aantal getagde producten toont, en een knop die tot delen aanzet.
- **Productfiche**: een horizontale strook met de klantfoto's die aan het bekeken product hangen.
- **Lightbox**: schermvullend, met navigatie via pijlen en toetsenbord, geanimeerde hotspots en respect voor de voorkeur `prefers-reduced-motion`.

De JavaScript aan de frontzijde is puur, zonder jQuery, en de bestanden worden alleen op de betrokken pagina's geladen. De afbeeldingen worden opnieuw naar JPEG gecodeerd in twee formaten (1600 px en een miniatuur van 600 px) om de prestaties te sparen.

## Problemen oplossen

- **De Instagram-import mislukt**: controleer of het token wel een geldig long-lived token is dat aan een professioneel account hangt, en of de leesmachtiging voor de media is verleend. Een verlopen token (meer dan 60 dagen zonder import) moet u opnieuw genereren via het Meta-portaal.
- **Een geüploade foto wordt bij het versturen geweigerd**: controleer het formaat (alleen jpg, png en webp) en de ingestelde maximale grootte.
- **De foto's verschijnen niet in de winkel**: alleen foto's met de status « Goedgekeurd » worden getoond; controleer ook of de betrokken galerij (startpagina of productfiche) in de configuratie aanstaat.
- **Multistore**: elke winkel beheert haar eigen galerij; controleer welke winkelcontext in de backoffice is gekozen.

## Verwijderen

Bij het verwijderen verdwijnen de tabellen van de module, zijn beheertabblad en zijn configuratie. De beeldbestanden in de uploadmap gaan mee met de verwijderde foto's.