Module "Page" - Gestion des contenus

Une page standard est constituée de différents blocs de contenus qui vont à leur tour constituer la version web de la page. Pour visualiser ces blocs, cliquez sur l'intitulé d'une page dans l'arborescence (par exemple la page Crédits, tout en bas de votre arborescence, quelques fois stockée dans un dossier Footer).

Dans la colonne de droite, on y trouve différents blocs qui permettent d'organiser les contenus de cette page.

La notion de bloc est donc essentielle dans la construction de votre page. Dans TYPO3, vous allez empiler vos blocs les uns au-dessus des autres dans une page, en fonction du rendu que vous souhaitez retrouver sur votre site.

Il est donc possible de déplacer des blocs à l'intérieur d'une page, voire sur une autre page. Les blocs peuvent disposer d'un titre, de contenus et de paramètres semblables à ceux vus précédemment. Il existe différents types de blocs, à utiliser en fonction de ce que vous souhaitez mettre à disposition de vos internautes, ils sont détaillés ci-après.

Pour créer un nouveau bloc dans votre page web, cliquez sur le pictogramme dédié :

S'affiche alors les différents types de blocs :

• Élément de texte : permet d'intégrer du texte ;
• Images seules : permet d'intégrer une ou plusieurs images ;
• Liens vers des fichiers : permet d'intégrer des fichiers à télécharger ;
• Plan du site : permet d'intégrer des menus dynamiques (sommaire de page, liste des sous-pages d'une rubrique, etc.) ;
• HTML brut : permet d'intégrer du code HTML ;
• Diviseur : permet d'intégrer une ligne horizontale à l'intérieur de votre page.

On sélectionne le type de bloc souhaité en cliquant dessus (exemple avec un bloc Liens vers des fichiers).

Boutons d'enregistrement

Lors de la création d'un bloc, on retrouve plusieurs options d'enregistrement, semblables à celles vues pour les propriétés de page :

• Fermer (sans enregistrer) ;
• Enregistrer (et rester sur le bloc) ;
• Enregistrer et visualiser (ouvrant un popup permettant de visualiser la page) ;
• Enregistrer et fermer le bloc (retour sur la page) ;
• Enregistrer et créer un nouveau bloc (création "à la chaîne" de vos contenus) ;
• Supprimer le bloc.

Onglets

Dans chaque bloc de contenu TYPO3, on retrouve des onglets similaires à ceux vus pour les propriétés de page :

