README

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
Import/Export functionality (CSV and Laravel migration formats)

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

Create, edit, and delete portfolio entries
Upload before and after images
Categorize entries by type
Control spacing and ordering
Publish/unpublish entries

Import/Export

The package includes powerful import/export functionality for backing up, migrating, and managing portfolio content.

Available Operations:

CSV Export - Export portfolios with before/after images to ZIP file
CSV Import - Import portfolios from ZIP file with images
Migration Export - Export as production-ready Laravel migration with markdown files

Access in Filament:

Navigate to Portfolio → Entries in your admin panel
Click "Import Portfolios" (top-right) to import from ZIP
Select portfolios and use "Bulk actions" dropdown for export options

For Complete Documentation: See IMPORT_EXPORT.md for:

Detailed file format specifications
Step-by-step workflows and use cases
Migration installation instructions
Troubleshooting guide
Best practices for backup and deployment

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')

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

For specific portfolio types

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

<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' => 'public',
    ],

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
League CSV 9.0 or higher
Symfony YAML 6.0 or higher

Credits

License

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

fuelviews / laravel-sabhero-portfolio

Maintainers

Details