✨ Feature: Pages projets complètes + Optimisation images (Stories 3.4-3.6)

Story 3.4 - Page projet individuelle: - Breadcrumb, header avec badges technologies - Boutons "Voir en ligne" / "GitHub" - Sections: Contexte, Solution, Travail d'équipe - Galerie screenshots, sidebar durée - Navigation retour + CTA contact Story 3.5 - Projets secondaires: - Section "Autres projets" sur /projets - Template project-card-compact.php - Format liste avec lien externe direct Story 3.6 - Optimisation images: - Fonction projectImage() avec <picture> WebP + fallback JPG - Dimensions explicites (400x225, 800x450, 1200x675) - Lazy loading configurable Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-23 10:59:13 +01:00
parent 013b98ad3c
commit 1711f8f723
5 changed files with 287 additions and 22 deletions
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -92,3 +92,52 @@ function getAllTechnologies(): array
    sort($technologies);
    return $technologies;
 }
+
+/**
+ * Génère le HTML pour une image projet optimisée
+ * Utilise <picture> pour WebP avec fallback JPG
+ *
+ * @param string $filename Nom du fichier image (ex: project-thumb.webp)
+ * @param string $alt Texte alternatif
+ * @param int $width Largeur en pixels
+ * @param int $height Hauteur en pixels
+ * @param bool $lazy Activer le lazy loading (défaut: true)
+ * @param string $class Classes CSS additionnelles
+ * @return string HTML de l'image
+ */
+function projectImage(string $filename, string $alt, int $width, int $height, bool $lazy = true, string $class = ''): string
+{
+    $alt = htmlspecialchars($alt, ENT_QUOTES, 'UTF-8');
+    $class = htmlspecialchars($class, ENT_QUOTES, 'UTF-8');
+    $lazyAttr = $lazy ? 'loading="lazy"' : '';
+
+    // Détermine les chemins WebP et fallback
+    $basePath = '/assets/img/projects/';
+    $webpFile = $filename;
+
+    // Si le fichier n'est pas .webp, on essaie de trouver la version .webp
+    if (!str_ends_with($filename, '.webp')) {
+        $webpFile = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $filename);
+    }
+
+    // Fallback: remplace .webp par .jpg
+    $fallbackFile = str_replace('.webp', '.jpg', $webpFile);
+
+    // Image par défaut si fichier manquant
+    $defaultImage = $basePath . 'default-project.svg';
+
+    return <<<HTML
+<picture>
+    <source srcset="{$basePath}{$webpFile}" type="image/webp">
+    <img
+        src="{$basePath}{$fallbackFile}"
+        alt="{$alt}"
+        width="{$width}"
+        height="{$height}"
+        {$lazyAttr}
+        class="{$class}"
+        onerror="this.onerror=null; this.src='{$defaultImage}';"
+    >
+</picture>
+HTML;
+}