KI-Kennzeichnung für Contao: AI Label

Entstanden ist AI Label aus Kundenanfragen: erst individueller Code, dann eine wiederverwendbare Erweiterung.

Unsere Erweiterung AI Label pflegt die KI-Kennzeichnung einmal pro Datei im Contao-Dateimanager. Das Label erscheint dann überall, wo die Datei eingebunden ist, ohne dass du ein Template anfasst. Gedacht für Bilder und Videos, die nach Art. 50 der KI-Verordnung (AI Act) gekennzeichnet werden sollen.

Mockup mit vier neutralen Platzhalter-Kacheln statt echter Fotos: Eine große dunkle Kachel trägt unten rechts das Label „AI GENERATED". Darunter zeigen eine helle Kachel das Label „AI MODIFIED", eine mittlere Kachel das runde Kurz-Label „AI" und eine dunk

Drei Dinge vorweg

  • Barrierefreiheit

    Das Label ist per aria-describedby mit dem Medium verbunden, Screenreader lesen es mit. Voraussetzung: ein Alt-Text am Bild.

  • Grenzen

    Keine maschinenlesbare Markierung und keine Rechtsgarantie.

  • Rechtsfrage

    Was Art. 50 verlangt, klären wir in einem eigenen Artikel.

Wie pflegst du die KI-Kennzeichnung im Dateimanager?

Dateimanager öffnen, Bild oder Video bearbeiten, Bereich KI-Kennzeichnung. Zwei Felder, einmal pro Datei:

Feld Werte Hinweis
KI-Kennzeichnung – / KI / KI-generiert / KI-bearbeitet entspricht den EU-Icons AI, AI GENERATED, AI MODIFIED
Label-Stil – (Standard der Website) / Schwarz / Schwarz transparent / Weiß / Weiß transparent leer = Standard-Stil, ab Werk "Weiß, transparenter Hintergrund"
Ausschnitt aus dem Contao-Backend im dunklen Design. Links ist das Auswahlfeld „AI label" geöffnet und zeigt die Einträge „-", „AI", „AI generated" und „AI modified". Rechts steht das Feld „Label style" mit dem Hinweis, es leer zu lassen, um den Standard-
Die zwei neuen Felder im Dateimanager. Der Screenshot zeigt das englische Backend.

Wie installierst du AI Label?

Ab Contao 5.3. Installation per Composer, danach contao:migrate ausführen. Die Migration legt die Spalten für die zwei Felder an. Eine Konfiguration brauchst du nicht, die Erweiterung läuft mit Standardwerten und bindet ihr CSS selbst ein.

composer require vonheldenundgestalten/contao-ai-label
vendor/bin/contao-console contao:migrate

Was deckt AI Label ab und was nicht?

Automatisch abgedeckt Nicht abgedeckt
Insert-Tags {{picture}}, {{figure}}, {{image}} CSS-Hintergrundbilder
Templates mit $this->insert('image', …) fest im HTML geschriebene <img>-Tags
das native <video>-Element Twig-Elemente mit der _figure-Komponente
  externe Videos (YouTube, Vimeo)

Für die nicht abgedeckten Fälle setzt du das Label selbst, mit dem Insert-Tag {{ai_label::<uuid oder pfad>}} an der gewünschten Stelle. Beispiel mit frei gewähltem Pfad: {{ai_label::files/bilder/workshop.jpg}}.

Wie passt du das Aussehen per CSS an?

Das Label sitzt unten rechts und skaliert mit dem übergeordneten Element. Steht im Bild eine Bildunterschrift, wandert es nach oben rechts. Du setzt Custom Properties an einem beliebigen Vorfahren:

Eigenschaft Wirkung Standard
--ai-label-size Höhe relativ zur Breite des übergeordneten Elements 11 %
--ai-label-min kleinste Höhe 1,75 rem
--ai-label-max größte Höhe 3,25 rem
--ai-label-top, --ai-label-left Abstand zur oberen und linken Kante auto
--ai-label-right, --ai-label-bottom Abstand zur rechten und unteren Kante 0,25 rem 
/* Beispiel: kleineres Label als der Standard */
.teaser-grid {
  --ai-label-size: 9%;
  --ai-label-max: 2.5rem;
}

Wie schaltest du das Label bei einem einzelnen Bild um oder ab?

Direkt an der Einbindung, ohne die Kennzeichnung der Datei zu ändern. off (auch 0, false, none) blendet aus. Erlaubte Stile: black, black_transparent, white, white_transparent. Blende nur aus, wenn die Datei wirklich keine Kennzeichnung braucht.

{{picture::<uuid>?size=13&ai_label=off}}      kein Label
{{picture::<uuid>?size=13&ai_label=white}}    anderer Stil
<video data-ai-label="off" …>                 Label beim Video aus

Wie konfigurierst du AI Label?

Schlüssel contao_ai_label in der config/config.yaml. Die Werte unten sind die Standardwerte, du änderst nur, was abweichen soll. Mit inject_css: false gestaltest du die Klasse .ai-label selbst. Für anderes Markup erweiterst du AiLabelRenderer und lässt den Service auf deine Klasse zeigen.

# config/config.yaml
contao_ai_label:
    # erlaubt: black, black_transparent, white, white_transparent
    default_style: white_transparent
    inject_css: true        # false: .ai-label selbst gestalten
    auto:
        insert_tags: true   # picture, figure, image
        image_template: true   # $this->insert('image', …)
        video: true         # <video>-Elemente

Wo findest du AI Label?

Quelltext, Issues und README: GitHub. Installation per Composer: Packagist. Suche im Contao-Umfeld: Contao Extension Store. Fehlt etwas oder funktioniert etwas nicht, freuen wir uns über ein Issue oder eine kurze Nachricht.

Zum Contao Extension Store Kontakt aufnehmen

Häufige Fragen zu AI Label

  • Ja, für das native <video>-Element. Es bekommt das Label automatisch, sobald die Datei im Dateimanager gekennzeichnet ist. Externe Videos wie YouTube oder Vimeo werden nicht automatisch erfasst, dafür gibt es den Insert-Tag {{ai_label::<uuid oder pfad>}}.

  • Twig-Elemente mit der _figure-Komponente werden nicht automatisch erfasst. Auch hier gilt der Insert-Tag {{ai_label::<uuid oder pfad>}}. Templates mit $this->insert('image', …) deckt die Erweiterung dagegen ab.

  • Ja. Bei Insert-Tags hängst du ai_label=off an, zum Beispiel {{picture::<uuid>?size=13&ai_label=off}}. Beim <video>-Element setzt du data-ai-label="off". Die Kennzeichnung der Datei im Dateimanager bleibt davon unberührt.

  • Nein, das können wir nicht zusichern. AI Label hilft bei der sichtbaren Kennzeichnung und beim Festhalten pro Datei, ob KI beteiligt war. Eine maschinenlesbare Markierung erzeugt die Erweiterung nicht, und eine Rechtsgarantie gibt sie nicht. Die rechtliche Einordnung bleibt eine Einzelfallfrage.

Zuletzt aktualisiert: 01.10.2026