Konfiguration & Public API (Version –)

–

–

Elementtypen (Wrapper-Pfad vs. Kind-Pfad)

<img>Wrapper

<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 + Text-Schlüssel)

ohne Wert → default

data-ntg-ai-img="edited"

data-ntg-ai-img="background"

photo – aus dem JSON-Block

illustration – aus dem JSON-Block

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)

nur Klasse, kein Attribut

Klasse + data-ntg-ai-img="edited"

Der Text-Schlüssel steckt im Wert von data-ntg-ai-img: Elemente, die nur über den eigenen selector matchen und kein Marker-Attribut tragen, bekommen immer default. Wer einen anderen Text braucht, setzt zusätzlich data-ntg-ai-img="schlüssel". 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)

→ 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":

→ groß gespeichert, klein dargestellt → kein Badge.

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

Vorfahre .no-badge

Vorfahre .no-badge

Vorfahre #ignored-region

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

Anpassung per CSS-Variablen

Die Klassen custom-vars-* gehören nicht zur Library – sie stehen beispielhaft für das CSS des eigenen Projekts. Dort werden die --ntg-ai-img-*-Variablen gesetzt, auf :root oder auf einem beliebigen Vorfahren des Bildes:

/* eigenes Projekt-CSS */
.custom-vars-pill {
  --ntg-ai-img-bg-light: #6d28d9;
  --ntg-ai-img-color-light: #ffffff;
  --ntg-ai-img-radius: 999px;
  --ntg-ai-img-padding: 0.3rem 0.7rem;
}

--radius, --padding, --bg/color-light

--font-size, --gap, --offset

--bg-dark, --color-dark (Dark Mode)

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

Slider (CSS Scroll-Snap)

Produktliste

Produkt A19,99 €

Produkt B24,99 €

Produkt C12,49 €

Produkt D32,00 €

Produktdetail

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

Masonry

AJAX / dynamisch nachgeladen (MutationObserver)

Weitere Produkte laden Marker nachträglich setzen

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 2

Lazy 3