# Image and Template Issues Analysis

## Problems Identified

### 1. Missing Image CSS in Templates
**Issue**: None of the templates (basic, modern, classic) have CSS for `<img>` tags.

**Impact**: Images display at full size, breaking layout especially in modern template with constrained article width (850px).

**Solution**: Add responsive image CSS to all templates:
```css
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 8px;
}
```

### 2. Template Storage Inconsistency
**Issue**: `template_used` field is only set when `apply_template()` is called. If:
- Templates are applied at different times
- Some articles skip template application
- Articles are moved between sites with different templates
- Template application fails silently

Then the database may show incorrect or missing template values.

**Evidence**: User reports articles showing "basic" when they're actually "modern".

**Solution**: 
- Always apply templates before deployment
- Re-apply templates if `template_used` doesn't match site's `template_name`
- Add validation to ensure `template_used` matches site template

### 3. Images Lost During Interlink Injection
**Issue**: Processing order:
1. Images inserted into `content` → saved
2. Interlinks injected → BeautifulSoup parses/rewrites HTML → saved
3. Template applied → reads `content` → creates `formatted_html`

BeautifulSoup parsing may break image tags or lose them during HTML rewriting.

**Evidence**: User reports images were generated and uploaded (URLs in database) but don't appear in deployed articles.

**Solution Options**:
- **Option A**: Re-insert images after interlink injection (read from `hero_image_url` and `content_images` fields)
- **Option B**: Use more robust HTML parsing that preserves all tags
- **Option C**: Apply template immediately after image insertion, then inject interlinks into `formatted_html` instead of `content`

### 4. Image Size Not Constrained
**Issue**: Even if images are present, they're not constrained by template CSS, causing layout issues.

**Solution**: Add image CSS (see #1) and ensure images are inserted with proper attributes:
```html
<img src="..." alt="..." style="max-width: 100%; height: auto;" />
```

## Recommended Fixes

### Priority 1: Add Image CSS to All Templates
Add responsive image styling to:
- `src/templating/templates/basic.html`
- `src/templating/templates/modern.html`
- `src/templating/templates/classic.html`

### Priority 2: Fix Image Preservation
Modify `src/interlinking/content_injection.py` to preserve images:
- Use `html.parser` with `preserve_whitespace` or `html5lib` parser
- Or re-insert images after interlink injection using database fields

### Priority 3: Fix Template Tracking
- Add validation in deployment to ensure `template_used` matches site template
- Re-apply templates if mismatch detected
- Add script to backfill/correct `template_used` values

### Priority 4: Improve Image Insertion
- Add `max-width` style attribute when inserting images
- Ensure images are inserted with proper responsive attributes

## Code Locations

- Image insertion: `src/generation/image_injection.py`
- Interlink injection: `src/interlinking/content_injection.py` (line 53-76)
- Template application: `src/generation/service.py` (line 409-460)
- Template files: `src/templating/templates/*.html`
- Deployment: `src/deployment/deployment_service.py` (uses `formatted_html`)