Skip to content

Commit 31fc5ad

Browse files
mstrhakrmstrhakr
committed
Add screenshot crop utilities and integrate new screenshots
- Add CSS crop classes for runtime image cropping in custom.scss - Add plugins-install-withFile.png screenshot - Use cropped versions throughout docs to highlight specific UI elements: - Tab interface in tab-pages.md - Input field styling in form-controls.md - Success messages in notifications-system.md and getting-started.md - Plugin row detail in introduction.md - Error detail in plg-file.md - Update badge and file picker in plugin-command.md - Update screenshots README with new file
1 parent 916cc47 commit 31fc5ad

11 files changed

Lines changed: 257 additions & 120 deletions

File tree

‎_sass/custom/custom.scss‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,3 +63,158 @@ table {
6363
background: rgba(255, 255, 255, 0.02);
6464
}
6565
}
66+
67+
// ============================================
68+
// Screenshot Crop Utilities
69+
// ============================================
70+
// Use: ![alt](image.png){: .crop-pluginsInstalled-tabs }
71+
72+
// Base styles for all cropped images
73+
[class*="crop-"] {
74+
display: block;
75+
width: 100%;
76+
object-fit: cover;
77+
border-radius: 6px;
78+
margin: 1rem 0;
79+
}
80+
81+
// --------------------------------------------
82+
// plugins-installed.png crops
83+
// Full page: 1920x~1080 typical
84+
// --------------------------------------------
85+
.crop-pluginsInstalled-tabs {
86+
// Show just the Installed/Install tabs area
87+
object-position: top center;
88+
height: 120px;
89+
}
90+
91+
.crop-pluginsInstalled-row {
92+
// Show a single plugin row (header + one row)
93+
object-position: 0 15%;
94+
height: 150px;
95+
}
96+
97+
.crop-pluginsInstalled-actions {
98+
// Show the right side with action buttons
99+
object-position: right 20%;
100+
height: 120px;
101+
width: 60%;
102+
margin-left: auto;
103+
}
104+
105+
// --------------------------------------------
106+
// plugins-install.png crops
107+
// --------------------------------------------
108+
.crop-pluginsInstall-urlField {
109+
// Just the URL input area
110+
object-position: center 40%;
111+
height: 180px;
112+
}
113+
114+
.crop-pluginsInstall-tabs {
115+
// The Install Plugin tab header
116+
object-position: top center;
117+
height: 100px;
118+
}
119+
120+
// --------------------------------------------
121+
// plugins-install-withUrl.png crops
122+
// --------------------------------------------
123+
.crop-pluginsInstallUrl-input {
124+
// Focus on the filled URL field
125+
object-position: center 35%;
126+
height: 200px;
127+
}
128+
129+
// --------------------------------------------
130+
// plugins-install-withFile.png crops
131+
// --------------------------------------------
132+
.crop-pluginsInstallFile-picker {
133+
// Focus on the file picker area
134+
object-position: center 40%;
135+
height: 200px;
136+
}
137+
138+
// --------------------------------------------
139+
// plugins-install-complete.png crops
140+
// --------------------------------------------
141+
.crop-pluginsComplete-message {
142+
// Just the success message
143+
object-position: center center;
144+
height: 200px;
145+
}
146+
147+
// --------------------------------------------
148+
// plugins-errors.png crops
149+
// --------------------------------------------
150+
.crop-pluginsErrors-single {
151+
// Show single error entry detail
152+
object-position: center 30%;
153+
height: 180px;
154+
}
155+
156+
.crop-pluginsErrors-header {
157+
// Show errors tab header
158+
object-position: top center;
159+
height: 120px;
160+
}
161+
162+
// --------------------------------------------
163+
// plugins-installed-updateAvailable.png crops
164+
// --------------------------------------------
165+
.crop-update-badge {
166+
// Focus on the update available indicator
167+
object-position: center 25%;
168+
height: 150px;
169+
}
170+
171+
// --------------------------------------------
172+
// plugins-installed-updateCheckComplete.png crops
173+
// --------------------------------------------
174+
.crop-updateCheck-status {
175+
// Show the check complete status
176+
object-position: center 20%;
177+
height: 150px;
178+
}
179+
180+
// --------------------------------------------
181+
// plugins-installed-updateComplete.png crops
182+
// --------------------------------------------
183+
.crop-updateComplete-message {
184+
// Show the update complete message
185+
object-position: center center;
186+
height: 200px;
187+
}
188+
189+
// --------------------------------------------
190+
// Generic/Reusable crops
191+
// --------------------------------------------
192+
.crop-top-third {
193+
object-position: top center;
194+
height: 33vh;
195+
max-height: 300px;
196+
}
197+
198+
.crop-center-band {
199+
object-position: center center;
200+
height: 250px;
201+
}
202+
203+
.crop-bottom-third {
204+
object-position: bottom center;
205+
height: 33vh;
206+
max-height: 300px;
207+
}
208+
209+
// Size modifiers (combine with crops)
210+
.img-half {
211+
max-width: 50%;
212+
}
213+
214+
.img-two-thirds {
215+
max-width: 66%;
216+
}
217+
218+
.img-small {
219+
max-width: 400px;
220+
}

