feat: Add responsive cover image support for blog posts #15
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add cover_image front matter field to latest blog post - Create sample SVG cover image for SeedFolder evolution post - Update post.html layout to display cover images when present - Add responsive CSS styles for cover images with mobile optimization - Include hover effects and proper styling for desktop and mobile views 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Create claude.md with cover image implementation notes - Add GitHub Copilot instructions with local development guidelines - Document image URL behavior during local development - Include responsive design breakpoints and testing procedures - Remove test file after validation Key insight: Use localhost/127.0.0.1 domains for proper image display during local development, as relative paths work with file:// protocol but absolute paths fail without a running server. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Update documentation with comprehensive size handling guidelines - Configure Jekyll to exclude agent markdown files from build process - Add case-insensitive exclusions for claude.md, warp.md, agent.md variants - Remove test files and ensure clean production state - Update GitHub Copilot instructions with production guidelines - Cover images now fully responsive and production-tested Features: - Automatic responsive scaling (400px desktop, 250px tablet, 200px mobile) - Support for SVG (preferred), PNG, JPG formats - Graceful handling of posts without cover images - Minimal performance impact (2.3KB typical SVG) - Comprehensive testing across all device sizes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove temporary test images that were created during cover image implementation testing. These files are no longer needed in the repository. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This was referenced Sep 28, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Blog Post Cover Images Feature
Summary
Adds responsive cover image support for blog posts with graceful fallbacks and comprehensive documentation.
Key Features
Technical Implementation
Files Modified
_layouts/post.html: Added conditional cover image displaypublic/css/custom.scss: Responsive CSS with breakpoints and hover effects_config.yml: Updated Jekyll exclusions for agent markdown files.github/copilot-instructions.md: Production-ready usage guidelinesclaude.md: Comprehensive development documentationUsage
Add to any blog post front matter:
Image Guidelines
/images/directoryTesting Results
Impact on Existing PRs
Immediate Enhancement Opportunities
Two existing blog post PRs can be enhanced with cover images:
Enhancement Process
For existing PRs, simply add to front matter:
Local Development Notes
During local development, images display properly when:
bundle exec jekyll serve --host 127.0.0.1 --port 4000http://localhost:4000orhttp://127.0.0.1:4000Test Plan
Related Issue
Closes #14
🤖 Generated with Claude Code