KI-Bilder in JTL-Shop kennzeichnen

Script-Tag einbinden

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

Eigene Änderungen gehören in JTL-Shop in ein Child-Template, sonst überschreibt ein Update des NOVA-Templates sie. Die Entwicklerdokumentation empfiehlt die Vorlage NOVAChild vom JTL Build-Server: in den Ordner templates/ entpacken, in der template.xml den Ordnernamen und als Parent NOVA eintragen.

Weitere Skripte lädt die Dokumentation im Block layout-footer-js der footer.tpl. Legen Sie dafür im Child-Template die Datei layout/footer.tpl an und hängen Sie das Script-Tag an den Block an:

{extends file="{$parent_template_path}/layout/footer.tpl"}
{block name='layout-footer-js' append}
    <script src="https://www.ai-label.app/widget.js" defer></script>
{/block}

Aktivieren Sie das Child-Template im Backend unter Einstellungen > Templates. Leeren Sie danach unter System > Cache die Option „Template“ 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 JTL ist der Alt-Text über Attribute in JTL-Wawi. Das Attribut img_alt_1 setzt einen eigenen Alternativtext für das erste Artikelbild, img_alt_2 für das zweite. Ergänzen Sie den Text um „(KI-generiert)“ oder „(Mit KI verändert)“. Attribute pflegen Sie in den Artikelstammdaten auf der Registerkarte Attribute/Merkmale; übertragen Sie die Änderung danach in den Shop.

Das Funktionsattribut bildname legt Dateinamen für die Artikelbilder fest. Es gilt für alle Bilder eines Artikels und eignet sich deshalb nur, wenn alle Bilder dieses Artikels KI-Bilder sind. Bilder auf Seiten aus dem OnPage Composer markieren Sie im Feld Alternativtext des Bild-Portlets.

Stolpersteine

• Template-Cache: Ohne das Leeren unter System > Cache bleibt die alte Fassung ohne Skript aktiv.
• Funktionsattribute aktivieren: Funktionsattribute wie bildname müssen in JTL-Wawi erst für den Onlineshop aktiviert werden (Artikel > Attribute anlegen / bearbeiten).
• Bildposition: Die Ziffer in img_alt_1 bezieht sich auf die Reihenfolge der Bilder. Ändern Sie die Reihenfolge, prüfen Sie die Zuordnung.
• Lightbox: Prüfen Sie, ob das Label in der vergrößerten 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: Ob das Label dort erscheint, hängt davon ab, wie das Template die Bilder ausgibt und wie groß sie 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 JTL-Shop 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.