KI-Bilder in PrestaShop kennzeichnen

Script-Tag einbinden

<script src="https://www.ai-label.app/widget.js" defer></script>

Eigene Änderungen gehören in ein Child-Theme, damit ein Update des Eltern-Themes sie nicht überschreibt. Externe Skripte meldet PrestaShop in der theme.yml unter assets an. Für Adressen außerhalb des Shops gilt laut Dokumentation server: remote; das Ladeattribut heißt in der theme.yml attribute (Einzahl):

assets:
  js:
    all:
      - id: ai-label-widget
        path: https://www.ai-label.app/widget.js
        server: remote
        attribute: defer
        priority: 200

Im Child-Theme behalten Sie dabei die Assets des Eltern-Themes, wie in der Anleitung zum Child-Theme beschrieben. Als Modul geht derselbe Eintrag mit registerJavascript() und den Optionen 'server' => 'remote', 'position' => 'head' und 'attributes' => 'defer'. Leeren Sie danach den Cache und öffnen Sie eine Produktseite.

Bilder markieren

Das Widget kennzeichnet nur Bilder, die Sie markiert haben. Ob ein Bild ein Label braucht, entscheiden Sie, zum Beispiel mit dem Pflicht-Check. Drei Wege, die sich kombinieren lassen:

• Attribut am Bild: data-ai-label="generated" für vollständig mit KI erzeugte Bilder, data-ai-label="modified" für Fotos, die mit KI verändert wurden.
• Dateiname mit Kennung vor der Endung: vase--ai.jpg oder vase--ai-mod.jpg.
• Alt-Text, der mit „(KI-generiert)“ oder „(Mit KI verändert)“ endet. Der Zusatz hilft zugleich Screenreadern.

Am einfachsten in PrestaShop ist die Beschriftung des Produktbilds. Im Produkt pflegen Sie zu jedem Bild eine Beschriftung. Viele Themes geben sie als Alt-Text aus; dann genügt der Zusatz „(KI-generiert)“ oder „(Mit KI verändert)“ am Ende. Ob Ihr Theme das tut, sehen Sie im Seitenquelltext am Attribut alt.

Den Dateinamen sollten Sie bei Produktbildern nicht nutzen: PrestaShop legt Produktbilder unter eigenen Nummern ab, der ursprüngliche Name steht deshalb meist nicht in der Bildadresse. Für Bilder in Vorlagen des Child-Themes setzen Sie das Attribut data-ai-label direkt.

Stolpersteine

• Zwei Schreibweisen: In der theme.yml heißt es attribute, in PHP attributes. Ein Tippfehler lädt das Skript ohne defer.
• Cache und zusammengefasste Dateien: Nach Änderungen an der theme.yml zeigt der Shop oft noch die alte Fassung. Leeren Sie den Cache.
• Mehrere Sprachen: Beschriftungen gibt es je Sprache. Ergänzen Sie den Zusatz in jeder Sprache des Shops.
• Vergrößerte Ansicht: Prüfen Sie, ob das Label im Fenster mit dem großen Produktbild erscheint.

Grenzen des Widgets

• Das Widget erreicht nur Bilder als <img> auf Seiten, auf denen das Skript läuft. Hintergrundbilder aus dem Stylesheet und Bilder unter 48 Pixeln (einstellbar mit data-min) bekommen kein Label.
• Warenkorb und Bestellabschluss: Prüfen Sie selbst, ob das Skript dort läuft und die Bilder groß genug sind.
• Bestellbestätigungen per E-Mail erreicht es nicht. Wo Sie ein Bild außerhalb der Website zeigen, hilft eine Kopie mit eingebranntem Label aus KI-Bild kennzeichnen.
• Datenschutz: Das Skript wird von ai-label.app geladen. Dabei sieht unser Hoster die IP-Adresse wie bei jedem Abruf. Es setzt keine Cookies. Erwähnen Sie die Einbindung in Ihrer Datenschutzerklärung.

Native App

Eine eigene App für PrestaShop ist geplant. Einen Termin gibt es noch nicht. Bis dahin funktioniert das Widget ohne Installation im System. Wenn Sie möchten, schreiben wir Ihnen einmal zum Start.

Keine Rechtsberatung. Die Inhalte erklären die Rechtslage auf Grundlage der Primärquellen, sie ersetzen keine Prüfung im Einzelfall.