À propos de l'élément de contenu
L'élément Texte&Média est l'élément de contenu le plus important. Il est utilisé pour intégrer des textes et des médias sur les pages web.
Utilisation de l'élément :
- contenu classique de la page
- textes avec/sans images
- images/vidéos avec/sans texte
- Représentation en gallerie possible pour de nombreux médias dans plusieurs colonnes
- Meilleure présentation avec une image avec mise en page "à côté du texte à droite/à gauche" et "dans le texte à droite/à gauche" sur une largeur de page de 100%.
- Dans les éléments de grille de 66% ou moins, le texte doit être placé au-dessus/en dessous des images. Mise en page : haut/bas
Kafka
un texte avec une image dans le texte à droite
Quelqu'un a dû calomnier Josef K., car sans qu'il ait fait quoi que ce soit de mal, il a été arrêté un matin. "Comme un chien !" dit-il, c'était comme si la honte devait lui survivre. Un matin, lorsque Gregor Samsa se réveilla de rêves agités, il se trouva transformé dans son lit en une monstrueuse vermine. Et ce fut comme une confirmation de leurs nouveaux rêves et de leurs bonnes intentions lorsque, au terme de leur voyage, leur fille fut la première à se lever et à étirer son jeune corps. "C'est un drôle d'appareil", dit l'officier à l'explorateur en regardant avec une sorte d'admiration cet appareil qu'il connaissait bien.
Encore une fois Kafka
un texte avec des images en dessous et une possibilité de galerie exploitée
LuckyBusiness
Quelqu'un a dû calomnier Josef K., car sans qu'il ait fait quoi que ce soit de mal, il a été arrêté un matin. "Comme un chien !" dit-il, c'était comme si la honte devait lui survivre. Un matin, lorsque Gregor Samsa se réveilla de rêves agités, il se trouva transformé dans son lit en une monstrueuse vermine.
Étape 1 : Créer un élément Texte&Média
Pour créer l'élément, cliquez sur l'icône "+ contenu" dans la zone d'édition de la page cible. Sélectionnez ensuite l'élément "Texte&Médias" sous l'onglet "Contenu typique de la page". Le menu d'édition de l'élément s'ouvre ensuite automatiquement.
Étape 2 : Créer le contenu
Attribuez d'abord un titre sous l'onglet "Général". Définissez ensuite le type/la mise en page de l'en-tête. Créez maintenant le contenu souhaité de l'élément Text&Media en bas dans l'éditeur de texte.
Remarques sur la mise en page des titres : la mise en page détermine la taille du titre, la mise en page 1 étant la plus grande et la mise en page 6 la plus petite. Dans Typo3, la mise en page "Standard" est prédéfinie par défaut, elle correspond à la mise en page 2. Si vous choisissez la mise en page "Caché", le titre n'est visible que dans le backend et reste donc caché aux visiteurs de la page. N'utilisez la mise en page 1 qu'une seule fois par page, cela améliore le classement de votre site dans les moteurs de recherche !
Étape 3 : Ajouter une image (facultatif)
Intégrer un fichier média
Pour intégrer un fichier média, allez d'abord dans l'onglet "Médias" et cliquez ensuite sur le bouton "Ajouter un fichier média". Vous serez ensuite redirigé vers la liste de fichiers et y sélectionnerez l'image souhaitée. Vous pouvez également intégrer directement un fichier local en cliquant sur "Sélectionner et télécharger le fichier".
Il est recommandé d'utiliser une largeur de pixels de 1200px pour une largeur de page de 100 % dans la vue de bureau. Et au moins 750 px pour une largeur de page de 50 % dans l'affichage du bureau. Ainsi, les images sont suffisamment grandes pour toutes les vues possibles.
Veuillez noter que si vous choisissez l'option "Sélectionner et télécharger le fichier", le fichier multimédia sera enregistré dans le dossier "user_upload" de la liste des fichiers. Cela peut rendre difficile pour vous et pour les autres rédacteurs* de trouver ce fichier dans la liste des fichiers.
Déposer des métadonnées
Après l'intégration d'une image, veuillez insérer le "Texte alternatif" et la "Description de l'image" dans la zone "Métadonnées de l'image". Cela sert en premier lieu à l'accessibilité. Si vous les avez déjà déposées dans la liste de fichiers, elles seront automatiquement pré-remplies.
Traitement de l'image
Sous la rubrique Traitement d'image, vous pouvez définir le rapport hauteur/largeur de l'image en fonction de la taille d'écran disponible. Cela permet d'optimiser la représentation de l'image pour la sortie sur différents terminaux. Pour définir le rapport hauteur/largeur en fonction de la taille d'écran disponible, cliquez sur "Ouvrir éditeur" et définissez les rapports hauteur/largeur pour les tailles d'écran correspondantes. La taille "Extra Large" correspond à un grand écran d'ordinateur et "Très petit" à un écran de smartphone.
Conseil : pour vérifier le résultat, vous pouvez utiliser le "module d'affichage". Vous pouvez également afficher la page, réduire la fenêtre de votre navigateur et modifier sa taille en conséquence.
Remarque : L'éditeur sert uniquement à définir les proportions. Il n'offre pas d'autres options de traitement d'image.
Paramètres de la galerie
Sous "Position et orientation", vous définissez à quel endroit l'image est positionnée par rapport au texte.
Sous "Nombre de colonnes", vous définissez le nombre de colonnes à disposition des images. Pour afficher plusieurs images côte à côte, le nombre de colonnes disponibles doit être >1. Le nombre d'images pouvant être affichées côte à côte dépend toutefois aussi des résolutions d'image correspondantes ainsi que de la hauteur et de la largeur attribuées.
Étape 4 : Sélectionner la couleur de fond (facultatif)
Pour définir une couleur d'arrière-plan pour l'élément Texte&Média, allez d'abord dans l'onglet "Apparence". Là, dans la zone "Couleur d'arrière-plan", sélectionnez la couleur de cadre souhaitée.
Important : veuillez n'utiliser cette option que pour mettre en évidence des éléments particulièrement importants. Les couleurs vives attirent le regard des utilisateurs* de manière ciblée. Trop de mises en évidence peuvent avoir l'effet inverse.
Auto-apprentissage TYPO3
Exercice
- Créez un texte avec une image.
- Donnez le titre "Hiver".
- Ajoutez "L'hiver est basé sur la saison qui se déroule entre l'automne et le printemps. Ce qui caractérise les mois d'hiver dans l'hémisphère nord, c'est qu'il y règne des températures basses. Les températures négatives entraînent un gel au sol et un air pur. Le temps se caractérise surtout par de nombreuses chutes de neige et des pluies verglaçantes." comme texte.
- Choisissez un fond blanc comme apparence.
- Insérez une image de votre choix.