Labelling AI images in JTL-Shop

Add the script tag

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

In JTL-Shop, your own changes belong in a child template, otherwise an update of the NOVA template overwrites them. The developer documentation recommends the NOVAChild template from the JTL build server. Unpack it into templates/ and enter the folder name and NOVA as parent in template.xml.

The documentation loads additional scripts in the block layout-footer-js of footer.tpl. Create layout/footer.tpl in the child template and append the script tag to that block:

{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}

Activate the child template in the back end under Settings > Templates (German interface: Einstellungen > Templates). Then clear the “Template” option under System > Cache.

Mark images

Which images need a label is your decision, for example with the labelling check. The widget only labels marked images, in three ways that can be combined:

• Attribute on the image: data-ai-label="generated" for images created entirely with AI, data-ai-label="modified" for photos edited with AI.
• File name with a marker before the extension: vase--ai.jpg or vase--ai-mod.jpg.
• Alt text ending in “(AI-generated)” or “(AI-modified)”.

In JTL, mark images with alt text through attributes in JTL-Wawi. img_alt_1 sets custom alternative text for the first product image, img_alt_2 for the second. You maintain attributes in the product master data on the attributes tab. Then transfer the change to the shop.

The function attribute bildname sets file names for all images of a product, so it only suits products whose images are all AI images. Images on pages built with the OnPage Composer are marked in the alternative text field of the image portlet.

JJTL-Wawi/ Item / Attributes

AI

kerze.jpg

AttributeValueimg_alt_1Scented candle in a jar (AI-generated)

AI-generated

Scented candle in a jar€24.90

Stoneware vase€32.00

AI-generated

Mushroom lamp€59.00

Pitfalls

• Activate function attributes: function attributes such as bildname must first be activated for the online shop in JTL-Wawi.
• Image position: the number in img_alt_1 refers to the image order. If you change the order, check the assignment.
• Lightbox: check that the label appears in the enlarged view.

Limits of the widget

• The widget only reaches <img> elements on pages with the script. Background images from the stylesheet and images under 48 pixels (adjustable with data-min) stay unlabelled.
• Whether the label appears in cart and checkout depends on how the template outputs the images there and how large they are.
• It cannot reach emails such as order confirmations. For images outside your website, create a copy with the label burned in using Label an AI image.
• Privacy: when the script loads from ai-label.app, our host sees the IP address, as with any request. The script sets no cookies. Mention it in your privacy policy.

Native app

A dedicated JTL-Shop app is planned. There is no date yet.