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
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.
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).
Capell\WidgetBeforeAfter\Providers\WidgetBeforeAfterServiceProvider
BeforeAfterWidget
BeforeAfterInputDataBeforeAfterRenderData
asset: Capell\WidgetBeforeAfter\WidgetBeforeAfterContributioncontent-widget: Capell\WidgetBeforeAfter\WidgetBeforeAfterContribution
Capell\WidgetBeforeAfter\Health\WidgetBeforeAfterHealthCheck
packages/widget-before-after/resources/views/widget.blade.php
widget-before-after
This package has no schema impact. It extends Capell through asset contributions and content-widget contributions instead of declaring package-owned tables.
- 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.
- 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.
| 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 |
- 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.