Avatar Circles for YOOtheme Pro
In short: You decide how many avatars are visible, and the element turns the rest into a +N circle that you can link if you like. Image, name, alt text and link can be bound to Joomla content via Dynamic Content. If an image is missing, initials or a bundled silhouette take its place, all without JavaScript. The element is free and ready to download.
- Freely selectable display limit - the difference to the delivered entries automatically appears as a +N circle, optionally linked
- Image, name, alt text and link of each avatar can be bound to Joomla content via Dynamic Content
- Initials avatars without an image: colored circle in the theme styles or a custom color, for example with "TG"
- Size presets plus a free pixel size from 16 to 256, the YOOtheme pipeline renders images at a matching small size including retina
- Entries without an image or initials automatically get one of three bundled avatar silhouettes
- Hover effects Lift and Fan out in pure CSS, prefers-reduced-motion is respected
- Semantic list, alt text fallback and screen reader text on the counter according to WCAG 2.1 AA - with no JavaScript at all
Need Avatar Circles for another platform?
Tell me what you need it for. That shows me where another version is worth building.
You'll receive a confirmation email shortly. If nothing arrives within 15 minutes, not even in your spam folder, something went wrong on our end - please send your request again.
- Version
- 1.0.4
- Updated
- 25 Sept 2026
- Compatible with
- YOOtheme Pro 5 · Joomla
About this product
Avatar Circles shows overlapping, round profile pictures with an automatic +N counter - the proven social proof pattern for statements like "Over 500 happy clients". You can maintain the avatars by hand or bind them entirely to Dynamic Content. Runs on Joomla 5 and 6 with YOOtheme Pro 4.x and 5.x, built on UIkit 3 - completely free.
Automatic +N counter
You decide how many avatars are visible. If your source delivers more entries, the element calculates the difference itself and shows it as a +N circle - it only appears when there actually are more entries. If you like, you can link the counter, for example to your team or reviews page. It is styled with your theme's familiar background styles: Default, Muted, Primary, Secondary or a custom color.
Dynamic Content, initials and image fallback
Image, name, alt text and link of each avatar can be bound individually to dynamic content - articles, users or any other multi-item source. Instead of an image, an entry can show initials in a colored circle, for example "TG" - you pick the background from the theme styles or set a custom color. Entries without an image or initials automatically get one of three bundled avatar silhouettes, so the row never looks patchy.
Sizes, rings and hover effects
Three size presets plus a free pixel size from 16 to 256. The YOOtheme image pipeline renders the images at a matching small size and in retina resolution - a 48-pixel avatar never loads a 2000-pixel original. On top of that you get three overlap levels, a selectable stacking order, a ring with adjustable width and color, name tooltips and the hover effects Lift and Fan out - both pure CSS and respecting prefers-reduced-motion.
Accessible and SEO-clean
The avatar group is a semantic list, and screen readers announce the number of entries. Alt texts automatically fall back to the name, the counter carries screen reader text instead of just "+7", and keyboard focus visibly highlights the focused avatar. Fixed image dimensions prevent layout shifts, native lazy loading saves bandwidth, and the element loads no JavaScript at all.
Frequently asked questions
What does the element cost?
Nothing. You don't need a license, just download it and get started.
Which versions does Avatar Circles work with?
With YOOtheme Pro 5 on Joomla 5 and 6, PHP 8.1 or newer. The element is not available for WordPress.
Where does the number in the +N circle come from?
The element calculates it itself: if your source delivers more entries than your display limit, the difference appears as a +N circle. If there are no more entries, the circle is omitted.
Can I fill the avatars from Joomla content?
Yes. Image, name, alt text and link of each avatar can be bound via Dynamic Content to articles, users or any other multi-item source.
What happens with entries that have no image?
You show initials in a colored circle. Without an image and without initials, the entry gets one of three bundled avatar silhouettes.
Does the element need JavaScript?
No. Hover effects run in pure CSS and respect prefers-reduced-motion.
Is the group accessible?
It is a semantic list according to WCAG 2.1 AA. Alt texts fall back to the name, and the counter has screen reader text instead of just +7.
Reviews
There are no reviews for this product yet.
Only customers who have purchased this product can review it.