‎assets/images/screenshots/README.md‎

Lines changed: 45 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -17,128 +17,70 @@ This folder contains screenshots used throughout the Unraid Plugin Development d
1717

1818
---
1919

20-
## Required Screenshots
20+
## Available Screenshots
21+
22+
These screenshots are ready to use:
23+
24+
| Filename | Description |
25+
|----------|-------------|
26+
| ✅ `plugins-installed.png` | Installed Plugins tab with plugin list |
27+
| ✅ `plugins-installed-updateAvailable.png` | Plugins page showing update available |
28+
| ✅ `plugins-installed-updateCheckComplete.png` | After checking for updates |
29+
| ✅ `plugins-installed-updateComplete.png` | After completing an update |
30+
| ✅ `plugins-install.png` | Install Plugin tab |
31+
| ✅ `plugins-install-withUrl.png` | Install Plugin with URL entered |
32+
| ✅ `plugins-install-withFile.png` | Install Plugin with file selected |
33+
| ✅ `plugins-install-complete.png` | Plugin installation complete message |
34+
| ✅ `plugins-errors.png` | Plugin File Install Errors tab |
2135

22-
Screenshots are organized by content type. Each can be reused across multiple documentation pages.
23-
24-
### Unraid Plugin Pages
25-
26-
| Status | Filename | Description | Used In |
27-
|:------:|----------|-------------|---------|
28-
| ✅ | `plugins-installed.png` | Installed Plugins tab showing plugin list with names, descriptions, authors, versions, status | Homepage, Introduction |
29-
| ⬜ | `plugins-details.png` | Plugin details/info panel showing version, author, support link, changelog | PLG File Reference |
30-
| ⬜ | `plugins-installing.png` | Terminal or UI showing plugin installation in progress with download/extraction | Getting Started, Plugin Command |
31-
32-
### Settings & Forms
33-
34-
| Status | Filename | Description | Used In |
35-
|:------:|----------|-------------|---------|
36-
| ⬜ | `settings-page-example.png` | A typical plugin settings page with Dynamix form styling (labels, inputs, help text, buttons) | Getting Started, Page Files, Form Controls |
37-
| ⬜ | `settings-display.png` | Unraid Display Settings page (date format, temp scale, theme options) | Dynamix Framework |
38-
| ⬜ | `form-toggle.png` | Yes/No dropdown toggle and/or CSS toggle switch | Form Controls |
39-
| ⬜ | `form-file-picker.png` | File tree picker expanded showing /mnt/user/ hierarchy | Form Controls |
40-
| ⬜ | `form-share-dropdown.png` | Share selector dropdown populated with share names | Form Controls |
41-
42-
### Menu & Navigation
43-
44-
| Status | Filename | Description | Used In |
45-
|:------:|----------|-------------|---------|
46-
| ⬜ | `sidebar-menu.png` | Unraid sidebar showing menu sections (Main, Settings, Tools, Utilities) with plugin entries | Page Files, Icons & Styling |
47-
| ⬜ | `header-menu.png` | Header bar showing xmenu items (Docker, VMs, or custom plugin) | Page Files |
48-
| ⬜ | `tabs-interface.png` | A plugin with multiple tabs (General, Advanced, About) | Tab Pages |
49-
50-
### Dashboard
51-
52-
| Status | Filename | Description | Used In |
53-
|:------:|----------|-------------|---------|
54-
| ⬜ | `dashboard-tiles.png` | Dashboard showing plugin tiles (status, metrics, action buttons) | Dashboard Tiles |
55-
56-
### Notifications
57-
58-
| Status | Filename | Description | Used In |
59-
|:------:|----------|-------------|---------|
60-
| ⬜ | `notifications-panel.png` | Notification panel showing normal (blue), warning (yellow), alert (red) examples | Notifications System |
61-
62-
### Terminal / Command Line
63-
64-
| Status | Filename | Description | Used In |
65-
|:------:|----------|-------------|---------|
66-
| ⬜ | `terminal-plugin-help.png` | Output of `plugin` command showing help/usage | Plugin Command |
67-
| ⬜ | `terminal-syslog.png` | Syslog output with plugin messages (logger output, event execution) | Events, Debugging |
68-
| ⬜ | `terminal-boot-plugins.png` | File listing of /boot/config/plugins/ directory | File System |
69-
| ⬜ | `terminal-emhttp-plugins.png` | File listing of /usr/local/emhttp/plugins/[plugin]/ structure | File System |
70-
71-
### Browser DevTools
72-
73-
| Status | Filename | Description | Used In |
74-
|:------:|----------|-------------|---------|
75-
| ⬜ | `devtools-network.png` | DevTools Network tab showing WebSocket/EventSource connection or AJAX requests | nchan/WebSocket, Debugging |
76-
77-
### Themes
78-
79-
| Status | Filename | Description | Used In |
80-
|:------:|----------|-------------|---------|
81-
| ⬜ | `theme-comparison.png` | Same plugin page in light vs dark theme (side-by-side or collage) | Icons & Styling, Dynamix Framework |
82-
83-
### External / GitHub
84-
85-
| Status | Filename | Description | Used In |
86-
|:------:|----------|-------------|---------|
87-
| ⬜ | `github-release.png` | GitHub releases page with .txz and .plg files as assets | Getting Started, Build & Packaging |
88-
| ⬜ | `github-actions.png` | GitHub Actions workflow running (build/release steps) | Build & Packaging |
89-
90-
### Community Applications
91-
92-
| Status | Filename | Description | Used In |
93-
|:------:|----------|-------------|---------|
94-
| ⬜ | `ca-browser.png` | CA plugin browser showing categories, search, plugin cards | Community Applications |
95-
| ⬜ | `ca-plugin-icons.png` | Plugin icons as displayed in CA (showing good icon examples) | Community Applications |
36+
---
9637

