Testing Improved Hero Image System

Published: July 7, 2024

Testing Improved Hero Image System

Testing the Improved Hero Image System

This post demonstrates the new, more author-friendly hero image system that allows direct use of images from src/assets/images/blog/heroes/.

What’s New?

Before (Complex Mapping System)

Authors had to:

  1. Use predefined image mappings
  2. Navigate complex mapping relationships
  3. Understand which sample image their content would use

After (Direct Image System)

Authors can now:

  1. Place hero images directly in src/assets/images/blog/heroes/
  2. Use descriptive filenames like azure-deployment-hero.png
  3. Add once, use everywhere - update ResponsiveImage.astro once per image
  4. Reuse across posts - same hero image can be used in multiple blog posts

Hero Images Available

The system now includes several ready-to-use hero images:

Benefits for Authors

1. Clearer File Organization

src/assets/images/blog/heroes/
├── azure-deployment-hero.png    # Descriptive names
├── development-hero.png         # Easy to understand
└── my-custom-hero.jpg           # Add your own

2. Simpler Workflow

---
title: "My Blog Post"
heroImage: "azure-deployment-hero"  # Just use the image name
---

3. Better Performance

Adding Your Own Hero Images

Adding a custom hero image is straightforward:

  1. Add your image to src/assets/images/blog/heroes/
  2. Update ResponsiveImage.astro with one import and one line
  3. Use in any blog post with the image key
Example of code organization

Testing Different Hero Images

This post uses the azure-deployment-hero image. Other posts can use:

The system maintains full backward compatibility while providing a much cleaner authoring experience.

Conclusion

The improved hero image system strikes the right balance between:

This makes it much easier for authors to create visually appealing blog posts without wrestling with complex mapping systems.