Skip to content
Brok UI

Loading…

No results

Gallery

Open source

Image galleries — a masonry wall and a uniform grid with a lightbox.

Add to page builder

Preview

6 of 6

resources/views/blocks/gallery-justified.blade.php Blade 
@props([
    'eyebrow' => 'Gallery',
    'heading' => 'A justified field of work',
    'subheading' => 'Images flow edge-to-edge in justified rows — each row flush to both margins, every tile a click away from a full view.',
    'images' => null,
])

@php
    $images ??= [
        ['title' => 'Atrium light study', 'category' => 'Architecture', 'shape' => 'wide'],
        ['title' => 'Workshop in progress', 'category' => 'Process', 'shape' => 'portrait'],
        ['title' => 'Material samples', 'category' => 'Detail', 'shape' => 'square'],
        ['title' => 'Evening skyline', 'category' => 'Landscape', 'shape' => 'panorama'],
        ['title' => 'Quiet corner', 'category' => 'Interior', 'shape' => 'portrait'],
        ['title' => 'On location', 'category' => 'Field', 'shape' => 'wide'],
        ['title' => 'Prototype review', 'category' => 'Process', 'shape' => 'square'],
        ['title' => 'Final assembly', 'category' => 'Detail', 'shape' => 'panorama'],
        ['title' => 'Open water', 'category' => 'Landscape', 'shape' => 'wide'],
        ['title' => 'Textures', 'category' => 'Detail', 'shape' => 'portrait'],
    ];

    // Justified look: a small FIXED set of width-basis classes (all literal — never spliced)
    // keyed by shape, so each tile starts at a different width while sharing one row height;
    // `grow` then stretches every tile to fill its row flush to both edges.
    $bases = [
        'wide' => 'basis-72',
        'portrait' => 'basis-48',
        'square' => 'basis-56',
        'panorama' => 'basis-80',
    ];
@endphp

<x-ui.section
    space="xl" {{ $attributes }}
    x-data="{
        activeIndex: 0,
        dialogOpen: false,
        images: {{ \Illuminate\Support\Js::from(array_map(fn ($image) => ['title' => __($image['title']), 'category' => __($image['category'])], $images)) }},
        get activeImage() { return this.images[this.activeIndex]; },
        openAt(i) {
            this.activeIndex = i;
            this.dialogOpen = true;
        },
        step(delta) {
            this.activeIndex = (this.activeIndex + delta + this.images.length) % this.images.length;
            this.announceSubjectChange(`${this.activeImage.title}, ${this.activeImage.category}`);
        },
    }"
>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" overline-style="badge" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        {{-- Justified rows: flex-wrap container, each tile grows to fill its row flush to both edges. --}}
        <div class="mt-12 flex flex-wrap gap-4">
            @foreach ($images as $i => $image)
                <button
                    type="button"
                    x-on:click="openAt({{ $i }})"
                    aria-label="{{ __('Open :title in lightbox', ['title' => __($image['title'])]) }}"
                    class="group relative h-44 grow {{ $bases[$image['shape'] ?? 'wide'] ?? $bases['wide'] }} overflow-hidden rounded-lg border border-border bg-card text-start shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:shadow-md sm:h-52"
                >
                    <div class="size-full bg-muted" aria-hidden="true"></div>

                    {{-- Hover overlay: category badge + caption. --}}
                    <span class="pointer-events-none absolute start-2 top-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
                        <x-ui.badge variant="secondary">{{ __($image['category']) }}</x-ui.badge>
                    </span>
                    <span class="pointer-events-none absolute inset-x-0 bottom-0 flex flex-col bg-gradient-to-t from-background/80 via-background/40 to-transparent p-4 text-start opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
                        <span class="text-sm font-semibold text-foreground line-clamp-1">{{ __($image['title']) }}</span>
                    </span>
                </button>
            @endforeach
        </div>
    </x-ui.container>

    {{-- Lightbox: a real dialog with focus trap and focus return. Previous/Next
         swap the subject in place inside the open dialog and announce the
         change (pattern: sheet peek-navigation). --}}
    <x-ui.dialog x-model="dialogOpen">
        <x-ui.dialog.content size="xl">
            <figure>
                <div class="aspect-[16/10] w-full overflow-hidden rounded-lg border border-border bg-muted" aria-hidden="true"></div>
                <figcaption class="mt-4">
                    <x-ui.dialog.title x-text="activeImage.title"></x-ui.dialog.title>
                    <x-ui.dialog.description class="mt-2" x-text="activeImage.category"></x-ui.dialog.description>
                </figcaption>
            </figure>

            <div class="mt-4 flex items-center justify-between">
                <x-ui.button variant="outline" x-on:click="step(-1)" :aria-label="__('Previous image')">
                    <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m15 18-6-6 6-6" />
                    </svg>
                    <span class="ms-2">{{ __('Previous') }}</span>
                </x-ui.button>
                <x-ui.button variant="outline" x-on:click="step(1)" :aria-label="__('Next image')">
                    <span class="me-2">{{ __('Next') }}</span>
                    <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m9 18 6-6-6-6" />
                    </svg>
                </x-ui.button>
            </div>
        </x-ui.dialog.content>
    </x-ui.dialog>