• Onglet Général : on y retrouve le type de bloc (qui peut être modifié), le titre du bloc, la possibilité de rajouter un lien sur ce titre (à utiliser avec parcimonie), le choix de la langue (si votre site est multilingue, cette option est détaillée dans le module Traduction) et la partie de contenu du bloc ;
• Onglet Apparence : on y retrouve l'option permettant d'afficher ou non ce bloc dans le sommaire de la page [principe similaire à l'option "hors menu" des pages] ; de plus, certaines options peuvent être disponibles dans cet onglet, en fonction du type de bloc sélectionné (ces options seront détaillées dans les blocs en question ci-après) ;
• Onglet Accès : comme pour une page, on y retrouve la possibilité d'afficher ou non ce contenu, et de le programmer pour apparaître ou disparaître à une date précise (cette fonctionnalité sera détaillée ci-après).

Enfin, pour chaque modification réalisée dans les blocs, pensez à enregistrer et visualiser pour vérifier le résultat des modifications effectuées !

De manière plus générale, il est conseillé d’enregistrer régulièrement votre travail sur TYPO3.

Pour insérer un fichier sur une page, il existe deux possibilités dans TYPO3 :

• vous pouvez utiliser un bloc de type Liens vers des fichiers (méthode vue ci-après),
• vous pouvez créer un lien vers un fichier depuis un bloc de texte classique (méthode vue plus bas dans ce tutoriel).

Le type de bloc Liens vers des fichiers met en exergue un fichier à télécharger dans votre page web. Il se présente sous forme d'encart accompagné d'un pictogramme définissant le type de fichier (.pdf, .doc, .docx, .xlsx, .jpg,...).

Dans l’onglet Général, outre les options communes à tous les blocs (vues plus haut), on découvre une zone Fichiers qui sert à appeler les fichiers, ainsi qu'une zone Description des fichiers (une par ligne) qui permet de donner un intitulé de fichier plus lisible.

Entre ces deux zones se trouve le bouton permettant de retrouver l'arborescence de fichiers, à partir de laquelle on peut chercher le (ou les) fichier(s) à mettre en ligne :

Lorsqu'on clique sur ce bouton, on découvre à l'ouverture du popup l'arborescence de fichiers (premier module de ce tutoriel).

Après un clic sur le dossier souhaité, la partie de droite affiche la liste des fichiers disponibles dans ce dossier. En agrandissant un peu le popup, on constate des options supplémentaires pour les fichiers :

Import des fichiers

• Pour importer un fichier dans le bloc : clic sur l'intitulé dudit fichier
  > le fichier est importé dans le bloc et le popup se referme ;

• Pour importer tous les fichiers d'un dossier dans le bloc : clic sur Basculer la sélection [tous les fichiers du dossier sont sélectionnés] puis Importer la sélection
  > tous les fichiers sont importés dans le bloc et le popup se referme ;

• Pour importer plusieurs fichiers provenant de plusieurs dossiers (ou dans un ordre particulier) : clic sur le " + " à côté des fichiers concernés [on ne le voit pas sans refermer le popup, mais dans le bloc, votre zone réservée à l'import des fichiers va se remplir au fur et à mesure d'un clic sur un + ]
  > une fois la sélection multiple effectuée, quittez le popup en le fermant : votre zone de fichiers est remplie !
  Si vous avez importé plus de 3 fichiers dans votre bloc, la liste continue en dessous des trois premiers :

Enregistrez vos modifications pour voir apparaître toute votre liste de fichiers entre les deux zones !

Ordre / suppression des fichiers dans le bloc

Pour modifier l'ordre de vos fichiers, sélectionnez celui à déplacer en cliquant dessus, puis utilisez les flèches à droite pour le déplacer :

Il est possible d'en sélectionner plusieurs en appuyant sur CTRL avant de cliquer, ou de sélectionner la liste complète en cliquant d'abord sur le premier de la liste puis sur MAJ tout en cliquant sur le dernier de la liste :

Pour supprimer un fichier, sélectionnez-le puis cliquez sur la croix à droite.

Description du fichier

Pour associer un titre un peu plus "propre" à votre fichier (autre que 01_titre-sans-espace.pdf par exemple), donnez-lui une description dans le champ dédié :

Il est rappelé qu'il faut une description par ligne. Ainsi, si vous avez 3 fichiers dans votre bloc, il faudra avoir 3 lignes dans la zone Description. Ces sauts de ligne se font simplement en appuyant sur la touche Entrée.

Onglet Apparence

Vous trouverez dans cet onglet l'option Afficher la taille du fichier > Activer. La case peut être activée ou non par défaut (tout dépend de la manière dont votre site est configuré). On préconise dans l'ensemble de toujours afficher la taille de votre (vos) document(s) à télécharger afin de prévenir l'internaute du poids du (des) document(s).

Dans l'ensemble, si vos documents pèsent moins de 500 Ko, vous pouvez vous passer d'afficher leur taille. Par contre, s'ils pèsent plus de 500 Ko, il est préférable de rendre (laisser) cette option activée.

En effet, si votre internaute se trouve dans un endroit où son réseau internet n'est pas fameux, il préfèrera probablement attendre de trouver un meilleur réseau pour télécharger un fichier de 1,5 Mo (livret pédagogique, programme de colloque avec une belle mise en page, affiche haute définition, etc.) plutôt que de passer 30 minutes à télécharger ce fichier.

Ce type de bloc permet d'insérer une ou plusieurs images sur une page web (une galerie d'images par exemple).

