# 📸 Revisión Completa: Imágenes OG y Twitter

## ✅ Confirmación del Proceso

**SÍ, tu entendimiento es correcto.** Las imágenes OG y Twitter pueden ser colocadas en `public/cd-project/assets/` y luego ejecutar el comando artisan `project:update-assets` para ubicarlas donde corresponda.

---

## 📍 Ubicación de las Imágenes

### 1. **Carpeta de Origen (Assets)**
```
public/cd-project/assets/
├── og-image.png          ← Colocar aquí (o .jpg)
└── twitter-image.png     ← Colocar aquí (o .jpg)
```

### 2. **Carpeta de Destino (Meta Tags)**
```
public/cd-project/img/meta-tags/
├── og-image.png          ← Se copia aquí automáticamente
└── twitter-image.png     ← Se copia aquí automáticamente
```

---

## 🔄 Proceso Automatizado

### Paso 1: Colocar Imágenes en Assets
```bash
# Copiar las imágenes a la carpeta assets
cp /ruta/a/tu/og-image.png public/cd-project/assets/og-image.png
cp /ruta/a/tu/twitter-image.png public/cd-project/assets/twitter-image.png
```

### Paso 2: Ejecutar Comando Artisan
```bash
php artisan project:update-assets public/cd-project/assets --backup
```

**Lo que hace el comando:**
- ✅ Busca `og-image.png` (o `.jpg`) en `public/cd-project/assets/`
- ✅ Busca `twitter-image.png` (o `.jpg`) en `public/cd-project/assets/`
- ✅ Copia automáticamente a `public/cd-project/img/meta-tags/`
- ✅ Crea directorios si no existen

### Paso 3: Limpiar Caché
```bash
php artisan config:clear
php artisan cache:clear
```

---

## 📋 Configuración en `config/site.php`

Las rutas están configuradas en `config/site.php`:

```php
'og' => [
    'image' => 'cd-project/img/meta-tags/og-image.jpg',  // ← Ruta relativa
    // ...
],

'twitter' => [
    'image' => 'cd-project/img/meta-tags/twitter-image.jpg',  // ← Ruta relativa
    // ...
],
```

**Nota:** El sistema acepta tanto `.png` como `.jpg`. La configuración actual usa `.jpg`, pero el comando copiará el archivo que encuentre.

---

## 🔍 Cómo Funciona el Sistema

### 1. **MetaTagsHelper** (`app/Helpers/MetaTagsHelper.php`)

El helper centralizado gestiona las imágenes:

```php
// Línea 76-80
public static function getOgImage(?string $ogImage = null): string
{
    $image = $ogImage ?: config('site.og.image', 'cd-project/img/meta-tags/og-image.png');
    return self::ensureAbsoluteUrl($image);
}

// Línea 88-92
public static function getTwitterImage(?string $twitterImage = null): string
{
    $image = $twitterImage ?: config('site.twitter.image', 'cd-project/img/meta-tags/twitter-image.png');
    return self::ensureAbsoluteUrl($image);
}
```

**Flujo:**
1. Si una vista define `@section('og_image', ...)`, usa ese valor
2. Si no, usa `config('site.og.image')`
3. Si no existe, usa el valor por defecto: `cd-project/img/meta-tags/og-image.png`
4. Convierte la ruta relativa a URL absoluta con `asset()`

### 2. **Comando UpdateProjectAssets** (`app/Console/Commands/UpdateProjectAssets.php`)

El comando procesa las imágenes como **assets opcionales**:

```php
// Línea 41-44
private $optionalAssets = [
    'og-image.png' => 'cd-project/img/meta-tags/og-image.png',
    'twitter-image.png' => 'cd-project/img/meta-tags/twitter-image.png',
];

// Línea 236-249
private function processOptionalAssets($sourceDir)
{
    $this->info("📸 Procesando imágenes de meta tags (opcionales)...");

    foreach ($this->optionalAssets as $sourceFile => $targetPath) {
        $fullSourcePath = $this->normalizePath($sourceDir . '/' . $sourceFile);

        if (File::exists($fullSourcePath)) {
            $this->processAsset($sourceDir, $sourceFile, $targetPath);
        } else {
            $this->warn("⚠️  Opcional no encontrado: {$sourceFile}");
        }
    }
}
```

**Características:**
- ✅ Son **opcionales** (no falla si no existen)
- ✅ Busca en el directorio fuente especificado
- ✅ Copia a la ubicación destino
- ✅ Crea directorios automáticamente si no existen

---

## 📊 Mapeo de Archivos

| Archivo en Assets | Destino Final | Config en site.php |
|-------------------|---------------|-------------------|
| `og-image.png` | `public/cd-project/img/meta-tags/og-image.png` | `site.og.image` |
| `og-image.jpg` | `public/cd-project/img/meta-tags/og-image.jpg` | `site.og.image` |
| `twitter-image.png` | `public/cd-project/img/meta-tags/twitter-image.png` | `site.twitter.image` |
| `twitter-image.jpg` | `public/cd-project/img/meta-tags/twitter-image.jpg` | `site.twitter.image` |