</x-ui.section>

Installation

terminal 
php artisan ui:add blocks/gallery-justified

Installs these dependencies automatically:

badge button container dialog section section-heading

Registry contract

Install confidence

php artisan ui:add blocks/gallery-justified writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version
1.1.2
License
open
Stability
stable
Contract
v1
Foundation
≥ 1.0.0
Type Generated target
blade resources/views/blocks/gallery-justified.blade.php

Registry dependencies

badge button container dialog section section-heading

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

gallery-justified.md 
# Brok UI block: Gallery Justified (`gallery-justified`)

A Flickr-style justified image gallery: tiles flow in horizontal rows that fill the width flush to both edges and share a consistent row height, with a category badge and caption revealed on hover. Clicking any tile opens the dialog primitive as a lightbox — a real focus trap with focus return — and previous/next swap the subject in place inside the open dialog.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/gallery-justified
```

## Render it

```blade
<x-blocks.gallery-justified />
```

## Props

- `eyebrow` (string, default `Gallery`) — Small badge label shown above the heading.
- `heading` (string, default `A justified field of work`) — Main section heading text.
- `subheading` (string, default `Images flow edge-to-edge in justified rows — each row flush to both margins, every tile a click away from a full view.`) — Supporting subheading text below the heading.
- `images` (mixed|null, default `null`) — Array of gallery images ({title, category, shape}); defaults to a built-in set of ten sample images.

## Use when

- Displaying a Flickr-style justified gallery where rows of images fill the full width edge-to-edge.
- Opening a full lightbox dialog with previous/next navigation when a tile is clicked.

## Avoid when

- Use gallery-grid instead for a uniform square grid, or gallery-masonry for a masonry layout without a lightbox.

## Rules

- Render the installed block with `<x-blocks.gallery-justified />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/gallery-justified
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/gallery-justified.json
Ask about Gallery Justified in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

  • Displaying a Flickr-style justified gallery where rows of images fill the full width edge-to-edge.
  • Opening a full lightbox dialog with previous/next navigation when a tile is clicked.

Avoid when

  • Use gallery-grid instead for a uniform square grid, or gallery-masonry for a masonry layout without a lightbox.

Anti-patterns

  • Do not replace semantic props with conflicting utility classes.
  • Do not remove labels, focus styles, or state attributes.
Anatomy
eyebrow badge heading justified row grid image tile lightbox dialog previous/next controls

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade 
<x-blocks.gallery-justified />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.

resources/views/blocks/gallery-justified.blade.php Blade 
@props([
    'eyebrow' => 'Gallery',
    'heading' => 'A justified field of work',
    'subheading' => 'Images flow edge-to-edge in justified rows — each row flush to both margins, every tile a click away from a full view.',
    'images' => null,
])

@php
    $images ??= [
        ['title' => 'Atrium light study', 'category' => 'Architecture', 'shape' => 'wide'],
        ['title' => 'Workshop in progress', 'category' => 'Process', 'shape' => 'portrait'],
        ['title' => 'Material samples', 'category' => 'Detail', 'shape' => 'square'],
        ['title' => 'Evening skyline', 'category' => 'Landscape', 'shape' => 'panorama'],
        ['title' => 'Quiet corner', 'category' => 'Interior', 'shape' => 'portrait'],
        ['title' => 'On location', 'category' => 'Field', 'shape' => 'wide'],
        ['title' => 'Prototype review', 'category' => 'Process', 'shape' => 'square'],
        ['title' => 'Final assembly', 'category' => 'Detail', 'shape' => 'panorama'],
        ['title' => 'Open water', 'category' => 'Landscape', 'shape' => 'wide'],
        ['title' => 'Textures', 'category' => 'Detail', 'shape' => 'portrait'],
    ];

    // Justified look: a small FIXED set of width-basis classes (all literal — never spliced)
    // keyed by shape, so each tile starts at a different width while sharing one row height;
    // `grow` then stretches every tile to fill its row flush to both edges.
    $bases = [
        'wide' => 'basis-72',
        'portrait' => 'basis-48',
        'square' => 'basis-56',
        'panorama' => 'basis-80',
    ];