Après avoir créé un nouveau bloc Images seules sur votre page, vous constaterez que l'onglet Général est relativement vide...

Un nouvel onglet Images apparaît dans ce bloc, et c’est bien évidemment lui qui va être le plus utile. On y retrouve une présentation similaire au bloc Liens vers des fichiers, avec des options supplémentaires :

Importer des images

De la même manière qu'on a importé des fichiers dans le bloc précédent, cliquez sur le bouton entre les deux zones pour naviguer dans votre arborescence de fichiers :

Et toujours de la même manière qu'on a importé des fichiers dans le bloc précédent, on importe autant d’images que nécessaire, puis de retour sur le bloc de contenu (une fois le popup fermé), on retrouve les images dans la zone dédiée :

Enregistrez vos modifications pour voir apparaître toute votre liste de fichiers entre les deux zones !

Ordre / suppression des images

De la même manière que l’on peut modifier l’ordre des fichiers d’un bloc Liens vers des fichiers (ou supprimer des documents importés dans ce bloc), vous pouvez utiliser les flèches Haut et Bas pour déplacer vos images, ou la croix pour en supprimer.

L’ordre permettra d’organiser votre galerie.

Légende

Pour chaque image importée dans le bloc, vous pouvez insérer une légende. Comme vu précédemment dans le bloc Liens vers des fichiers, les légendes doivent être dans les lignes correspondantes à chaque image importée. Si vous réorganisez l'ordre de vos images, pensez à réorganiser l'ordre des légendes.

Lien sur une image

Une image peut être cliquable de deux manières :

• un clic sur l'image peut l'agrandir en mode diaporama
• un clic sur l'image peut pointer vers un lien en particulier (page interne, fichier à télécharger, URL externe...)

Pour insérer un lien sur une image, là encore : un lien par ligne [correspondant à chaque image] !
Cliquer sur l'icône dédiée :

Dans le popup qui s'ouvre, sélectionner l'onglet correspondant à la cible (Page, Fichier, URL externe, Email).

Agrandissement au clic

Vous pouvez sélectionner l'option "Activer" juste en dessous de l'option Agrandissement lors du clic ; l'image s'affichera alors dans un diaporama.

Il est possible de gérer le positionnement des images dans l'onglet "Apparence".

Là encore, chaque site réalisé a ses spécificités et ses options. Essayez de jouer avec les différentes options disponibles dans votre interface en allant voir le résultat obtenu sur votre site !

Et comme expliqué précédemment, si un doute persiste, n'hésitez pas à nous contacter !

Ce type de bloc permet d'intégrer du code HTML, offrant ainsi la possibilité d'intégrer dans votre page une vidéo, un plan interactif, une visionneuse PDF, un fil Twitter, etc.

Le principe est de faire appel à une plateforme permettant d'intégrer du code :

• votre contenu est hébergé sur une plateforme dédiée (une vidéo sera hébergée sur pod.unistra.fr, Youtube, Dailymotion, Viméo... ; un plan sera hébergé sur Google Maps, OpenStreetMap... ; un PDF sera hébergé sur Calaméo, Issuu, Scribd...),
• vous récupérez ce code et l'intégrez dans votre bloc HTML dans TYPO3,
• le contenu est alors automatiquement rapatrié sur votre page web.

Le plus compliqué dans ce bloc est de dénicher le code HTML depuis une plateforme proposant de l'intégration !

1. Récupérer le code d'intégration depuis la plateforme en question (exemple avec Youtube)

Depuis la page Youtube de la vidéo, cliquer sur Partager :

Dans le popup qui s’ouvre, cliquer sur Intégrer :

Puis copier le code fourni par Youtube :

2. Intégrer le code dans TYPO3

De retour dans l'onglet TYPO3, créer un bloc de type « HTML brut »

Coller le code dans la zone dédiée Code HTML :

Quelques exemples pour trouver un code d’intégration

