Menu du compte de l'utilisateur

  • Se connecter

Navigation principale

  • Accueil
  • Tous les CMS
  • Tutoriels
  • Livres Blanc
Accueil
Guide CMS

Fil d'Ariane

  • Accueil
  • Tutoriels
  • Guide d’utilisation de Drupal
  • Chapitre 6. Mise en place de la structure du contenu
  • 6.11. Modifier l’affichage du contenu

Sélecteur de langue

  • Français
  • English

Navigation principale

  • Accueil
  • Tous les CMS
  • Tutoriels
  • Livres Blanc

Connexion utilisateur

CAPTCHA
Cette question sert à vérifier si vous êtes un visiteur humain ou non afin d'éviter les soumissions de pourriel (spam) automatisées.
  • Créer un nouveau compte
  • Réinitialiser votre mot de passe

Navigation du livre

  • Tutoriels
    • Guide d’utilisation de Drupal
      • Préface
      • Chapitre 1. Comprendre Drupal
      • Chapitre 2. Préparer votre site
      • Chapitre 3. Installation
      • Chapitre 4. Configuration élémentaire du site
      • Chapitre 5. Gestion élémentaire des pages
      • Chapitre 6. Mise en place de la structure du contenu
        • 6.1. Ajouter un type de contenu
        • 6.2. Supprimer un type de contenu
        • 6.3. Ajouter des champs de base à un type de contenu
        • 6.4. Concept : champs de type référence
        • 6.5. Concept : taxonomie
        • 6.6. Configurer une taxonomie
        • 6.7. Ajouter un champ référence
        • 6.8. Concept : formulaires et widgets
        • 6.9. Modifier les formulaires de saisie du contenu
        • 6.10. Concept: modes d’affichage et formateurs
        • 6.11. Modifier l’affichage du contenu
        • 6.12. Concept : styles d’images
        • 6.13. Définir un style d’image
        • 6.14. Concept : styles d’images réactifs (responsive)
        • 6.15. Concept : formats de texte et éditeurs
        • 6.16. Configurer les formats de texte et les éditeurs
      • Chapitre 7. Gestion des comptes d’utilisateurs
      • Chapitre 8. Blocs
      • Chapitre 9. Créer des listes avec Views

Guy Vigneault

6.11. Modifier l’affichage du contenu

Par Guy Vigneault | 11:04 PM EDT, jeu mars 12, 2026

Objectif

Rendre les éléments de contenu plus lisibles, accessibles, et attractifs en réordonnant les champs, masquant les étiquettes et personnalisant le rendu des champs.

Prérequis

  • Section 2.3, « Concept : entités de contenus et champs »
  • Section 6.10, « Concept: modes d’affichage et formateurs »

Prérequis du site

Le type de contenu Vendeur doit exister, il doit comporter les champs image principale et URL du vendeur, et votre site doit avoir au moins un élément de contenu de type vendeur. Consulter Section 6.1, « Ajouter un type de contenu », Section 6.3, « Ajouter des champs de base à un type de contenu », et Section 5.2, « Créer un élément de contenu ».

Étapes

  1. Trouver et afficher un élément de contenu de type vendeur que vous avez créé dans Section 6.3, « Ajouter des champs de base à un type de contenu ». Noter qu’il y a plusieurs choses qui peuvent être faites pour améliorer l’apparence de la page :

    • Les champs image principale et URL du vendeur ne doivent pas avoir d’étiquettes.
    • L’ordre des champs doit être changé pour que l’image s’affiche en premier.
    • L’image doit être plus petite.
  2. Pour traiter les deux premiers points, et mettre à jour des paramètres supplémentaires, dans le menu d’administration Gérer, aller à Structure > Types de contenu (admin/structure/types). Puis cliquer sur Gérer l’affichage dans la liste de séléction pour le type de contenu Vendeur.

    Gérer l’affichage

  3. Sous la colonne Étiquette sélectionner caché pour l’image principale. Faire de même pour l’URL du vendeur.

    Sélection du titre de l’image principale

  4. Cliquer sur l’engrenage du champ URL du vendeur afin d’ouvrir les options de configuration.
  5. Remplir les champs tel qu’indiqué ci-dessous.

    Nom du champExplicationValeur d’exemple
    Longueur du texte du lienLongueur maximum à l’affichage du texte du lienVide (ne pas tronquer)
    Ouvrir le lien dans une nouvelle fenêtreSi les liens devraient s’ouvrir dans une nouvelle fenêtre ou dans la même fenêtreCoché

    Longueur du lien

  6. Cliquer sur Mettre à jour.
  7. Faire glisser les poignées en forme de croix des champs pour réordonner l’image principale, le corps, l’URL du vendeur and les liens. Alternativement au glisser/déposer, il est possible de cliquer sur le lien Afficher les poids des lignes en tête du tableau et de saisir des poids numériques (les champs ayant des poids algébriques inférieurs seront affichés en premier).

    Changer l’ordre des champs

  8. Cliquer sur Enregistrer.
  9. Retrouver l’élément de contenu de type vendeur de l’étape 1, et vérifier que les mises à jour sont bien effectués.
  10. Répéter des étapes similaires pour gérer l’affichage des champs du type de contenu Recette.

Améliorer votre compréhension

  • Pour rendre l’image principale plus petite, consulter Section 6.13, « Définir un style d’image ».
  • Si vous ne voyez pas les effets de ces changement sur votre site, vous pourriez avoir besoin de vider les caches. Consulter Section 12.2, « Vider le cache ».

Concepts liés

Section 6.12, « Concept : styles d’images »

Vidéos (en anglais)

Changing Content Display

Pour aller plus loin (en anglais)

  • Page de documentation de la communauté sur Drupal.org "Specify how fields are displayed"
  • Page de documentation de la communauté sur Drupal.org "Rearrange the order of fields"
  • Page de documentation de la communauté sur Drupal.org "View modes"

Attributions

Ecrit par Ann Greazel et Boris Doesborg. Traduit par Vanessa Kovalsky et Felip Manyer i Ballester.

 

Liens transversaux de livre pour Tutoriels

  • ‹ 6.10. Concept: modes d’affichage et formateurs
  • Haut
  • 6.12. Concept : styles d’images ›
CMS

 

Tous les CMS

Tuto

 

Tutoriels

 

Livre Blanc

 

Livres Blanc

Propulsé par Drupal

Politique de confidentialite

Politique de confidentialite

Contenu récent

  • 9.3. Créer une vue listant du contenu
    5 jours 7 heures ago
  • 9.2. Concept : les parties qui composent une vue
    5 jours 7 heures ago
  • Chapitre 9. Créer des listes avec Views
    5 jours 7 heures ago
  • 9.1. Concept: usages des vues
    5 jours 7 heures ago
  • 2.4. Exemple de QCM simple conforme au schéma QCM.xsd
    5 jours 8 heures ago

Copyright

Creative Commons

Sauf mention contraire, Guide CMS © 2025 par Guy Vigneault est sous licence Creative Commons Attribution - Utilisation non commerciale - Partage dans les mêmes conditions 4.0 International

 

Creative Commons

Unless otherwise stated, Guide CMS © 2025 by Guy Vigneault is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License

eGV Web