97-
### Example Plugins
38+
## Still Needed
9839

9940
| Status | Filename | Description | Used In |
10041
|:------:|----------|-------------|---------|
101-
| ⬜ | `example-plugins.png` | Collage/grid of popular plugin UIs (Compose Manager, User Scripts, etc.) | Examples |
42+
| ⬜ | `plugins-details.png` | Plugin details/info panel (click on a plugin name) | PLG File Reference |
43+
| ⬜ | `settings-page-example.png` | A plugin settings page with form controls | Getting Started, Page Files, Form Controls |
44+
| ⬜ | `settings-display.png` | Unraid Display Settings page | Dynamix Framework |
45+
| ⬜ | `form-toggle.png` | Yes/No dropdown or toggle switch | Form Controls |
46+
| ⬜ | `form-file-picker.png` | File tree picker expanded | Form Controls |
47+
| ⬜ | `form-share-dropdown.png` | Share selector dropdown | Form Controls |
48+
| ⬜ | `sidebar-menu.png` | Sidebar showing menu sections with plugins | Page Files, Icons & Styling |
49+
| ⬜ | `header-menu.png` | Header bar showing Docker/VMs/custom xmenu | Page Files |
50+
| ⬜ | `tabs-interface.png` | A plugin with multiple tabs | Tab Pages |
51+
| ⬜ | `dashboard-tiles.png` | Dashboard with plugin tiles | Dashboard Tiles |
52+
| ⬜ | `notifications-panel.png` | Notifications (normal/warning/alert) | Notifications System |
53+
| ⬜ | `terminal-plugin-help.png` | Output of `plugin` command | Plugin Command |
54+
| ⬜ | `terminal-syslog.png` | Syslog with plugin/event messages | Events, Debugging |
55+
| ⬜ | `terminal-boot-plugins.png` | `ls /boot/config/plugins/` | File System |
56+
| ⬜ | `terminal-emhttp-plugins.png` | `ls /usr/local/emhttp/plugins/[name]/` | File System |
57+
| ⬜ | `devtools-network.png` | Browser DevTools Network tab | nchan/WebSocket, Debugging |
58+
| ⬜ | `theme-comparison.png` | Light vs dark theme comparison | Icons & Styling, Dynamix |
59+
| ⬜ | `github-release.png` | GitHub releases with .txz/.plg assets | Getting Started, Build |
60+
| ⬜ | `github-actions.png` | GitHub Actions workflow running | Build & Packaging |
61+
| ⬜ | `ca-browser.png` | Community Applications browser | Community Applications |
62+
| ⬜ | `ca-plugin-icons.png` | Plugin icons in CA | Community Applications |
63+
| ⬜ | `example-plugins.png` | Collage of popular plugin UIs | Examples |
10264

10365
---
10466

10567
## Summary
10668

