ntg-ai-img

Konfiguration & Public API (Version –)

1. JSON-Block im <head>

<script id="ntg-ai-img-config" type="application/json"> – wird beim Start eingelesen und über die Defaults gelegt. 

–

2. Programmatisch: init(opts)

Überschreibt den JSON-Block (Defaults → JSON-Block → init).

Bereit.

Hinweis: Bereits gerenderte Badges werden von init() nicht neu gezeichnet (Dedupe). „Anwenden" ruft daher destroy() und anschließend init(opts) auf.

Icon: Der Default ist ohne Icon – die Testseite schaltet es über den JSON-Block ein. Feld leeren und „Anwenden" zeigt den Default.

3. getConfig()

Die aktuelle, zusammengeführte Konfiguration.

–

Elementtypen (Wrapper-Pfad vs. Kind-Pfad)

KI-generiertes Bild
<img>Wrapper
KI-generiertes Bild
<picture>Wrapper
<div> + BackgroundKind
<video> im ContainerKind

<img>/<picture> werden in <span class="ntg-ai-img-wrap"> gehüllt, das Badge liegt als Overlay daneben. Bei allen anderen Elementen wird das Badge als Kind eingehängt (position und isolation werden nur gesetzt, wenn nötig – und in destroy() zurückgenommen).

Badge-Text pro Bild (Option texts + Varianten-Schlüssel)

KI-generiert
ohne Wert → default
Mit KI bearbeitet
data-ntg-ai-img="edited"
Hintergrund mit KI geändert
data-ntg-ai-img-variant
Foto mit KI erweitert
photo – aus dem JSON-Block
KI-Illustration
illustration – aus dem JSON-Block
Unbekannte Variante
unbekannter Schlüssel → default

photo und illustration stammen aus dem JSON-Block: texts wird mit den Defaults zusammengeführt, nicht ersetzt – default, edited und background bleiben also erhalten. Ein unbekannter Schlüssel fällt auf default zurück und meldet eine console.warn-Warnung.

Eigener selector ([data-ntg-ai-img], .ai-image)

KI-generiert
nur Klasse, kein Attribut
Mit KI bearbeitet
Klasse + data-ntg-ai-img-variant

Ohne Marker-Attribut gibt es keinen Attributwert für die Variante – dafür ist data-ntg-ai-img-variant da. Der Attribut-Observer reagiert nur auf data-ntg-ai-img; bei nachträglich gesetzten Klassen ist refresh() nötig.

Mindestgröße (minWidth/minHeight = 120, der Default)

Icon 40 Icon 64 Icon 100 Icon 120 Icon 200 → erst ab 120×120 erscheint ein Badge, darunter passt er nicht auf das Bild.

Gemessen wird die gerenderte Größe (Fallback: intrinsische Bildgröße). Das 600×400-Bild unten ist per CSS auf 60px verkleinert und gilt deshalb als „klein":

Thumbnail → groß gespeichert, klein dargestellt → kein Badge.

Option ignore (.no-badge, #ignored-region)

X
Vorfahre .no-badge
Y
Vorfahre .no-badge
Z
Vorfahre #ignored-region

Getroffen wird das Element selbst oder ein Vorfahre (closest()).

Anpassung per CSS-Variablen

KI-generiert
--radius, --padding, --bg/color-light
KI-generiert
--font-size, --gap, --offset
KI-generiert
--bg-dark, --color-dark (Dark Mode)
KI-generiert
Seiten-Overlay
--z-index: 999

Die letzte Karte zeigt die Isolation: Das Badge hat --ntg-ai-img-z-index: 999 und liegt trotzdem unter dem Overlay der Seite, weil der Wrapper einen eigenen Stacking-Context bildet. Der z-index wirkt also nur innerhalb des Bild-Containers.

Hero

Hero, KI-generiert

Slider (CSS Scroll-Snap)

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Produktliste

Produkt A
Produkt A19,99 €
Produkt B
Produkt B24,99 €
Produkt C
Produkt C12,49 €
Produkt D
Produkt D32,00 €

Produktdetail

Hauptbild

Galerie-Thumbnails (64×64) — markiert, aber < Mindestgröße → kein Badge:

Thumb 1 Thumb 2 Thumb 3 Thumb 4

Masonry

M1
M2
M3
M4
M5
M6

AJAX / dynamisch nachgeladen (MutationObserver)

Noch nicht markiert
noch ohne Marker

Der zweite Button setzt data-ntg-ai-img auf ein bestehendes Bild – der Attribut-Observer badgt es ohne weiteres Zutun.

Lazy Images (loading="lazy")

Lazy 1
Lazy 1
Lazy 2
Lazy 2
Lazy 3
Lazy 3