fix-blog-images
Fix Blog Images
Fixes image issues in uncommitted blog posts before publishing.
Workflow
- Run the analysis script:
python3 scripts/fix_blog_images.py --json
-
Review output and for each issue:
- rename_and_move: Move image to
/images/blog/with descriptive name - improve_alt_text: Update alt text to describe the image content
- missing_image: Locate or remove the reference
- rename_and_move: Move image to
-
Apply fixes:
- Move/rename image files to
packages/blog/public/images/blog/ - Update markdown references to use absolute paths
/images/blog/... - Add descriptive alt text
- Move/rename image files to
Image Conventions
- Location: All images in
packages/blog/public/images/blog/ - Naming:
YYYYMMDD-HHMM-descriptive-name.pngorYYYYMMDD-descriptive-name.png - References: Use absolute paths
/images/blog/filename.png - Alt text: Describe what the image shows for accessibility
Example Fix
Before:

After:

Addtional Notes
Don't try and Optimize Images. a git hook will run image optimization on commit. This skill is just to fix paths, names, and alt text before committing.
More from christowles/blog
nuxt-v4
|
23slidev
Create and edit presentation slides using Slidev framework when user requests slides, presentations, or deck modifications
17blog-mermaid
Create mermaid diagrams for blog posts using the blog's sky/zinc color theme. Use when adding flowcharts, sequence diagrams, or other mermaid visualizations to blog content.
16blog-04-image-prompt
Generate optimized AI image prompts for blog post hero images
14blog-02-write-post
Create a new technical blog post with deep educational value and professional quality
12blog-03-review
Review and improve the blog post draft for clarity, engagement, and authentic voice.
11