@endphp

<x-ui.section
    space="xl" {{ $attributes }}
    x-data="{
        activeIndex: 0,
        dialogOpen: false,
        images: {{ \Illuminate\Support\Js::from(array_map(fn ($image) => ['title' => __($image['title']), 'category' => __($image['category'])], $images)) }},
        get activeImage() { return this.images[this.activeIndex]; },
        openAt(i) {
            this.activeIndex = i;
            this.dialogOpen = true;
        },
        step(delta) {
            this.activeIndex = (this.activeIndex + delta + this.images.length) % this.images.length;
            this.announceSubjectChange(`${this.activeImage.title}, ${this.activeImage.category}`);
        },
    }"
>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" overline-style="badge" :overline="$eyebrow" :title="$heading" :subtitle="$subheading" />

        {{-- Justified rows: flex-wrap container, each tile grows to fill its row flush to both edges. --}}
        <div class="mt-12 flex flex-wrap gap-4">
            @foreach ($images as $i => $image)
                <button
                    type="button"
                    x-on:click="openAt({{ $i }})"
                    aria-label="{{ __('Open :title in lightbox', ['title' => __($image['title'])]) }}"
                    class="group relative h-44 grow {{ $bases[$image['shape'] ?? 'wide'] ?? $bases['wide'] }} overflow-hidden rounded-lg border border-border bg-card text-start shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:shadow-md sm:h-52"
                >
                    <div class="size-full bg-muted" aria-hidden="true"></div>

                    {{-- Hover overlay: category badge + caption. --}}
                    <span class="pointer-events-none absolute start-2 top-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
                        <x-ui.badge variant="secondary">{{ __($image['category']) }}</x-ui.badge>
                    </span>
                    <span class="pointer-events-none absolute inset-x-0 bottom-0 flex flex-col bg-gradient-to-t from-background/80 via-background/40 to-transparent p-4 text-start opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
                        <span class="text-sm font-semibold text-foreground line-clamp-1">{{ __($image['title']) }}</span>
                    </span>
                </button>
            @endforeach
        </div>
    </x-ui.container>

    {{-- Lightbox: a real dialog with focus trap and focus return. Previous/Next
         swap the subject in place inside the open dialog and announce the
         change (pattern: sheet peek-navigation). --}}
    <x-ui.dialog x-model="dialogOpen">
        <x-ui.dialog.content size="xl">
            <figure>
                <div class="aspect-[16/10] w-full overflow-hidden rounded-lg border border-border bg-muted" aria-hidden="true"></div>
                <figcaption class="mt-4">
                    <x-ui.dialog.title x-text="activeImage.title"></x-ui.dialog.title>
                    <x-ui.dialog.description class="mt-2" x-text="activeImage.category"></x-ui.dialog.description>
                </figcaption>
            </figure>

            <div class="mt-4 flex items-center justify-between">
                <x-ui.button variant="outline" x-on:click="step(-1)" :aria-label="__('Previous image')">
                    <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m15 18-6-6 6-6" />
                    </svg>
                    <span class="ms-2">{{ __('Previous') }}</span>
                </x-ui.button>
                <x-ui.button variant="outline" x-on:click="step(1)" :aria-label="__('Next image')">
                    <span class="me-2">{{ __('Next') }}</span>
                    <svg class="size-4 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="m9 18 6-6-6-6" />
                    </svg>
                </x-ui.button>
            </div>
        </x-ui.dialog.content>
    </x-ui.dialog>
</x-ui.section>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.
Owner
Platform UI (@JoshJML)
Current version
1.1.2
Status
Stable
License
open
Deprecation
Not deprecated
Contract
v1
Foundation
≥ 1.0.0