KI-Bilder in OXID eShop kennzeichnen

Script-Tag einbinden

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

Die OXID-Entwicklerdokumentation zeigt, wie ein Modul einen Block des aktiven Themes erweitert. Beim APEX-Theme liegt die Erweiterung im Modul unter views/twig/extensions/themes/apex/, im selben Pfad wie die Originalvorlage. Sie erbt mit {% extends %} von der Vorlage und überschreibt einen Block mit demselben Namen:

{% extends 'layout/base.html.twig' %}
{% block BLOCKNAME %}
    {{ parent() }}
    <script src="https://www.ai-label.app/widget.js" defer></script>
{% endblock %}

Vorlage und Blockname sind hier Platzhalter: Wählen Sie einen Block, der auf jeder Seite im Kopf- oder Fußbereich ausgegeben wird. Die Namen stehen in den Vorlagen des APEX-Themes auf GitHub. {{ parent() }} behält den ursprünglichen Inhalt. Aktivieren Sie das Modul danach neu und öffnen Sie eine Artikelseite mit markiertem Bild.

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 OXID ist der Dateiname. Öffnen Sie im Adminbereich die Artikeldetails und wechseln Sie zur Registerkarte Bilder. Benennen Sie die Datei vor dem Hochladen um, etwa vase--ai.jpg. Das System erzeugt daraus automatisch Vorschaubild und Icon. Prüfen Sie im Seitenquelltext, ob --ai in der ausgelieferten Bildadresse steht.

Ob und wo Sie einen eigenen Alt-Text für Artikelbilder pflegen können, hängt von Theme und Version ab. Wenn ja, geht auch der Zusatz „(KI-generiert)“ am Ende. In eigenen Vorlagen setzen Sie das Attribut data-ai-label direkt.

Stolpersteine

• HTML-Sanitizer: In OXID 7.5 ist ein HTML-Sanitizer verfügbar, standardmäßig abgeschaltet. Eingeschaltet entfernt er unter anderem <script> und Event-Handler. Ein Script-Tag in CMS-Inhalten ist deshalb kein verlässlicher Weg.
• Theme-Update: Änderungen direkt in den Dateien des APEX-Themes gehen beim Update verloren. Das Modul bleibt.
• Modul neu aktivieren: Neue Vorlagen-Erweiterungen greifen erst nach dem erneuten Aktivieren des Moduls.
• Vergrößerte Ansicht: Prüfen Sie, ob das Label in der Zoom-Ansicht der Artikelbilder 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 der gewählte Block dort ausgegeben wird.
• 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 OXID eShop 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.