• Sur pod.unistra.fr : après avoir cliqué sur la vidéo sélectionnée, cliquez sur "Intégrer / Partager" en bas à droite de la vidéo, copiez le code et collez-le dans votre zone HTML du bloc TYPO3 ;

• Sur Youtube : après avoir cliqué sur la vidéo sélectionnée, cliquez sur "Partager" en bas à droite de la vidéo, puis cliquez sur "Intégrer", et enfin sélectionnez et copiez le code, puis collez-le dans votre zone HTML du bloc TYPO3 ;

• Sur Google Maps : après avoir trouvé une adresse dans Google Maps, appuyez sur "Partager" dans la colonne de gauche, sous l'adresse choisie, puis sur l'onglet "Intégrer la carte", copiez le code puis collez-le dans votre zone HTML du bloc TYPO3 ;

• Sur Calaméo : après avoir sélectionné le document PDF à intégrer dans votre page, cliquez sur Intégrer juste au-dessus de la prévisualisation du document, puis copiez le code et collez-le dans votre zone HTML du bloc TYPO3.

Dépôt de vidéos ou de publications sur des plateformes dédiées

L’objet de ce tutoriel n’est pas de vous expliquer comment déposer et partager une vidéo ou une publication sur une plateforme dédiée, ni comment créer une carte / un plan d’accès personnalisé, mais seulement de vous donner quelques exemples de ce qu'il est possible d'intégrer dans TYPO3.

Le bloc "Plan du site" permet d'afficher des menus dynamiques : la liste des sous-pages d'une rubrique, une liste de pages définie (que l'on choisit d'afficher), un sommaire de page (qui reprend les titres de blocs contenus dans une page), etc.
Évidemment, pour que des pages s'affichent dans un menu TYPO3, il faut que celles-ci soient bien visibles (et que l'option "Hors menu" ne soit pas cochée !).

Menu de sous-pages

