Avatar Circles für YOOtheme Pro
Kurz gesagt: Du legst fest, wie viele Avatare sichtbar sind, den Rest rechnet das Element als +N-Kreis aus und verlinkt ihn auf Wunsch. Bild, Name, Alt-Text und Link bindest du per Dynamic Content an Joomla-Inhalte. Fehlt ein Bild, springen Initialen oder eine mitgelieferte Silhouette ein, alles ohne JavaScript. Das Element ist kostenlos und sofort ladbar.
- Anzeige-Limit frei wählbar - die Differenz zu den gelieferten Einträgen erscheint automatisch als +N-Kreis, optional verlinkt
- Bild, Name, Alt-Text und Link je Avatar per Dynamic Content an Joomla-Inhalte bindbar
- Initialen-Avatare ohne Bild: farbiger Kreis in den Theme-Stilen oder eigener Farbe, zum Beispiel mit "TG"
- Größen-Presets plus freie Pixelgröße von 16 bis 256, Bilder rendert die YOOtheme-Pipeline passend klein inklusive Retina
- Einträge ohne Bild und Initialen erhalten automatisch eine von drei mitgelieferten Avatar-Silhouetten
- Hover-Effekte Anheben und Auffächern rein per CSS, prefers-reduced-motion wird respektiert
- Semantische Liste, Alt-Text-Fallback und Screenreader-Text am Zähler nach WCAG 2.1 AA - ganz ohne JavaScript
Brauchen Sie Avatar Circles für eine andere Plattform?
Schreiben Sie mir, wofür Sie es brauchen. So sehe ich, wo sich eine weitere Version lohnt.
Sie bekommen gleich eine Eingangsbestätigung per E-Mail. Kommt innerhalb von 15 Minuten keine an, auch nicht im Spam-Ordner, ist technisch etwas schiefgelaufen - bitte schicken Sie Ihren Wunsch dann noch einmal.
- Version
- 1.0.4
- Aktualisiert
- 25.09.2026
- Kompatibel mit
- YOOtheme Pro 5 · Joomla
Über dieses Produkt
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.
Häufige Fragen
Was kostet das Element?
Nichts. Du brauchst keine Lizenz, einfach herunterladen und loslegen.
Mit welchen Versionen läuft Avatar Circles?
Mit YOOtheme Pro 5 unter Joomla 5 und 6, PHP 8.1 oder neuer. Für WordPress gibt es das Element nicht.
Woher kommt die Zahl im +N-Kreis?
Das Element rechnet sie selbst aus: Liefert deine Quelle mehr Einträge als dein Anzeige-Limit, erscheint die Differenz als +N-Kreis. Gibt es nicht mehr Einträge, fällt der Kreis weg.
Kann ich die Avatare aus Joomla-Inhalten füllen?
Ja. Bild, Name, Alt-Text und Link jedes Avatars lassen sich per Dynamic Content an Beiträge, Benutzer oder jede andere Multi-Item-Quelle binden.
Was passiert bei Einträgen ohne Bild?
Du zeigst Initialen als farbigen Kreis. Ohne Bild und ohne Initialen bekommt der Eintrag eine von drei mitgelieferten Avatar-Silhouetten.
Braucht das Element JavaScript?
Nein. Hover-Effekte laufen rein per CSS und respektieren prefers-reduced-motion.
Ist die Gruppe barrierefrei?
Sie ist eine semantische Liste nach WCAG 2.1 AA. Alt-Texte fallen auf den Namen zurück, und der Zähler hat einen Screenreader-Text statt nur +7.
Bewertungen
Für dieses Produkt liegen noch keine Bewertungen vor.
Nur Kundinnen und Kunden, die dieses Produkt erworben haben, können es bewerten.