Étape 2 - Types de Contenu & Médias

⏱️ Durée estimée : 3h30

🎯 Objectifs de cette étape

À la fin de cette étape, vous serez capable de :

• ✅ Créer des types de contenu personnalisés
• ✅ Ajouter et configurer différents types de champs
• ✅ Comprendre les modes d’affichage (view modes / form modes)
• ✅ Gérer les médias (images, documents)
• ✅ Créer les types de contenu du projet TailStore

📋 Prérequis

• Étape 1 terminée (Drupal installé et fonctionnel)
• Accès à l’administration Drupal
• Drush configuré

📄 Pages système importantes

Contrairement à ce que l’on pourrait penser, Drupal ne crée pas automatiquement les pages principales par défaut. Cependant, il est recommandé de créer ces trois pages essentielles pour une bonne UX :

1. Page d’accueil (Home)

• Type : Page de base
• Alias d’URL : /home (recommandé) ou /
• Rôle : Page d’accueil du site
• Configuration : /admin/config/system/site-information → “Page d’accueil par défaut”

2. Page d’erreur 404 (“Page non trouvée”)

• Type : Page de base
• Alias d’URL : /404
• Contenu : Message d’erreur + lien vers l’accueil + recherche
• Configuration : /admin/config/system/site-information → “Page par défaut ‘Page non trouvée (404)’”
• Conseil : Rendez-la utile avec une barre de recherche et des liens vers les sections populaires

3. Page d’erreur 403 (“Accès refusé”)

• Type : Page de base
• Alias d’URL : /403
• Contenu : Message d’erreur + explication + lien de connexion
• Configuration : /admin/config/system/site-information → “Page par défaut ‘Accès refusé (403)’”
• Conseil : Pour les utilisateurs non connectés, proposez un lien vers la page de connexion

Bonnes pratiques

• Créez ces pages dès le début du projet
• Utilisez des chemins simples comme /404 et /403
• Testez-les régulièrement en modifiant temporairement les URLs dans la config
• Personnalisez le design pour qu’elles s’intègrent à votre thème

🔍 Vérification des pages système

Commandes de test rapide

# Vérifier que DDEV fonctionne
ddev describe

# Ouvrir le site dans le navigateur
ddev launch

# Puis naviguer vers /home, /404, /403 manuellement ou en utilisant DDEV :

# Ouvrir la page d'accueil
ddev launch /home

# Tester la page 404 (URL inexistante)
ddev launch /page-inexistante-12345

# Tester la page 403 (nécessite d'être déconnecté)
ddev launch /admin

📚 Sommaire

1. Types de contenu

Comprendre et créer des types de contenu (node types). Voir →

2. Champs

Ajouter et configurer tous les types de champs. Voir →

3. Modes d'affichage

Gérer les form modes et view modes. Voir →

4. Médias

Configurer la gestion des médias. Voir →

🛍️ Types de contenu du projet TailStore

Dans cette étape, nous allons créer les trois types de contenu principaux de notre boutique :

1. Produit (product)

Le type de contenu principal pour les articles de la boutique.

Champ	Type	Description
Titre	Text	Nom du produit
Body	Text (long)	Description
field_images	Media (Image)	Galerie photos (multiple)
field_price	Decimal	Prix régulier
field_sale_price	Decimal	Prix soldé (optionnel)
field_sku	Text	Code produit
field_category	Entity Reference	Catégorie(s)
field_brand	Entity Reference	Marque
field_sizes	Entity Reference	Tailles disponibles
field_colors	Entity Reference	Couleurs disponibles
field_availability	Boolean	En stock ?
field_material	Text	Matière

2. Article de Blog (blog_article)

Pour la section blog de la boutique.

Champ	Type	Description
Titre	Text	Titre de l’article
Body	Text (long)	Contenu
field_image	Media (Image)	Image principale
field_blog_category	Entity Reference	Catégorie blog

3. Slide (slide)

Pour le carrousel de la page d’accueil.

Champ	Type	Description
field_title	Text	Titre du slide
field_subtitle	Text	Sous-titre
field_image	Media (Image)	Image de fond
field_link	Link	Lien du CTA
field_cta_text	Text	Texte du bouton

📊 Schéma des relations

┌─────────────────┐     ┌──────────────────┐
│    Product      │────▶│ Catégorie (Tax)  │
│                 │     └──────────────────┘
│   field_brand ──┼────▶┌──────────────────┐
│                 │     │   Marque (Tax)   │
│   field_sizes ──┼────▶└──────────────────┘
│                 │     ┌──────────────────┐
│  field_colors ──┼────▶│   Taille (Tax)   │
│                 │     └──────────────────┘
│  field_images ──┼────▶┌──────────────────┐
│                 │     │   Couleur (Tax)  │
└─────────────────┘     └──────────────────┘
                        ┌──────────────────┐
┌─────────────────┐     │   Media Image    │
│  Blog Article   │────▶└──────────────────┘
│                 │
│ field_category ─┼────▶┌──────────────────┐
│                 │     │ Cat. Blog (Tax)  │
└─────────────────┘     └──────────────────┘

🔧 Commandes Drush utiles

# Lister les types de contenu
drush entity:type:list --group=content

# Voir les champs d'un type
drush field:list node.product

# Exporter la configuration
drush cex -y

Génération de contenu

Pour générer du contenu de test automatiquement, installez le module Devel Generate :

ddev composer require --dev drupal/devel
ddev drush en devel devel_generate -y
ddev drush genc 10 --bundles=product

⚡ Workflow de création

Pour chaque type de contenu, nous suivrons ce processus :

1. Créer le type de contenu (/admin/structure/types/add)
2. Ajouter les champs (/admin/structure/types/manage/{type}/fields)
3. Configurer le formulaire (/admin/structure/types/manage/{type}/form-display)
4. Configurer l’affichage (/admin/structure/types/manage/{type}/display)
5. Exporter la configuration (drush cex -y)
6. Créer du contenu de test

🚀 C’est parti !

Commencez par comprendre les Types de contenu dans Drupal.