Before and After Widget
Package docs status
Section titled “Package docs status”This page is generated from package source documentation in the Capell packages repository and the checked-in manifest. Source documentation is not distribution status. Before running a Composer command, verify that the exact package and compatible 1.x release are available through public Packagist or the authenticated marketplace account.
| Field | Value |
|---|---|
| Composer package | capell-app/widget-before-after |
| Package slug | widget-before-after |
| Product group | Capell Foundation |
| Tier | free |
| Bundle | foundation |
| Runtime contexts | admin, frontend |
| Capell version | ^1.0 |
| Catalogue role | extension |
| Release channel | Beta |
| Source repository | capell-app/packages |
| Source path | packages/widget-before-after |
| Docs source | packages/widget-before-after/docs |
| Manifest | capell.json |
What This Plugin Adds
Section titled “What This Plugin Adds”Before and After Widget is an Available, No schema impact Capell package in the Capell Foundation product group. It ships as capell-app/widget-before-after and extends these surfaces: admin, frontend.
Before and After adds a Layout Builder widget for comparing two local images with a bounded range control. The public comparison supports keyboard and touch interaction with a non-interactive fallback.
Editors select the two images and comparison settings in Layout Builder, and visitors can move the public reveal control to inspect the difference.
Status details:
- Status: Available
- Tier: free
- Bundle: foundation
- Composer package:
capell-app/widget-before-after - Namespace:
Capell\WidgetBeforeAfter - Theme key: not applicable
Why It Matters
Section titled “Why It Matters”For developers: A typed widget definition keeps editor input, render data, and the Blade fallback behind one registered Layout Builder extension.
For teams: Teams can explain visual changes in one focused component without preparing separate image states or custom comparison code.
Screens And Workflow
Section titled “Screens And Workflow”Screenshot contract: docs/screenshots.json.
- Before and After Widget extension card (marketplace, supplementary documentation fixture).
- Before + After fields in Layout Builder (admin, supplementary evidence).
- Before After public output (frontend, required evidence).
- Before + After fields in Layout Builder with admin sidebar menu open (admin, supplementary evidence).
Technical Shape
Section titled “Technical Shape”Service providers
Section titled “Service providers”Capell\WidgetBeforeAfter\Providers\WidgetBeforeAfterServiceProvider
Filament classes
Section titled “Filament classes”BeforeAfterWidget
Data objects
Section titled “Data objects”BeforeAfterInputDataBeforeAfterRenderData
Manifest contributions
Section titled “Manifest contributions”asset: Capell\WidgetBeforeAfter\WidgetBeforeAfterContributioncontent-widget: Capell\WidgetBeforeAfter\WidgetBeforeAfterContribution
Health checks
Section titled “Health checks”Capell\WidgetBeforeAfter\Health\WidgetBeforeAfterHealthCheck
Blade views
Section titled “Blade views”packages/widget-before-after/resources/views/widget.blade.php
Cache tags
Section titled “Cache tags”widget-before-after
Data Model
Section titled “Data Model”This package has no schema impact. It extends Capell through asset contributions and content-widget contributions instead of declaring package-owned tables.
Install Impact
Section titled “Install Impact”- Required packages:
capell-app/admin,capell-app/core,capell-app/frontend,capell-app/layout-builder. - Admin navigation: no admin page or resource contribution is declared.
- Admin/editor extensions:
content-widget: WidgetBeforeAfterContribution. - Permissions: no package permission declarations or Shield gates detected; host access rules still apply.
- Public routes: none declared.
- Database changes: no package migrations declared.
- Config: no package config files.
- Settings: no package settings declared.
- Queues or schedules: none declared.
- Cache tags:
widget-before-after. - Commands: none declared.
Common Pitfalls
Section titled “Common Pitfalls”- Keep required Capell packages on compatible v4 releases:
capell-app/admin,capell-app/core,capell-app/frontend,capell-app/layout-builder. - Keep public Blade and cached HTML free of authoring markers, model IDs, permissions, signed editor URLs, and lazy database queries.
- Custom write integrations must preserve invalidation for
widget-before-aftercache tags.
Troubleshooting
Section titled “Troubleshooting”| Symptom | Likely cause | Check | Fix |
|---|---|---|---|
| Package surface is missing after install | Provider or manifest is not loaded | Confirm capell.json, package composer.json, and provider registration | Reinstall the package, refresh Composer autoload, and clear host caches |
| Public output leaks unexpected state | Render data, cache variation, or authoring boundary has regressed | Check public Blade, cache tags, and public-output safety tests | Move data loading out of Blade and rerun the package public-output tests |
Quick Start
Section titled “Quick Start”- Install the package:
composer require capell-app/widget-before-after. - Open a host admin workflow that uses the package extension and verify Before and After Widget is available.