---

## 🎯 Uso en Vistas

### Ejemplo 1: Usar Imagen por Defecto
```php
{{-- En master.blade.php --}}
<meta property="og:image" content="{{ MetaTagsHelper::getOgImage() }}" />
```
**Resultado:** Usa `config('site.og.image')` → `cd-project/img/meta-tags/og-image.jpg`

### Ejemplo 2: Sobrescribir en Vista Específica
```php
{{-- En welcome.blade.php --}}
@section('og_image', asset('cd-project/img/meta-tags/og-image.png'))
```
**Resultado:** Usa la imagen específica de la vista

### Ejemplo 3: Imagen Dinámica
```php
{{-- En blog/show.blade.php --}}
@php
    $ogImage = $post->featured_image 
        ? asset($post->featured_image) 
        : asset('cd-project/img/meta-tags/og-image.png');
@endphp
@section('og_image', $ogImage)
```

---

## ✅ Estado Actual del Sistema

### Archivos Existentes
```bash
# Verificar imágenes actuales
ls -la public/cd-project/img/meta-tags/ | grep -E "(og-image|twitter-image)"
```

**Resultado actual:**
- ✅ `og-image.jpg` existe (48,889 bytes)
- ✅ `twitter-image.jpg` existe (48,889 bytes)

### Configuración Actual
```php
// config/site.php
'og' => [
    'image' => 'cd-project/img/meta-tags/og-image.jpg',  // ✅ Configurado
],

'twitter' => [
    'image' => 'cd-project/img/meta-tags/twitter-image.jpg',  // ✅ Configurado
],
```

---

## 🔧 Comandos Útiles

### Verificar Estructura
```bash
# Ver qué hay en assets
ls -la public/cd-project/assets/ | grep -E "(og|twitter)"

# Ver qué hay en meta-tags
ls -la public/cd-project/img/meta-tags/ | grep -E "(og|twitter)"
```

### Actualizar Imágenes
```bash
# 1. Copiar nuevas imágenes a assets
cp nueva-og-image.png public/cd-project/assets/og-image.png
cp nueva-twitter-image.png public/cd-project/assets/twitter-image.png

# 2. Ejecutar comando (con backup)
php artisan project:update-assets public/cd-project/assets --backup

# 3. Limpiar caché
php artisan config:clear
```

### Modo Dry-Run (Simular)
```bash
# Ver qué se haría sin aplicar cambios
php artisan project:update-assets public/cd-project/assets --dry-run
```

---

## 📝 Resumen Ejecutivo

### ✅ Confirmación

1. **Ubicación de origen:** `public/cd-project/assets/`
   - Colocar `og-image.png` (o `.jpg`)
   - Colocar `twitter-image.png` (o `.jpg`)

2. **Comando artisan:** `php artisan project:update-assets public/cd-project/assets --backup`
   - Copia automáticamente a `public/cd-project/img/meta-tags/`
   - Son assets **opcionales** (no falla si no existen)

3. **Ubicación final:** `public/cd-project/img/meta-tags/`
   - `og-image.png` o `og-image.jpg`
   - `twitter-image.png` o `twitter-image.jpg`

4. **Configuración:** `config/site.php`
   - `site.og.image` → `cd-project/img/meta-tags/og-image.jpg`
   - `site.twitter.image` → `cd-project/img/meta-tags/twitter-image.jpg`

5. **Uso:** `MetaTagsHelper::getOgImage()` y `MetaTagsHelper::getTwitterImage()`
   - Convierte rutas relativas a URLs absolutas
   - Permite sobrescribir desde vistas específicas

---

## 🎯 Mejores Prácticas

1. **Siempre usar `--backup`** al ejecutar el comando
2. **Verificar con `--dry-run`** antes de aplicar cambios
3. **Limpiar caché** después de actualizar: `php artisan config:clear`
4. **Usar formato consistente:** `.png` o `.jpg` (no mezclar)
5. **Tamaños recomendados:**
   - OG Image: 1200x630px (configurado en `site.og.image_width` y `image_height`)
   - Twitter Image: 1200x675px (para `summary_large_image`)

---

## 📚 Referencias

- [Documentación Completa: ACTUALIZAR-IDENTIDAD-PROYECTO.md](./ACTUALIZAR-IDENTIDAD-PROYECTO.md)
- Comando: `app/Console/Commands/UpdateProjectAssets.php`
- Helper: `app/Helpers/MetaTagsHelper.php`
- Configuración: `config/site.php` (líneas 170-213)

---

**Última actualización:** 2025-01-XX  
**Estado:** ✅ Confirmado y Verificado