README

💡 A Statamic Control Panel addon that provides a visual overview of your "Component" fieldsets, grouped and displayed by page section — including optional preview images.

✨ Features

Automatically discovers all fieldsets matching the (Component | Group) - Name pattern.
Groups components by page section (e.g., About, Home, etc.).
Displays component names, handles, and titles clearly in the control panel.
Extracts and displays preview images from looks field instructions, if available.
Helps content editors and developers get a quick visual inventory of reusable components.

💻 How It Works

The addon scans all fieldsets and identifies those with titles matching:

(Component | Group) - ComponentName

For example:

(Component | About) - Leadership
(Component | Home) - Hero

It then groups these into logical sections (About, Home, etc.), and extracts component details such as:

Name — e.g., Leadership, Hero
Handle — fieldset handle
Title — full title string
Preview image — optional, pulled from an <img> tag inside the instructions of the looks field

The grouped data is passed to a custom CP view, which displays a visual list of all components and their metadata.

🚀 Installation

composer require isaadsalman/section-view

⚙️ Usage

Ensure your fieldsets follow the naming convention:

(Component | Group) - ComponentName

Add an optional preview image:

In your fieldset YAML or builder, create a field named looks and include an image tag inside its instructions field. Example:

handle: looks
field:
  instructions: '<img src="/assets/components/leadership-preview.jpg" />'

Access the view:

After installation, navigate to the corresponding route in the Statamic Control Panel. You will see a grouped list of components with images (if provided).

🔐 Permissions

This addon includes fine-grained permissions to control access in the Control Panel:

view section view: Allows users to see and access the Section View navigation item and main overview page.
manage sections: Grants management permissions for sections.
- create sections: Allows creating new sections.
- edit sections: Allows editing existing sections.
- delete sections: Allows deleting sections.

You can assign these permissions to roles or individual users from Users → Roles → Permissions in the Statamic Control Panel.

🙌 Credits

Created by Isaad Salman — inspired by the need to make component management more visual and intuitive in Statamic.

📄 License

MIT License. See LICENSE for details.

isaadsalman / section-view

Maintainers

Details