107-
| Category | Count |
108-
|----------|:-----:|
109-
| Unraid Plugin Pages | 3 |
110-
| Settings & Forms | 5 |
111-
| Menu & Navigation | 3 |
112-
| Dashboard | 1 |
113-
| Notifications | 1 |
114-
| Terminal / CLI | 4 |
115-
| Browser DevTools | 1 |
116-
| Themes | 1 |
117-
| External / GitHub | 2 |
118-
| Community Applications | 2 |
119-
| Example Plugins | 1 |
120-
| **TOTAL** | **24** |
69+
- **Available**: 8 screenshots ✅
70+
- **Still needed**: 22 screenshots
71+
- **Total**: 30 screenshots
12172

12273
---
12374

12475
## How Screenshots Are Used
12576

12677
The same screenshot can appear in multiple documentation pages. For example:
127-
- `settings-page-example.png` → Getting Started, Page Files, Form Controls
128-
- `terminal-syslog.png` → Events, Debugging
12978
- `plugins-installed.png` → Homepage, Introduction
130-
131-
This reduces the total number of screenshots needed from 41 to **24**.
132-
133-
---
79+
- `plugins-install-complete.png` → Getting Started
80+
- `terminal-syslog.png` → Events, Debugging
13481

13582
## Updating the Checklist
13683

13784
When you add a screenshot:
138-
1. Change `⬜` to `✅` in the Status column
85+
1. Move it from "Still Needed" to "Available Screenshots"
13986
2. Commit both the image and this updated README
140-
3. The documentation will automatically display your new screenshot
141-
142-
## Questions?
143-
144-
Open an issue on the [GitHub repository](https://github.com/mstrhakr/unraid-plugin-docs/issues) if you need clarification.

‎assets/images/screenshots/plugins-install-withFile.png‎

98.8 KB
Loading

‎docs/core/notifications-system.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@ The notification system is accessed via the `notify` script:
4949
| `warning` | ⚠️ Yellow warning | Issues requiring attention, non-critical problems |
5050
| `alert` | 🚨 Red alert | Critical errors, failures, security issues |
5151

52+
The plugin system shows success messages like this:
53+
54+
![Success message example](../assets/images/screenshots/plugins-install-complete.png){: .crop-pluginsComplete-message }
55+
5256
{: .placeholder-image }
5357
> 📷 **Screenshot needed:** *Notification panel showing different importance levels*
5458
>

‎docs/getting-started.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -240,10 +240,11 @@ Note the MD5 output and update your PLG file.
240240
3. Check for errors in the console output
241241
4. Navigate to Settings → Hello World
242242

243-
{: .placeholder-image }
244-
> 📷 **Screenshot needed:** *Plugin installation in progress or success message*
245-
>
246-
> ![Plugin installation](../assets/images/screenshots/plugins-install-complete.png)
243+
![Plugin installation complete](../assets/images/screenshots/plugins-install-complete.png)
244+
245+
The success message confirms your plugin installed correctly:
246+
247+
![Installation success detail](../assets/images/screenshots/plugins-install-complete.png){: .crop-pluginsComplete-message }
247248

248249
### Test Changes Without Reinstalling
249250

‎docs/introduction.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ An Unraid plugin is an extension that adds functionality to your Unraid server.
1818
- Integrate with Docker and VM management
1919
- Provide settings pages for configuration
2020

21-
{: .placeholder-image }
22-
> 📷 **Screenshot needed:** *The Unraid Plugins page showing installed plugins*
23-
>
24-
> ![Plugins page overview](../assets/images/screenshots/plugins-installed.png)
21+
![Unraid Plugins page](../assets/images/screenshots/plugins-installed.png)
22+
23+
Each plugin row shows the name, version, and available actions:
24+
25+
![Plugin row detail](../assets/images/screenshots/plugins-installed.png){: .crop-pluginsInstalled-row }
2526

2627
## How Plugins Work
2728

‎docs/plg-file.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -410,6 +410,14 @@ https://raw.githubusercontent.com/user/repo/branch/plugin.plg
410410

411411
## Troubleshooting
412412

413+
When plugins encounter errors during installation or removal, Unraid displays detailed error information in the Plugins page:
414+
415+
![Plugin error display showing installation failures]({{ site.baseurl }}/assets/images/screenshots/plugins-errors.png)
416+
417+
Error entries show the specific issue that occurred:
418+
419+
![Error detail]({{ site.baseurl }}/assets/images/screenshots/plugins-errors.png){: .crop-pluginsErrors-single }
420+
413421
### Plugin Won't Install
414422

415423
1. Check XML syntax - use an XML validator

0 commit comments

Comments
 (0)