# Image Styles Usage Guide - Impact Module

## Overview
The Impact module uses **4 image styles** to display article images in different contexts throughout the magazine layout. All styles use the same source field (`field_article_image`) but apply different cropping and sizing.

## Image Style Usage Map

### 1. `impact_hero` (1920x400)
**Where it's used:**
- **Impact Issue Page**: Hero background image (pulled from the FIRST featured article's image)
- **Impact Article Page**: Hero background image (using that article's own image)

**Visual location:**
- Top of page, full-width banner behind "Impact" title
- Creates the magazine's visual identity for each issue/article

### 2. `impact_featured_secondary` (400x225) 
**Where it's used:**
- **Impact Issue Page ONLY**: The 3 secondary featured articles (positions 2, 3, and 4 in `field_featured_articles`)

**Visual location:**
- Below the main featured article text
- Displayed as a 3-column grid of image cards
- Each has a landscape 16:9 aspect ratio

### 3. `impact_department_card` (300x169)
**Where it's used:**
- **Impact Issue Page ONLY**: All articles in the Departments section (`field_departments_articles`)

**Visual location:**
- In the "DEPARTMENTS" section
- Displayed as a 3-column grid
- Smaller than featured articles but same 16:9 aspect ratio

### 4. `impact_article_inline` (800x450)
**Where it's used:**
- **Article Pages**: For future use within article body content
- **Not currently implemented** in templates (reserved for rich text editor images)

**Future use case:**
- When editors insert images into the article body field
- Could be used for infographics, charts, or additional photos within articles

## Visual Flow Example

```
Impact Issue Page:
┌─────────────────────────────────────┐
│  HERO (impact_hero)                 │ ← From 1st featured article
│  "Impact" Title                     │
└─────────────────────────────────────┘

Main Featured Article (Text only - no image shown here)
- Title: "Could Your Practice Use a Concertmaster?"
- Summary text
- Continue reading link

Secondary Featured Articles Grid:
┌───────────┬───────────┬───────────┐
│ Article 2 │ Article 3 │ Article 4 │ ← impact_featured_secondary
│  (image)  │  (image)  │  (image)  │
│   Title   │   Title   │   Title   │
└───────────┴───────────┴───────────┘

Departments Section:
┌───────────┬───────────┬───────────┐
│  Dept 1   │  Dept 2   │  Dept 3   │ ← impact_department_card
│  (image)  │  (image)  │  (image)  │
│   Title   │   Title   │   Title   │
└───────────┴───────────┴───────────┘
```

```
Individual Article Page:
┌─────────────────────────────────────┐
│  HERO (impact_hero)                 │ ← From this article's image
│  "Impact" Title                     │
└─────────────────────────────────────┘
│                                     │
│  Article Title                      │
│  Article Content...                 │
│                                     │
```

## Key Points

1. **No image duplication on Issue page**: The first featured article's image is used as the hero, but NOT shown again in the featured section (only title/text shown)

2. **Image reuse**: The same `field_article_image` is displayed differently based on context:
   - As hero → `impact_hero` 
   - As featured card → `impact_featured_secondary`
   - As department card → `impact_department_card`

3. **Responsive handling**: The `impact_hero` style creates a 1920x400 image that scales down responsively via CSS. No separate mobile/tablet image styles needed.

4. **Inside APTA section**: Currently displays as text-only links (no images) per the design

## Configuration Files

All image styles are defined in `/config/install/`:
- `image.style.impact_hero.yml`
- `image.style.impact_featured_secondary.yml`
- `image.style.impact_department_card.yml`
- `image.style.impact_article_inline.yml`

Each uses Focal Point scale and crop for intelligent cropping based on the image's focal point.