# Impact Article Display - Dual Layout System

## Overview
The PPS Impact module now implements a dual layout system for Impact Articles, automatically detecting how an article is referenced and applying the appropriate display template.

## Layout Types

### 1. Featured Article Layout
- **Template**: `node--impact-article--featured.html.twig`
- **Used when**: Article is referenced from `field_featured_articles`
- **Characteristics**:
  - Full-width hero image section with "Impact" title overlay
  - Large typography for title and deck
  - Prominent author byline
  - Sidebar for advertisements and related content
  - Full author bio section with photo
  - Clean, magazine-style layout

### 2. Standard Article Layout
- **Template**: `node--impact-article--standard.html.twig`
- **Used when**: Article is referenced from:
  - `field_departments_articles`
  - `field_inside_apta`
  - `field_additional_articles` (in paragraphs)
- **Characteristics**:
  - Compact header without hero image
  - Inline article image (if provided)
  - Narrower content width for better readability
  - Keywords display
  - Enhanced share options (includes Twitter and Email)
  - Back to issue navigation button
  - Related articles sidebar (desktop only)
  - Category-based color coding for badges

## Implementation Details

### Detection Logic
The module determines which layout to use through:

1. **Theme Suggestions Hook** (`pps_impact_theme_suggestions_node_alter()`):
   - Queries the database to find which field references the article
   - Adds appropriate template suggestions based on the reference type

2. **Preprocess Hook** (`pps_impact_preprocess_node()`):
   - Sets `$variables['article_display_type']` to either 'featured' or 'standard'
   - Finds and sets the parent issue
   - Adds CSS class based on display type

### Template Hierarchy
```
node--impact-article--full__featured.html.twig    (most specific, featured in full view)
node--impact-article--featured.html.twig          (featured article, any view)
node--impact-article--full__standard.html.twig    (most specific, standard in full view)
node--impact-article--standard.html.twig          (standard article, any view)
node--impact-article--full.html.twig              (generic full view)
node--impact-article.html.twig                    (fallback, includes appropriate template)
```

### CSS Classes
Articles automatically receive CSS classes based on their display type:
- `.impact-article--featured` - Featured article styling
- `.impact-article--standard` - Standard article styling

## Category Badge Colors
The standard layout includes category-based color coding:
- Practice Management: Blue (#007bff)
- Clinical Excellence: Green (#28a745)
- Technology & Innovation: Teal (#17a2b8)
- Business Development: Yellow (#ffc107)
- Regulatory & Compliance: Red (#dc3545)
- Patient Engagement: Purple (#6f42c1)
- Staff Development: Mint (#20c997)
- Marketing & Outreach: Orange (#fd7e14)
- Finance & Operations: Gray (#6c757d)
- Leadership: Dark (#343a40)

## Template Variables
Both templates have access to:
- `node` - The article node entity
- `parent_issue` - The Impact Issue that references this article
- `article_display_type` - Either 'featured' or 'standard'
- `content` - Rendered field content
- Standard Drupal node variables

## Responsive Design
Both layouts are fully responsive:
- **Desktop (1024px+)**: Full layout with sidebars
- **Tablet (768px-1023px)**: Single column, sidebar content moves inline
- **Mobile (<768px)**: Optimized single column layout

## Share Functionality
Both layouts include share buttons with direct integration:
- Facebook sharing via sharer.php
- Twitter sharing via intent/tweet
- LinkedIn sharing via share-offsite
- Email sharing via mailto link
- Copy link to clipboard

## Files Modified/Created

### Modified Files:
- `/pps_impact.module` - Added detection logic and theme suggestions
- `/css/impact-article-display.css` - Added standard layout styles

### Created Files:
- `/templates/node--impact-article--featured.html.twig` - Featured layout template
- `/templates/node--impact-article--standard.html.twig` - Standard layout template  
- `/templates/node--impact-article.html.twig` - Fallback template

### Renamed Files:
- `/templates/node--impact-article--full.html.twig` → `/templates/node--impact-article--featured.html.twig`

## Testing Checklist

1. **Create an Impact Issue** with articles in different sections
2. **View Featured Articles** - Should use hero layout with large image
3. **View Department Articles** - Should use standard layout
4. **View Inside APTA Articles** - Should use standard layout
5. **Test Responsive Design** - Check all breakpoints
6. **Test Share Buttons** - Verify all platforms work
7. **Verify Parent Issue Detection** - Check issue link displays correctly
8. **Test Category Badges** - Verify color coding works
9. **Check Fallback** - Articles without parent should still display

## Cache Clearing
After implementing these changes, clear Drupal's cache:
```bash
drush cr
# or
admin/config/development/performance → Clear all caches
```

## Future Enhancements
- Populate "From This Issue" sidebar with actual related articles
- Add view count tracking
- Implement reading time estimation
- Add print-friendly version
- Create AMP version for mobile optimization
- Add schema.org markup for better SEO