# Impact Module - Image Style Configuration

## Overview
The Impact module includes pre-configured image styles for optimal display of magazine issues and articles. All images come from the `field_article_image` field on Impact Article nodes.

## ✅ Included Image Styles

All image styles are configured with Focal Point support for intelligent cropping. The configuration files are located in `/config/install/`.

### Core Styles

### 1. impact_hero
**Purpose**: Hero background image for both Impact Issue pages and individual Article pages  
**Used by**: First featured article's image on Issue page, Article's own image on Article page  
**Dimensions**: 1920x400  
**Settings**:
- Scale and crop
- Focal point support recommended
- High quality (85-90%)

### 2. impact_featured_secondary  
**Purpose**: Secondary featured articles (positions 2-4) on Issue homepage  
**Used by**: Articles 2, 3, and 4 in `field_featured_articles`  
**Dimensions**: 400x225 (16:9 aspect ratio)  
**Settings**:
- Scale and crop
- Focal point support recommended
- Standard quality (80%)

### 3. impact_department_card
**Purpose**: Department article cards on Issue homepage  
**Used by**: Articles in `field_departments_articles`  
**Dimensions**: 300x169 (16:9 aspect ratio)  
**Settings**:
- Scale and crop  
- Standard quality (80%)

### 4. impact_article_inline
**Purpose**: Inline images within article body content (future use)
**Dimensions**: 800x450 (16:9 aspect ratio)
**Settings**:
- Focal point scale and crop
- High quality (85%)
**Note**: Reserved for future implementation when editors need to insert images into article body fields

## How Image Reuse Works

The same `field_article_image` is used in multiple contexts:

1. **As Hero Image on Issue Page**: The first featured article's image becomes the hero background
2. **As Card Image on Issue Page**: The same image is NOT shown again in the featured section (avoiding duplication)
3. **As Hero Image on Article Page**: When viewing the article directly, its image is used as the hero background
4. **Different Styles for Different Positions**: 
   - First featured article → `impact_hero` style
   - Other featured articles → `impact_featured_secondary` style
   - Department articles → `impact_department_card` style

## Installation

The image styles are automatically created when the module is installed. They will appear at **Configuration > Media > Image styles** (`/admin/config/media/image-styles`).

### Prerequisites
- **Focal Point module**: Must be installed and enabled before installing the Impact module
- **Image toolkit**: Ensure GD or ImageMagick is configured

### Manual Creation (if needed)
If styles need to be recreated:

1. Navigate to **Configuration > Media > Image styles** (`/admin/config/media/image-styles`)
2. Click **Add image style** for each style above
3. Add the **Scale and crop** effect with specified dimensions
4. If Focal Point module is installed, use **Focal point scale and crop** instead
5. Save each image style

## Responsive Images

Responsive behavior is handled via CSS rather than separate image styles. The `impact_hero` style creates a high-resolution image (1920x400) that scales down gracefully on smaller devices through CSS media queries. This approach:

- Simplifies image management (one image per context)
- Reduces server processing overhead
- Maintains visual quality across devices
- Uses CSS `object-fit: cover` for proper scaling

## Testing Image Styles

After creating the image styles:

1. Create a test Impact Issue with featured articles
2. Upload images to the articles  
3. View the Issue page to verify:
   - Hero image displays correctly
   - Secondary featured articles show proper thumbnails
   - Department cards have consistent sizing
4. Click through to an article to verify:
   - Article hero image displays correctly
   - Same image is reused appropriately

## Notes

- **Focal Point Module**: Highly recommended for better automatic cropping
- **Image Quality**: Balance quality with file size for performance
- **CDN/Image Optimization**: Consider using image optimization services
- **Lazy Loading**: Already implemented in templates for better performance

## Troubleshooting

If images don't display correctly:

1. **Clear Drupal cache**: `drush cr`
2. **Verify image style exists**: Check at `/admin/config/media/image-styles`
3. **Check permissions**: Ensure web server can write to `sites/default/files/styles`
4. **Regenerate derivatives**: Use Drush: `drush image:derive impact_hero`
5. **Check template syntax**: Verify image style name matches exactly

## Future Considerations

- **Different hero images for different article types**: Department and Inside APTA articles may need different hero image treatments (to be defined)
- **Video headers**: Consider supporting video backgrounds for hero sections
- **WebP format**: Consider adding WebP conversion for better performance