Aller au contenu

Images de fond pour articles - bannière hero et corps

Objectif

Permettre d'ajouter des images de fond aux articles comme dans ia-code-article.html : - backgroundImageUrl : bannière hero dans le header - bodyBackgroundImageUrl : fond du corps de texte (optionnel)

Implémentation

Backend (Ajout bodyBackgroundImageUrl)

  • Prisma schema (prisma/schema.prisma) : champ bodyBackgroundImageUrl String? ajouté
  • Schémas Zod : validation bodyBackgroundImageUrl ajoutée aux deux schémas
  • DTO (ArticleDTO.ts) : ajout du champ dans DonneesCreerArticle et DonneesModifierArticle
  • Entité (Article.ts) : ajout dans ArticleData, ArticlePublic et la classe
  • Handlers : transmettent bodyBackgroundImageUrl
  • Repository : mapper et méthode modifier mis à jour

Frontend

  • AdminApiClient.ts : ajout du champ dans l'interface Article
  • ArticleFormPage.tsx :
  • Deux champs images de fond : "bannière" et "corps"
  • Upload et aperçu pour chaque champ
  • Recommandation: 1920x400 pour la bannière
  • Article.ts (frontend) : propriété bodyBackgroundImageUrl ajoutée
  • ArticlePage.tsx :
  • Header hero avec backgroundImageUrl (256px, overlay sombre)
  • Corps de texte avec bodyBackgroundImageUrl (optionnel, background cover)

Fichiers modifiés

  • BackEnd/prisma/schema.prisma
  • BackEnd/src/Modules/Articles/infrastructure/schemas/zod/creerArticle.schemas.ts
  • BackEnd/src/Modules/Articles/infrastructure/schemas/zod/modifierArticle.schemas.ts
  • BackEnd/src/Modules/Articles/domain/types/ArticleDTO.ts
  • BackEnd/src/Modules/Articles/domain/entities/Article.ts
  • BackEnd/src/Modules/Articles/application/usecases/CreerArticleUseCase.ts
  • BackEnd/src/Modules/Articles/interface-adapters/handlers/CreerArticleHandler.ts
  • BackEnd/src/Modules/Articles/interface-adapters/handlers/ModifierArticleHandler.ts
  • BackEnd/src/Modules/Articles/infrastructure/repositories/prisma/ArticleRepositoryPrisma.ts
  • FrontEnd/src/modules/admin/application/AdminApiClient.ts
  • FrontEnd/src/modules/admin/ui/pages/ArticleFormPage.tsx
  • FrontEnd/src/modules/shared/domain/entities/Article.ts
  • FrontEnd/src/modules/blog/ui/pages/ArticlePage.tsx

Pour aller plus loin

  • Picker de galerie d'images existantes
  • Validation dimensions côté frontend
  • Lazy loading des images de fond