# OG Image Generation Instructions - Firmennamen Generator

**Last Updated:** 2026-03-04

## Status

✅ **Configuration Complete:**
- Entry added to `og-image-specs.json`: `"firmennamen-generator": {"headline": "Firmennamen Generator", "visual": "tools"}`
- Visual description added to `generate-og-image-gemini.py`: Page-specific description for company name generator
- Registry updated: `v2/config/og-image-registry.php` includes `firmennamen-generator` entry
- Page configured: `tools_firmennamen_generator.php` uses `get_og_image_for_page('tools', 'firmennamen-generator')`

✅ **Generation Complete:** Image generated using standard workflow (Method 1 - Playwright + Gemini Visuals)
- Generated: 2026-03-04
- File: `v2/img/og/firmennamen-generator.webp` (1200×630px, 27.4 KB)
- Validation: ✅ Dimensions, color, logo visibility all pass

## Generation Methods

### Method 1: Playwright + Gemini Visuals ✅ STANDARD WORKFLOW (USED)

**Best quality with AI-generated visuals. This is the standard workflow used for all custom tool OG images.**

**✅ Used to generate current image:** 2026-03-04

**Dependencies:**
```bash
pip install playwright Pillow requests
playwright install chromium
```

**Generate:**
```bash
python3 v2/scripts/og-images/generate-og-images.py --type=firmennamen-generator --gemini-visuals
```

**Output:** `v2/img/og/firmennamen-generator.webp` (1200×630px)

**✅ Generated:** 2026-03-04 using this method. Validation passed:
- Dimensions: 1200×630px ✅
- File size: 27.4 KB ✅
- Left panel color: RGB(76, 142, 243) ✅
- Logo visibility: 1154 pixels ✅

### Method 2: Gemini Fallback (When Playwright Unavailable) ⚠️ NOT USED

**Full AI-generated image. Use only when Playwright is unavailable.**

**⚠️ This method was NOT used for the current image.** The standard Playwright + Gemini visuals workflow (Method 1) was used instead.

**Dependencies:**
```bash
pip install requests Pillow
```

**Generate:**
```bash
python3 v2/scripts/og-images/generate-og-image-gemini.py --type=firmennamen-generator
```

**Output:** `v2/img/og/firmennamen-generator.webp` (1200×630px)

### Method 3: Playwright with SVG (Fastest) ⚠️ NOT USED

**Uses SVG illustration (generic tools visual). Fastest but less visually appealing than Gemini visuals.**

**⚠️ This method was NOT used for the current image.** The standard Playwright + Gemini visuals workflow (Method 1) was used instead for consistency with other custom tool OG images.

**Dependencies:**
```bash
pip install playwright Pillow
playwright install chromium
```

**Generate:**
```bash
python3 v2/scripts/og-images/generate-og-images.py --type=firmennamen-generator
```

**Output:** `v2/img/og/firmennamen-generator.webp` (1200×630px)

## Visual Description

The OG image will feature:
- **Left 65%:** Solid Ordio blue (#4D8EF3) background with white "ordio" logo and headline "Firmennamen Generator"
- **Right 35%:** Isometric 3D illustration showing:
  - Lightbulb (ideas/creativity)
  - Building (company/business)
  - Name tag (naming/branding)
  - Sparkles (creative elements)
  - White/light blue color scheme with soft shadows

## Verification

After generation, verify:
1. File exists: `v2/img/og/firmennamen-generator.webp`
2. Dimensions: 1200×630px
3. Format: WebP
4. File size: < 300KB (ideally)
5. Page loads correctly: Check `/tools/firmennamen-generator` meta tags

**Validate:**
```bash
python3 v2/scripts/og-images/validate-og-images.py
```

## Current Configuration

**Specs (`og-image-specs.json`):**
```json
"firmennamen-generator": {
  "headline": "Firmennamen Generator",
  "visual": "tools"
}
```

**Visual Description (page-specific override):**
- Company name generator: lightbulb, building, name tag, sparkles, creative branding

**Registry (`og-image-registry.php`):**
```php
'firmennamen-generator' => $base_url . '/v2/img/og/firmennamen-generator.webp',
```

## Next Steps

✅ **Image Generated:** All steps completed.

**For future regeneration:**
1. Use Method 1 (Playwright + Gemini Visuals) - standard workflow
2. Run: `python3 v2/scripts/og-images/generate-og-images.py --type=firmennamen-generator --gemini-visuals`
3. Validate: `python3 v2/scripts/og-images/validate-og-images.py`
4. Test page meta tags load correctly
5. Validate with OG image validators (Facebook Debugger, LinkedIn Post Inspector)