SabHero Portfolio Package

A Laravel package for managing and displaying before/after image portfolios with a dynamic slider component. Perfect for renovation projects, home improvements, design transformations, or any visual comparison showcase.

Features

• Filament admin panel integration for easy content management
• Before/After interactive slider component
• Customizable portfolio types with Filament UI integration
• Responsive image handling with transparent PNG support
• Configurable media storage disk support
• Livewire components for seamless frontend integration

Installation

You can install the package via composer:

composer require fuelviews/laravel-sabhero-portfolio

You can publish and run the migrations with:

php artisan vendor:publish --tag="sabhero-portfolio-migrations"
php artisan migrate

You can publish the config file with:

php artisan vendor:publish --tag="sabhero-portfolio-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="sabhero-portfolio-views"

Integration

1. Attach to Filament Panel

Add the SabHero Portfolio plugin to your Filament panel provider:

use Fuelviews\SabHeroArticle\Facades\SabHeroPortfolio;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            SabHeroPortfolio::make()
        ]);
}

Usage

Admin Panel

After installation, you'll find a new "Portfolio" section in your Filament admin panel where you can

1. Create, edit, and delete portfolio entries
2. Upload before and after images
3. Categorize entries by type
4. Control spacing and ordering
5. Publish/unpublish entries

Frontend Display

You can display the before/after slider in your Blade views using Livewire:

For all portfolio types

@livewire('sabhero-portfolio::before-after-slider')

Or

<livewire:sabhero-portfolio::before-after-slider />

For specific portfolio types

@livewire('sabhero-portfolio::before-after-slider', ['type' => 'commercial'])

Or

<livewire:sabhero-portfolio::before-after-slider type="commercial" />

Custom Portfolio Types

You can define custom portfolio types in the configuration file. Each type requires:

• A unique key (used in the database)
• A label (displayed in the UI, stored in lowercase)
• A color (used in the Filament admin panel)

Custom Media Storage

By default, the package uses the disk configured in your Spatie Media Library config. You can override this in the package config

// config/sabhero-portfolio.php
'media_disk' => 's3',

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Requirements

• PHP 8.3 or higher
• Laravel 10.0 or higher
• Filament 3.0 or higher
• Spatie Media Library 10.0 or higher

Credits

• Joshua Mitchener
• Daniel Clark
• Fuelviews
• All Contributors

License

The MIT License (MIT). Please see License File for more information.