README

A Flarum extension. Replaces the author avatar in the discussion list with the first image found in the discussion's opening post.

https://cdn.discuss.flarum.org/2026-02-25/1771984263-288896-fof-discussion-thumbnail.mp4

How it works

When the discussion list is rendered, each discussion's author avatar is replaced with a thumbnail of the first <img> found in the HTML of the first post. If the first post contains no image, the normal user avatar is shown instead.

Backend: AddDiscussionThumbnail is registered as an API serializer attribute on BasicDiscussionSerializer. For each discussion it:

1. Loads the first post and calls formatContent() to render the full HTML
2. Extracts the src of the first <img> tag via regex
3. Caches the result forever against the post ID, keyed as fof:discussion-thumbnail:discussion:{id}
4. Returns the URL as the customThumbnail attribute on the discussion

The cache is invalidated when the post's edited_at timestamp is newer than the cached date, so editing the first post to change its image is reflected on next load.

Frontend: The customThumbnail attribute is read in a contentItems extension on DiscussionListItem. When a thumbnail URL is present, the authorAvatar item is replaced with a DiscussionThumbnail component wrapped in the same Tooltip + Link structure as the normal avatar. The thumbnail is styled with the .Avatar class so it matches core avatar sizing and alignment at all breakpoints.

Settings

Installation

composer require fof/discussion-thumbnail:"*"

Enable the extension in your Flarum admin panel.

Updating

composer update fof/discussion-thumbnail
php flarum cache:clear

Links

• Packagist
• GitHub
• Discuss

An extension by FriendsOfFlarum.