docs: add editor and frontend screenshots to readmes

Add the two screenshots from the assets/ folder to both README.md (GitHub) and readme.txt (WordPress.org), and commit the assets/ directory so the relative image references resolve.
2026-08-06 18:41:49 -05:00
parent 3a2d01564e
commit 17c6e5b3dd
4 changed files with 28 additions and 0 deletions
@@ -29,6 +29,20 @@ This WordPress plugin registers a new "Filtered Image" block that lets users pic
 - **Non-destructive** – Filters are applied with CSS only; original images remain unchanged
 - **Accessibility** – Alt text is preserved on filtered images

+## Screenshots
+
+### Editor
+
+The block's inspector panel in the WordPress block editor. The filter swatch grid sits in the right-hand sidebar alongside the intensity slider.
+
+![Editor view showing the filter swatches and intensity slider in the sidebar](assets/editor-screenshot.png)
+
+### Frontend
+
+All eight filter presets applied to the same image, side by side. From left to right, top to bottom: Normal, Warm, Cool, Vivid, Fade, Mono, Dramatic, Sepia.
+
+![Grid of all eight filter presets applied to a stock image](assets/frontend-screenshot.png)
+
 ## Development

 ### Setup
@@ -17,6 +17,20 @@ named filter preset and adjust its intensity. Filters are applied with CSS
 only, so they are reversible, lightweight, and the original image keeps
 its alt text.

+== Screenshots ==
+
+1. The block's inspector panel in the WordPress block editor. The filter
+   swatch grid sits in the right-hand sidebar alongside the intensity
+   slider.
+
+   ![Editor view showing the filter swatches and intensity slider in the sidebar](assets/editor-screenshot.png)
+
+2. All eight filter presets applied to the same image, side by side. From
+   left to right, top to bottom: Normal, Warm, Cool, Vivid, Fade, Mono,
+   Dramatic, Sepia.
+
+   ![Grid of all eight filter presets applied to a stock image](assets/frontend-screenshot.png)
+
 == Changelog ==

 = 0.1.0 =