Feature: Blog Post Cover Images Support

[solrevdev]

Blog Post Cover Images Feature

Overview

This issue tracks the implementation of cover image support for blog posts on solrevdev.com. The feature allows blog posts to display attractive cover images that scale responsively across all device sizes.

Feature Requirements

• Add cover_image front matter field support
• Responsive design for desktop, tablet, and mobile
• Support multiple image formats (SVG, PNG, JPG)
• Graceful fallback for posts without cover images
• Performance optimization and file size guidelines
• Comprehensive documentation

Implementation Details

The feature adds a new optional cover_image field to blog post front matter that displays responsive cover images above post content.

Technical Changes

• Jekyll Templates: Modified _layouts/post.html for conditional image display
• CSS Styles: Added responsive styles in public/css/custom.scss
• Configuration: Updated _config.yml to exclude agent markdown files
• Documentation: Created comprehensive guidelines in .github/copilot-instructions.md

Image Guidelines

• Formats: SVG (preferred), PNG, JPG all supported
• Recommended dimensions: 800x400px aspect ratio
• File size: Keep under 50KB for performance
• Storage: Place images in /images/ directory
• Responsive scaling: Automatic via CSS

Usage Example

---
layout: post
title: "My Blog Post"
description: "Post description"
cover_image: /images/my-cover-image.svg
tags: ["tag1", "tag2"]
---

Impact on Existing PRs

Two existing blog post PRs can be enhanced with cover images:

• PR docs(blog): add building winget search post #13: "building winget search post" (feature/blog-post-winget-search)
• PR feat(posts): add ytx .NET global tool tutorial blog post #10: "ytx .NET global tool tutorial" (feature/ytx-blog-post)

Next Steps

1. Merge cover image feature to master
2. Update existing blog post PRs with appropriate cover images
3. Create cover images for future blog posts

Related PR

Will be linked when PR is created.