Aller au contenu principal

4 - Les vues blog

Une vue blog affiche plusieurs articles sur une même page : une catégorie, une sélection, les articles à la une. Corpus n'ajoute aucun réglage pour la mettre en forme : tout se règle dans le lien de menu, avec les options de Joomla.

C'est délibéré. Un réglage ajouté par un template disparaît le jour où l'on change de template ; une option de Joomla, non.

Où sont les réglages

Menus → votre lien de menu → onglet Affichage du Blog.

Les quatre réglages qui décident de la structure

Articles en pleine largeur. Le nombre d'articles mis en avant, en tête de page. Zéro, un, ou davantage. Ils sont dessinés autrement que les autres : à partir de un, Corpus place l'image à gauche et le texte à droite.

Introduction des articles. Le nombre d'articles affichés ensuite, sous forme de vignettes.

Nombre de colonnes. Sur combien de colonnes ces vignettes se répartissent.

Direction multicolonne. Comment on les lit, et ce n'est pas un détail de présentation :

  • Ligne, de gauche à droite, puis à la ligne. Toutes les vignettes d'une rangée ont la même hauteur.
  • Colonne, de haut en bas, une colonne après l'autre. Chaque vignette garde sa hauteur propre, et les colonnes s'équilibrent. C'est ce qu'on appelle souvent une mise en page « en maçonnerie ».

Dans les deux cas, l'ordre de lecture à l'écran est celui du document : une personne qui navigue au clavier ou avec un lecteur d'écran suit exactement le même chemin que l'œil.

Sur écran étroit, toutes les mises en page repassent sur une seule colonne. Trois colonnes sur un téléphone ne sont pas trois colonnes, ce sont trois bandes de deux mots.

Les classes de mise en page

Deux champs du même onglet acceptent des mots-clés :

  • Classe de l'article principal, pour les articles en pleine largeur ;
  • Classe d'article, pour les vignettes du dessous.

Ces mots-clés sont ceux de Cassiopeia, le template livré avec Joomla. Corpus les reprend volontairement : si vous avez déjà monté un site Joomla 4, vous n'avez rien à réapprendre.

Ces mots-clés ne servent que tant qu'aucun template blog n'est affecté. Dès qu'une catégorie en reçoit un, c'est le template qui dit où va l'image, et image-left, image-right et image-alternate n'agissent plus sur les articles de cette catégorie. Les autres catégories, elles, ne changent pas.

Corpus livre trois templates blog qui rendent la même chose sous un nom qu'on retient : Image à gauche, Image à droite, Image en dessous. Voir le chapitre Les templates blog.

Mot-clé Ce qu'il fait
image-left L'image à gauche, le texte à droite
image-right L'inverse
image-alternate À combiner avec l'un des deux : un côté sur deux
image-bottom L'image sous le texte
boxed La vignette dans un cadre

Ils se combinent, séparés par des espaces :

image-left image-alternate boxed

Deux points à connaître.

La mise côte à côte ne vaut que sur une seule colonne de vignettes. Si vous demandez trois colonnes, couper chaque vignette en deux ne laisse la place de lire ni l'image ni le texte : Corpus replace alors l'image au-dessus. Ce n'est pas une limite du template, c'est une question de largeur disponible.

image-alternate compte les vignettes affichées, pas les articles de la catégorie. Sur la deuxième page, l'alternance recommence donc au même côté qu'en première page.

L'alignement de l'image

Chaque article a un champ Alignement pour son image d'introduction : onglet Images et liens de l'article, ou globalement dans le lien de menu.

Dans beaucoup de templates, ce réglage fait flotter l'image : le texte s'enroule autour. Corpus ne le fait pas. Le texte enroulé autour d'une image se disloque au zoom et devient illisible sur téléphone, et la place de l'image relève de la mise en page de la liste, pas de chaque article pris isolément. Utilisez image-left ou image-right sur le lien de menu.

Ce que Corpus dessine sans qu'on le demande

  • Le titre de l'article porte le filet.
  • Le lien est sur le titre, jamais sur la vignette entière : un lien doit s'annoncer par son intitulé, et une carte cliquable en entier ne se sélectionne plus ni au clavier ni à la souris.
  • La pagination est en bas, avec des flèches dessinées et la page courante annoncée : elle n'est pas un lien vers elle-même.

Article précédent / article suivant

Ces deux liens ne viennent pas du template mais du plugin Contenu - Navigation dans les pages, à activer dans Système → Plugins. Ils apparaissent au bas de l'article et suivent l'ordre de la catégorie.

Corpus affiche le titre de l'article de destination, avec la mention « Article précédent » ou « Article suivant » au-dessus.

Le plugin, lui, affiche seulement « Précédent » et « Suivant », et range le titre réel dans un texte réservé aux lecteurs d'écran. Autrement dit : une personne aveugle savait où le lien menait, une personne voyante non. C'est l'inverse de ce qu'on veut, et deux liens intitulés « Suivant » sur une page ne se comprennent pas hors contexte : RGAA 6.1.

La carte, et son absence

Par défaut, chaque article d'une vue blog, la une comprise, est dessiné dans une carte : trait fin, angle, ombre légère, marge intérieure. C'est ce que montre la maquette de Corpus.

Pour l'enlever, écrivez no-card dans Classe d'article ou Classe de l'article principal. Le nom vient de Joomla : c'est déjà celui du style de module sans cadre, et Cassiopeia le reprend. Il n'y avait pas de raison de fabriquer un troisième mot pour la même idée.

Sans cadre, la marge intérieure disparaît aussi : le texte s'aligne alors sur l'image et sur le reste de la page. L'image, elle, reprend l'angle que la carte portait pour elle.

boxed et corpus-encadre sont encore acceptés mais ne font plus rien : ils demandent le cadre, qui est devenu le comportement par défaut.

À jour pour Corpus 2.1.43.