news : afficher le titre de la news comme titre de la page et + encore

[HevyRemy]

De rien
J'ai même poussé ce concept un peu plus loin.

On va dire que je suis un peu un "maniaque" de la hiérarchie des pages et du souci de la facilité d'utilisation, j'ai donc 2 pages différentes (affichées dans la liste, dans la section "Pages" de l'administration) pour les actus :
- une page de listing ("Toute l'actualité"), alias "news-list"
- une page spécifique dédiée à l'affichage du détail des news, alias "news-detail"

Seule la page de listing a l'option "afficher dans le menu", ma navigation est de toute manière configurée pour exclure les pages préfixées de "news" (comme ça, on se retrouve pas avec les pages "conteneur" d'articles, ni dans le menu principal, ni dans le plan du site).

L'objectif à atteindre était d'avoir quelque chose comme ça dans le fil d'Ariane :
› [url=]Toute l'actualité › Titre d'article

Donc sans le nom de la page servant à afficher le détail d'un article.

L'extension du principe exposé par Jean repose sur 1 idée simple : ajouter un peu de balisage dans le breadcrumb modifié, et ajouter 1 règle CSS.

1. Modification du breadcrumb : (dans votre/vos gabarit(s))

Code :

<div class="breadcrumbs{if isset($pagetitle)} newsDetail{/if}">
{breadcrumbs starttext='Vous êtes ici' root='Home' delimiter='»'}{if isset($pagetitle)}<span class="newsPointer"> -> </span>{$pagetitle}{/if}
</div>

On ajoute donc une condition sur la classe du breadcrumb (normalement j'utilise id="Breadcrumbs", j'ai ici transposé à l'exposé de Jean) : si "$pagetitle" est défini, on rajoute newsDetail (ou ce que vous voulez, indiquant qu'on est en détail de news) à la classe du breadcrumb.
On ajoute aussi du balisage autour de la "flèche" pointant le titre d'article. Ici, un <span> avec une classe "newsPointer"

2. Règles CSS additionnelles :

Code :

.breadcrumbs.newsDetail .lastitem, .breadcrumbs.newsDetail .newsPointer {
    position:absolute;
    top:-9999em;
    left:-9999em;
    visibility:hidden;
    display:none;
}

C'est le cœur de l'astuce ! Le breadcrumbs généré ajoute, sur le dernier titre de page affiché, le balisage <span class="lastitem"> ; autant s'en servir pour arriver à nos fins.
Dans le cas présent, on veut masquer le vrai nom de la page dédiée au détail des news ("article détaillé", "détail de news", en fonction de votre nommage des pages), ainsi que le "pointeur" de news (la flèche, tiret, etc…). On positionne donc ces éléments hors de l'écran, et pour être sûr (lecteurs vocaux, etc…), on les masque avec les 2 méthodes possibles.

On se retrouve donc bien, au final, avec (par exemple) :
› [url=]Toute l'actualité › Titre d'article

Voilà C'est pas plus compliqué que ça. Par contre, faites gaffe avec les classes multiples (.classA.classB), car Internet Explorer 6 a un "bug" faisant qu'il ne prend en compte que la dernière classe de la chaîne.

En espérant que ça serve à d'autres