Il s'agit du type de menu le plus fréquemment utilisé sur un site : il permet de faire un focus sur les sous-pages d'une rubrique dans laquelle on se trouve (ou les sous-pages d'une autre rubrique).

Pour créer un menu de sous-pages, on crée un bloc de type "Plan de site" puis on sélectionne le type de menu "Menu des sous-pages des pages sélectionnées" :

Après validation du type de menu et après avoir laissé le temps aux nouveaux champs d'apparaître, deux possibilités :

• si on ne sélectionne aucune page, le menu va afficher par défaut les sous-pages de la rubrique dans laquelle se trouve le bloc ;
• si on sélectionne une page, le menu va afficher les sous-pages de cette page sélectionnée (il faut donc sélectionner la page "parente" des sous-pages à lister).

Contenu à venir...

Il s'agit du bloc le plus utilisé, ce qui fait que la rédaction du tutoriel dédié est la plus longue :)
Merci de votre patience !

Dans l'onglet Accès d'un bloc, on retrouve la possibilité de rendre visible ou non un bloc, ainsi que des champs "Date de début de publication" et "Date de fin de publication". Comme cela a été vu précédemment pour faire apparaître une page à une date précise (dans l'onglet Accès des propriétés d'édition de la page), vous pouvez décider de faire apparaître (ou disparaître) un bloc à une date précise.

Pour utiliser cette option, il suffit de saisir la date souhaitée dans le champ "Date de début de publication" et/ou "Date de fin de publication" puis d'enregistrer :

Si vous utilisez les dates de début / fin de publication, il ne faut pas cocher la case "Désactiver" pour l'option de visibilité du bloc. Si le bloc ne doit apparaître que demain, il n'apparaîtra que demain sur le site (alors que si on coche la case "Désactiver", le bloc n'apparaîtra jamais !).

Cette option permet, par exemple, de faire patienter des internautes en précisant que le lien pour s'inscrire à tel atelier sera disponible du 15 juin au 1er juillet 2019 :

• quelques semaines avant le début des inscriptions, on crée un bloc avec pour date de fin de publication le 15-06-2019 ;
• on crée un autre bloc contenant le lien pour s'inscrire et on définit les dates de publication du bloc comme suit :
  • date de début de publication : 15-06-2019
  • date de fin de publication : 02-07-2019 (pour garder l'affichage du bloc jusqu'au 1er juillet inclus)
• on peut créer un troisième bloc avec pour date de début de début de publication le 02-07-2019 et indiquant que les inscriptions n'étaient possible que jusqu'au 1er juillet inclus.

Ainsi, tout est automatisé pour les semaines à venir !

Masquer un bloc

Comme indiqué plus haut, l'onglet Accès permet de désactiver (masquer) un bloc sur une page. Si celui-ci n'est temporairement plus à jour et que vous êtes en attente de nouvelles mises à jour, vous pouvez temporairement désactiver le bloc afin qu'il ne s'affiche plus sur la page web. Le bloc ne disparaît donc pas de TYPO3 mais seulement de l'interface visible par tout internaute.

Pour ce faire, il suffit de cocher la case "Désactiver" de l'option Visibilité, dans l'onglet Accès du bloc en question puis d'enregistrer la modification :

Il existe également un raccourci pour désactiver/activer un bloc : le pictogramme de la petite ampoule, sur le bloc présent à l'intérieur d'une page (clic sur le titre d'une page pour en afficher les blocs) :

• un clic sur une ampoule allumée (bloc visible) permet de désactiver un bloc, l'ampoule s'éteint alors ;
• un clic sur une ampoule éteinte (bloc désactivé) permet de réactiver un bloc, l'ampoule s'allume alors.

Disjoindre un bloc

Une fois qu'un bloc n'a plus d'utilité, on peut tout simplement le supprimer. Dans TYPO3, cette option s'appelle "Disjoindre un élément" et est représentée par

• un pictogramme représentant des maillons de chaîne qui se cassent si on visualise tous les blocs sur une page ;
• un pictogramme représentant une poubelle si on édite le bloc en lui-même.

Pourquoi "disjoindre" ? Pour la simple et bonne raison que le bloc n'est pas totalement supprimé mais déplacé dans une sorte de corbeille. Ainsi, si vous faites une mauvaise manipulation et que, par mégarde, vous supprimez un bloc en cliquant sur "Disjoindre cet élément", vous pouvez le retrouver (et le restaurer) depuis l'onglet Éléments non utilisés tout en haut de votre page TYPO3 !

Il est bien évidemment possible de déplacer un bloc à l'intérieur d'une page. 2 solutions sont possibles :

• on peut glisser / déposer un bloc à un autre endroit (entre 2 autres blocs existants) en cliquant sur la barre gris foncé entre le type du bloc à gauche et les pictogrammes à droite), et sans relâcher le clic, on déplace le bloc à l'endroit souhaité dans la page (une zone verte apparaît partout où le bloc peut être positionné) :

• on peut couper / coller un bloc grâce à un clic sur l'icône devant le bloc > Couper ; une fois le bloc en mémoire, un nouveau pictogramme apparaît alors sur la page, permettant de coller le bloc à l'endroit souhaité. Cette solution est plus adéquate si votre page web contient une grande quantité de blocs (ou des blocs longs) :

Il est également possible de déplacer un bloc dans une autre page, mais seule la seconde solution expliquée ci-dessus (couper / coller) fonctionne !

Cette option permet, sur l'une de vos pages, d'afficher à l'identique un bloc issu d'une autre page. Cela signifie que si le bloc initial est modifié, sa référence (sur l'autre page) le sera également.

Il est notamment utile pour des blocs de contact ou de documents utiles qui peuvent être utilisés à plusieurs endroits sur le site : lorsqu'une mise à jour (d'un contact avec nom, adresse, téléphone ou horaires ; d'un document type plaquette de diplôme, brochure, livret pédagogique, organigramme...) est nécessaire, vous ne modifiez le bloc qu'à un seul endroit, et partout où une référence à ce bloc sera existante, la mise à jour s'effectuera automatiquement.