README

A Flarum extension that displays an animated thumbnail image slider on the left side of each discussion in the discussion list. Images are automatically extracted from the first post content.

Features

Automatic image extraction - Detects images from the first post using fast XML parsing (s9e TextFormatter format), with HTML rendering fallback. Supports standard <IMG> tags and fof/upload <UPL> tags.
Smooth fade + scale animation - Slick-style carousel with fade transitions and subtle zoom effect (scale(1.2) to scale(1)), powered by CSS transitions with no JavaScript animation libraries.
Lazy loading with IntersectionObserver - Images are loaded only when the slider enters the viewport. Subsequent slides are preloaded in the background for seamless playback.
Smart layout integration - Flexbox-based layout that automatically adapts when used alongside other extensions:
- tryhackx/flarum-topic-rating - Star ratings are positioned cleanly next to tags
- tryhackx/flarum-magnet-link - Magnet link elements integrate without overlap
- fof/discussion-views - View counters are placed alongside reply counts
Responsive design - Slider scales down on mobile devices (60px width) with adjusted counter text. Full desktop layout with configurable width.
Dark mode support - Automatically adapts background and shadow for dark themes.
Image filtering - Configurable minimum/maximum dimension filters. Automatically excludes emojis, avatars, favicons, icons, badges, logos, and SVGs.
Admin panel settings - Full control over slider behavior without touching code.

Settings

Setting	Default	Description
Enable Thumb Sliders	On	Global toggle for the entire extension
Slider width	150px	Width of the thumbnail slider (50-400px). Height follows 2:3 poster ratio automatically
Autoplay speed	1200ms	Time between slide transitions (500-10000ms)
Max images	10	Maximum images per slider (1-20)
Min image dimension	50px	Images smaller than this are excluded
Max image dimension	5000px	Images larger than this are excluded

Compatibility

Flarum version	Extension version	Branch
`^1.8`	`1.x`	`flarum-1`
`^2.0`	`2.x`	`main` / `flarum-2`

Installation

composer require tryhackx/flarum-thumb-sliders
php flarum cache:clear

Update

composer update tryhackx/flarum-thumb-sliders
php flarum cache:clear

Configuration

Navigate to the Administration panel.
Find Thumb Sliders in the extensions list and enable it.
Click the extension to configure slider width, autoplay speed, image limits, and dimension filters.

License

MIT License. See LICENSE for details.

tryhackx / flarum-thumb-sliders

Maintainers

Package info

Statistics

Security