_andypeacock Comments - Answer Overflow

_andypeacock

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

It's snappy: https://somup.com/cTfuYzsRgF (the first pause isn't the modal - it's me giving you a moment to absorb what you're looking at)

26 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

<div x-data x-cloak> <div x-show="$store.lightbox.show" x-on:keydown.escape.window="$store.lightbox.show = false" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="relative max-w-3xl max-h-full bg-gray-100 p-12 rounded-lg shadow-xl" x-on:click.outside="$store.lightbox.show = false"> <img :src="$store.lightbox.imageUrl" alt="Lightbox image" class="max-h-[80vh] max-w-full rounded border border-gray-300"> <button @click="$store.lightbox.show = false" class="absolute top-3 right-3 p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 transition-all duration-200"> <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"> </path> </svg> </button> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('lightbox', { show: false, imageUrl: null, openLightbox(url) { this.imageUrl = url; this.show = true; }, closeLightbox() { this.show = false; this.imageUrl = null; }, }); }); </script>

26 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

3. the lightbox blade template Hope that helps!

26 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

Hi @SimonH At the laptop at last. So, three parts 1. the filament column above 2. In your main provider:

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_END,
    fn (): \Illuminate\Contracts\View\View => view('filament.tables.lightbox'),
    scopes: [
        YourFilamentResource::class,
    ],
);

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_END,
    fn (): \Illuminate\Contracts\View\View => view('filament.tables.lightbox'),
    scopes: [
        YourFilamentResource::class,
    ],
);

26 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

Ah, theres a blade file and render hook. Let me get back to my laptop (about 3-4 hours from now) and I'll pull it all together.

26 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

Ah, I did. Now have

ImageColumn::make('thumbnail_url')
                    ->label('Thumbnail')
                    ->toggleable()
                    ->width(300)
                    ->height('100%')
                    ->extraAttributes(fn ($record) => [
                        'class'              => 'cursor-pointer',
                        'x-on:click'         => '$store.lightbox.openLightbox($el.getAttribute("data-thumbnail-url"))',
                        'data-thumbnail-url' => $record->thumbnail_url,
                    ]),

ImageColumn::make('thumbnail_url')
                    ->label('Thumbnail')
                    ->toggleable()
                    ->width(300)
                    ->height('100%')
                    ->extraAttributes(fn ($record) => [
                        'class'              => 'cursor-pointer',
                        'x-on:click'         => '$store.lightbox.openLightbox($el.getAttribute("data-thumbnail-url"))',
                        'data-thumbnail-url' => $record->thumbnail_url,
                    ]),

26 replies

FFilament

•Created by bionary on 6/26/2024 in #❓┊help

Anybody find a decent solution for table images to a lightbox?

I'm on from mobile at the moment, but my sight loads the modal very quickly. I don't remember having any issues, but let me check and I'll come back in case I made any last minute changes.

26 replies

FFilament

•Created by _andypeacock on 3/27/2025 in #❓┊help

Checkboxlist - disable click on label

Ah, fantastic, that stops the click event. Thanks @Leandro Ferreira

5 replies

FFilament

•Created by _andypeacock on 3/24/2025 in #❓┊help

Relationship manager modal not opening

Still nothing obvious. Went for the "big red button" approach: rm -rf vendor && composer install. That fixed it. Coding is 50% intelligence. 50% copy-pasting. And 50%: "Huh. Didn't think that would work"

11 replies

FFilament

•Created by _andypeacock on 3/24/2025 in #❓┊help

Relationship manager modal not opening

Appreciate your help anyway, Adam

11 replies

FFilament

•Created by _andypeacock on 3/24/2025 in #❓┊help

Relationship manager modal not opening

And no other errors in the network tab

11 replies

FFilament

•Created by _andypeacock on 3/24/2025 in #❓┊help

Relationship manager modal not opening

Not a thing, Adam. It's really confused me.

11 replies

FFilament

•Created by _andypeacock on 1/24/2025 in #❓┊help

Anyone got a custom emailverification example?

Ah, forget this. I had some legacy middleware that I'd forgotten to remove that was interfering in things. Filament send the user to the dashboar panel, logged in, after verification, so the verification event fires immediately .

4 replies

FFilament

•Created by _andypeacock on 12/28/2024 in #❓┊help

I have a livewire event handler on my resource create and edit pages like this:

Ah, got there:

 #[On('copyToText')]
 public function handleCopyToText($content): void
 {
     $this->mountedTableActionsData[0]['text_content'] = $content;
 }

 #[On('copyToText')]
 public function handleCopyToText($content): void
 {
     $this->mountedTableActionsData[0]['text_content'] = $content;
 }

4 replies

FFilament

•Created by _andypeacock on 11/24/2024 in #❓┊help

Change with of relationmanager modal

For anyone else, it goes in the relationmanager itself:

public function table(Table $table) : Table
    {
        return $table
            ->recordTitleAttribute('subject')
            ->columns([
                Tables\Columns\TextColumn::make('subject'),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make()->modalWidth(MaxWidth::Screen),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

public function table(Table $table) : Table
    {
        return $table
            ->recordTitleAttribute('subject')
            ->columns([
                Tables\Columns\TextColumn::make('subject'),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make()->modalWidth(MaxWidth::Screen),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }