Filament Company Logo Column Laravel Package

Getting Started

Minimal Steps

1. Install the package:

   composer require tinusg/filament-company-logo-column
   

2. Configure Logo.dev: Add your publishable key to .env:

   LOGO_DEV_PUBLISHABLE_KEY=pk_XXXXXXXXXXXXXXXXX
   

   Ensure it’s reflected in config/services.php under 'logo_dev'.

3. First usage: Add the column to a Filament resource table:

   use TinusG\FilamentCompanyLogoColumn\CompanyLogoColumn;
   
   public static function table(Table $table): Table {
       return $table->columns([
           CompanyLogoColumn::make('website')
               ->tooltip(fn ($record) => $record->name),
       ]);
   }
   

First Use Case

Replace a plain TextColumn for URLs/domains with a visual logo column. For example, in a CompaniesTable resource, swap:

TextColumn::make('website')

for:

CompanyLogoColumn::make('website')
    ->tooltip(fn ($record) => $record->name)
    ->size(32)

Implementation Patterns

Core Workflow

1. Column Integration:

   • Replace any TextColumn or UrlColumn that displays domains/URLs.
   • Use the column’s state (e.g., website field) directly or override with a closure:

     CompanyLogoColumn::make('logo')
         ->domain(fn ($record) => $record->primary_url)
     

2. Styling & Behavior:

   • Chain methods for visual consistency:

     ->size(48)          // Pixel size (e.g., 40px default)
     ->theme('dark')     // Dark/light theme
     ->format('webp')    // Image format
     ->fallback('monogram') // Fallback mode
     ->lazy()            // Lazy-load images
     

   • Use tooltip() for hover tooltips (Filament’s built-in feature).

3. Dynamic Sources:

   • For non-standard fields (e.g., logo_url vs. domain), use the domain() method:

     CompanyLogoColumn::make('logo_url')
         ->domain(fn ($record) => parse_url($record->logo_url, PHP_URL_HOST))
     

Advanced Patterns

1. Conditional Rendering:

   • Disable logos for invalid domains via domain() closure:

     ->domain(fn ($record) => $record->website ?? null)
     

2. Global Defaults:

   • Override defaults in config/filament-company-logo-column.php:

     'defaults' => [
         'size' => 48,
         'theme' => 'dark',
     ],
     

3. Custom Placeholders:

   • Publish views (php artisan vendor:publish --tag=filament-company-logo-column-views) and extend the Blade template (resources/views/vendor/filament-company-logo-column/column.blade.php).

4. Performance:

   • Use lazy() for large tables to defer offscreen logo loading.
   • Cap size at 512px (Logo.dev’s max) to avoid oversized requests.

Gotchas and Tips

Pitfalls

1. Invalid Domains:

   • IPs, malformed URLs (e.g., example), or missing TLDs (e.g., google) render as placeholders. Validate input upstream:

     ->domain(fn ($record) => filter_var($record->website, FILTER_VALIDATE_DOMAIN) ?: null)
     

2. Missing API Key:

   • Without LOGO_DEV_PUBLISHABLE_KEY, the column shows a neutral placeholder. Test locally with:

     LOGO_DEV_PUBLISHABLE_KEY=pk_test_XXXXXX
     

3. Caching:

   • Logo.dev caches images aggressively. Clear browser cache or use ?v=2 to force refresh during development.

4. Dark Mode:

   • The theme('dark') option doesn’t auto-switch with prefers-color-scheme. Manually toggle based on user preference or Filament’s dark mode state.

Debugging

1. Broken Images:

   • Check the rendered HTML for src="https://img.logo.dev/...". Use browser dev tools to verify the URL resolves correctly.

2. Placeholder Overrides:

   • If the placeholder isn’t updating after publishing views, clear Laravel’s view cache:

     php artisan view:clear
     

3. Size Issues:

   • Logo.dev renders at 2× the requested size (capped at 512px). For a 48px column, it fetches a 96px image. Test with size(24) to debug scaling.

Tips

1. Tooltip Customization:

   • Use Filament’s tooltip() with rich content:

     ->tooltip(fn ($record) => view('filament.components.logo-tooltip', ['record' => $record]))
     

2. Clickable Logos:

   • Wrap the column in a LinkColumn for interactivity:

     LinkColumn::make('website')
         ->getStateUsing(fn ($record) => $record->website)
         ->icon(CompanyLogoColumn::make('website')->size(24))
     

3. Testing:

   • Mock Logo.dev responses in tests by overriding the HostnameNormalizer or using a local proxy (e.g., logo.dev’s test API).

4. Fallback Styling:

   • Customize the placeholder’s CSS in your app’s stylesheet:

     .filament-company-logo-column__placeholder {
         background: #f0f0f0;
         border-radius: 4px;
     }
     

5. Future-Proofing:

   • Monitor Logo.dev’s rate limits for high-traffic tables. Consider caching responses in a TableColumn subclass if needed.