Joomla module
Meet Tidewrack.
Sorts what washes up.
Tidewrack pulls articles from the categories you choose and lays them out as cards your visitors can filter by tag, search and re-sort, right in the browser. Six layouts, from a tidy grid to a darkroom contact sheet. The live one below is pulling from our sample articles. Go on, poke it.
Example, the First
Tidewrack Example - Masonry | 3 column Layout
Phoenix Weather
Raccoon Banking
Kraken Gardening
Moose Ballet
Dragon Chickens
Otter Parliament
Penguin Detectives
Goblin Goldfish
Unicorn Insurance
Nothing matches those filters. Try fewer tags or switch to Any.
Why it exists
News pages turn into driftwood.
A category blog is a pile in date order. The post someone actually wants is twelve pages down, under everything you wrote since. Tags help, but only if the reader already knows to click one, waits for a page load, and starts over when it's the wrong one.
Tidewrack puts the whole shoreline on one page. Pick a tag or two and the cards reshuffle instantly, with counts that tell you what's left before you click. It uses the categories and tags you already have, so there's nothing new to maintain.
What's in the box
Everything worth keeping.
Your categories
Nothing new to manage
Point it at one category or several, with or without their subcategories. Featured articles in, out or only.
Tag filters
You pick the chips
Only the tags you whitelist become filters. Visitors choose Any or All, and live counts dim the tags that would come up empty.
Search & sort
Find it, fast
Type to narrow by title and intro. Sort by published, updated or A–Z. You set the default; visitors can change it.
Six layouts
Pick your shoreline
Grid, Front Page, Contact Sheet, Tide Line, Magazine List and Masonry. Cards glide to their new spots when filters change.
Clean summaries
Intros that behave
Trimmed to your length at a word, with bold and italic kept and everything else stripped. Plugin tags never leak through.
Images
Always something to see
Intro image first, then the full-text image, then the first picture in the article, then a colour wash. Never an empty box.
Share the view
Links that remember
A filtered view lives in the page address, so "all the goat posts" is one link you can bookmark or send.
Accessibility
Everyone can sort
Real buttons, one link per card, announced result counts, visible focus, Esc to clear search, and reduced-motion respect throughout.
Six ways to wash up
Same articles, different tide.
Grid
Even cards in two to four columns. The safe, tidy baseline.
Front Page
The newest story runs across the top with a serif headline; the rest sit in newspaper columns below.
Contact Sheet
A darkroom film strip: sprocket holes, frame numbers and grease-pencil titles.
Tide Line
A timeline with cards interlocking left and right of a date spine.
Magazine List
Image left, words right. Dense and easy to scan.
Masonry
Natural heights, tucked together, and still read across the rows like Grid. Without JavaScript it falls back to plain columns, which read down each column.
Tidewrack Example - First Page Layout | 4 column Layout
Phoenix Weather
Raccoon Banking
Kraken Gardening
Moose Ballet
Dragon Chickens
Otter Parliament
Penguin Detectives
Goblin Goldfish
Unicorn Insurance
Nothing matches those filters. Try fewer tags or switch to Any.
Better together
Pairs nicely with ShrinkRay.
A wall of cards is a wall of images. ShrinkRay makes small WebP copies of your photos on the server, and Tidewrack finds them and hands each phone the size it actually needs. No setup beyond telling Tidewrack the widths you chose.
No ShrinkRay? Tidewrack still works; it just serves your original images.
For the technical crowd
Under the hood.
- Works with
- Joomla 5.4 and Joomla 6, PHP 8.1+, templates that load Bootstrap 5 (T4, Cassiopeia and friends).
- Dependencies
- None of its own. No jQuery and no Bootstrap JavaScript; it borrows Bootstrap's CSS for buttons and form fields.
- Weight
- About 4.7 KB of JavaScript and 3.5 KB of CSS, gzipped, loaded once per page however many instances you place.
- Access
- Enforced in the database query: publish state and dates, article access, and every parent category's state and access. No module cache, so one visitor's view never reaches another.
- Scale
- Up to 100 articles per module, all filtered in the browser. Instant for news pages, blogs and portfolios.
- Images
- Width and height set to prevent layout shift, lazy loading after the first row, and a
srcsetfrom ShrinkRay'sphoto--333.webpcopies when they exist. - Links
- Filters live in the hash as
#twk-12:tags=3,7;mode=all, written withreplaceState, so the back button and other anchor scripts are left alone. - Theming
- Colours follow Bootstrap's variables, so light and dark modes just work. CSS custom properties and standard Joomla template overrides for the rest.
Ready to beachcomb?
Want Tidewrack on your site? Take it, or let's talk.
Tidewrack
Changelog.
1.0.1
Stable · October 2026Accessibility polish from the first live-site pass.
- Intro text sits above the card's click area, so point-and-read tools like A11y Toolbar's Read Aloud read it, and it can be selected. The photo, title and date still open the article.
- Active Any/All and Cards/List buttons keep white text, whatever the template does to Bootstrap's buttons.
Earlier releases
1.0.0First stable
- Live tag counts: every chip shows what it would show right now, and tags that would come up empty are dimmed.
- Featured badge on featured articles, with a grease-pencil circle in Contact Sheet.
- Masonry reads across the rows now, not down each column, and keeps its natural heights.
- Esc clears the search box.
- Minified script and stylesheet; readable sources ship alongside.
0.1.1Polish
- A few finishing touches for the staff who drop by.
- Fix: the result count said "1 of 1 articles".
0.1.0First build
- Articles from multiple categories, subcategories, featured and language filters, capped at 100.
- Access control in the query, down to every parent category.
- Whitelisted tag filters with Any and All, search, sort and Show more.
- Six layouts, animated reshuffles and shareable filter links.
- Clean intro summaries, the image fallback chain and ShrinkRay
srcset. - And a little something for the curious.
