AVATAR CIRCLES by Tonino Gerns

Avatar Circles zeigt überlappende, runde Profilbilder mit automatischem +N-Zähler - das bewährte Social-Proof-Muster für Aussagen wie "Über 500 zufriedene Kunden". Die Avatare pflegst du von Hand oder bindest sie komplett an Dynamic Content. Läuft in Joomla 5 und 6 mit YOOtheme Pro 4.x und 5.x auf Basis von UIkit 3 - komplett kostenlos.

Automatischer +N-Zähler

Du legst fest, wie viele Avatare sichtbar sind. Liefert deine Quelle mehr Einträge, rechnet das Element die Differenz selbst aus und zeigt sie als +N-Kreis - er erscheint nur, wenn es tatsächlich mehr Einträge gibt. Auf Wunsch verlinkst du den Zähler, etwa auf deine Team- oder Bewertungsseite. Gestaltet wird er über die gewohnten Hintergrund-Stile deines Themes: Default, Muted, Primary, Secondary oder eine eigene Farbe.

Dynamic Content, Initialen und Bild-Fallback

Bild, Name, Alt-Text und Link jedes Avatars sind einzeln an dynamische Inhalte bindbar - Beiträge, Benutzer oder jede andere Multi-Item-Quelle. Statt eines Bildes zeigt ein Eintrag auf Wunsch Initialen als farbigen Kreis, zum Beispiel "TG" - den Hintergrund wählst du aus den Theme-Stilen oder als eigene Farbe. Einträge ohne Bild und Initialen bekommen automatisch eine von drei mitgelieferten Avatar-Silhouetten, damit die Reihe nie löchrig wirkt.

Größen, Ringe und Hover-Effekte

Drei Größen-Presets plus freie Pixelgröße von 16 bis 256. Die Bilder rendert die YOOtheme-Bild-Pipeline passend klein und in Retina-Auflösung - ein 48-Pixel-Avatar lädt nie ein 2000-Pixel-Original. Dazu kommen drei Überlappungsstufen, wählbare Stapelreihenfolge, ein Ring mit einstellbarer Breite und Farbe, Namens-Tooltips sowie die Hover-Effekte Anheben und Auffächern - beide rein per CSS und mit Rücksicht auf prefers-reduced-motion.

Barrierefrei und SEO-sauber

Die Avatar-Gruppe ist eine semantische Liste, Screenreader nennen die Anzahl der Einträge. Alt-Texte fallen automatisch auf den Namen zurück, der Zähler trägt einen Screenreader-Text statt nur "+7", und der Tastaturfokus hebt den fokussierten Avatar sichtbar hervor. Feste Bildabmessungen verhindern Layout-Shifts, natives Lazy Loading spart Bandbreite, und JavaScript lädt das Element gar keines.