With VoodBuilder
Community VoodBuilder includes Vmedia. Register VmediaPlugin so the visual editor can upload and pick from the vault.
See also VoodBuilder → Vmedia.
Media explorer block
VoodMedia ships a server-rendered Media explorer block: a public media browser that filters the vault while the visitor types. Unlike the static gallery blocks, the work happens on the server, so it can search a large library without shipping it to the browser first.
Live example: Media explorer demo.
Insert it from the builder: open the blocks panel (Add block), pick the Media galleries category, then Media explorer (searchable). Drop it in a page body, configure it from the Content panel, then Save.
What it does
| Control | Behaviour |
|---|---|
| Search box | Server-side search on media name, file name, caption and alt text (debounced, no page reload) |
| Photos / Videos / Documents tabs | Filters by media type; each tab shows the real number of matches |
| Album selector | Limits the list to one album; only public albums are listed |
| Load more | Appends the next batch below the current list |
| Footer | Showing X of Y item(s) from a real count, plus an empty state when nothing matches |
Only media that belongs to a public album is ever exposed. Private albums are never listed, never counted and cannot be selected — a visitor cannot reach them by editing the request.
Configuration
The Content panel exposes declarative fields, so no code is needed:
| Field | Type | Notes |
|---|---|---|
| Heading | text | Block title; defaults to “Media library” |
| Items per batch | number | Assets loaded at first render, and added on each Load more |
| Search box | yes/no | Show the live search input |
| Type filter | yes/no | Show the type tabs and their counts |
| Album filter | yes/no | Show the album selector (hidden automatically when no public album exists) |
Hiding a control also removes it from the query: a hidden filter can no longer be driven by a crafted request.
Canvas preview vs published page
The builder canvas never runs Livewire. The block is drawn there as a static snapshot of the same markup: identical structure and classes, but the search box, the type tabs and Load more are inert (disabled), carry no wire:* attributes, and the footer counts come from a live query over the current vault, so the preview stays honest as you author.
On the published page the same markup is live: search, tabs, album filter and Load more are handled by the server, and the footer always reflects the current filter.
flowchart LR A[Canvas] -->|static preview, inert controls| B[Save] B --> C[Published page] C -->|Livewire round-trip| D[Search / type / album / load more] D --> E[Real count + results]
Without a page builder
The component is a normal Blade component and does not depend on the builder. Any app that has VoodMedia can mount it directly:
<livewire:vmedia-media-explorer heading="Media library" :per-page="12" />
{{-- or --}}
@livewire('vmedia-media-explorer', ['heading' => 'Media library', 'perPage' => 12])