Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

16.10.2009

Personnalisez l'affichage de vos listes de liens en proposant une description dans une infobulle

Personnalisez l'affichage de vos listes de liens en donnant quelques informations aux visiteurs qui s'apprêtent à les suivre. Révision d'une note publiée le 27/01/2009.

Parmi tous les trucs qui m'énervent, il y a le fil rouge des fromages fondus du bovin souriant, et l'huile des sardines en boîte bien sûr, mais aussi les cases de formulaire inutiles. Quand vous créer une liste de liens avec le module Hautetfort, et que vous faites une description appliquée, aussi pertinente que concise... Elle ne sert à rien. Elle est dans le formulaire, vous retrouvez la description dans le module d'administration, mais pas moyen d'afficher sur la partie publique du blog. Ou alors, et c'est possible, je ne comprend rien à rien.

Je vous propose de rendre cette description disponible dans une infobulle, cette zone qui s'affiche au survol d'un lien hypertexte. C'est déjà en place pour la liste de liens « Échangeur », mais vous pouvez voir un module de test ici.


Le code d'origine, visible dans le modèle de page de colonne, est le suivant :

{bloglist folder="echangeur" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
{if $listitem.first}
<div class="box-decorator1"><div class="box-decorator2"><div class="box-decorator3">
<div class="decorator1"><div class="decorator2">
<h2>{literal}Échangeur{/literal}</h2></div></div>
<div class="boxcontent-decorator1"><div class="boxcontent-decorator2"><div class="boxcontent-decorator3"><ul>
{/if}
{if $listitem.list_link_item_rss}
<li class="link"><a href="{$listitem.list_link_item_rss}">
<img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>&nbsp;&nbsp;
{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}</li>
{else}<li>
{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}</li>
{/if}
{if $listitem.last}
</ul></div></div></div></div></div></div>
{/if}
{/bloglist}


Débarassé des instructions de mise en forme, il devient :

{bloglist folder="echangeur" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
{if $listitem.first}<ul> {/if}
{if $listitem.list_link_item_rss}
<li class="link"><a href="{$listitem.list_link_item_rss}">
<img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>&nbsp;&nbsp;
{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}</li>
{else}<li>
{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}</li>
{/if}
{if $listitem.last} </ul>
{/if}
{/bloglist}

Vous pourriez le copier en l'état dans un élément de colonne "texte" personnalisé. À condition de donner un nom, et de ne pas centrer le contenu, vous auriez le même résultat que pour un affihcage standard.

Dans l'ordre, on retrouve notamment :
bloglist folder="echangeur" le nom du dossier,
sort="list_item_name ASC" le critère de tri (ici l'ordre alpha ascendant sur le nom du lien).
{if $listitem.list_link_item_rss} étant la vérification de l'existence d'un flux RSS. Cela signifie : si cette zone est renseignée dans la base pour ce lien, dans ce dossier, alors on affiche l'image orange RSS qui pointe vers le flux.
{else} alternative à la condition précédente, on affiche le nom du lien qui point vers le site.
{/if} fin de la boucle. C'est un mécanisme assez simple, que vous pouvez retrouver dans une formule de tableur "Si alors / Sinon". Autrement dit "If then / Else".

Pour que l'image du flux RSS ne décale pas l'affichage des liens, je la passe à la fin du texte, c'est mon côté maniaque discutable.

 

Le code devient donc :

{bloglist folder="echangeur" type="2" id="97896" sort="list_item_name ASC" assign="listitem"}
{if $listitem.first}<ul>{/if}
{if $listitem.list_link_item_rss}
<li class="link">{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}&nbsp;<a href="{$listitem.list_link_item_rss}">
<img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>
</li>
{else}<li>
{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}</li>
{/if}
{if $listitem.last}</ul>
{/if}
{/bloglist}


Comment afficher l'infobulle ?

Il nous faut créer un lien hypertexte auquel nous attribuerons un titre. Dans l'idéal, il aurait fallu pouvoir attribuer la balise "title" au lien affiché, mais je n'ai pas réussi à modifier efficacement la portion de code Hautetfort {link href="`$listitem.url`" text="`$truncitem`"}. Vous noterez que ce lien affiche déjà une infobulle qui reprend le nom du lien. Ce dernier peut être coupé dans la colonne (truncate:70), il est affiché en intégralité en infobulle.

J'ai donc choisi d'afficher les caractères [?], auxquels seront attribués le lien hypertexte de l'item, avec la description dans la balise de titre.
Ce qui donne : <a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>

Il faudra doubler cette instruction pour le cas avec RSS et le cas sans RSS. Les esprits vifs que vous êtes me demanderont d'emblée : « Oui mais quand il n'y a pas de description, le [?] s'affiche-t-il tout de même ? »

Il faut effectivement créer une condition, pour qu'en l'absence de description le [?] ne s'affiche pas. Ce qui, en l'absence de RSS, nous donne : {if $listitem.notes}<a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>{else}{/if}

Ajouter la description de la liste

Cette méthode a un inconvénient : faire disparaître la description de la liste que vous avez peut-être renseignée. Rien ne vous empêche de la mettre dans le code en direct, comme vous le verrez plus bas.

Le code complet de l'élément de colonne "liste de liens" :

<!-- liste de liens personnalisée -->
{bloglist folder="liste-de-test" type="2" id="1724729" sort="list_item_name ASC" assign="listitem"}
{if $listitem.first}
Description de ma liste de liens
<ul>{/if}
{if $listitem.list_link_item_rss}
<li class="link">{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}
{if $listitem.notes}<a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>
<a href="{$listitem.list_link_item_rss}" title="{$listitem.notes|nl2br}">
<img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>
{else}
<a href="{$listitem.list_link_item_rss}">
<img src="{$platform.url}images/extras/rss.gif" alt="RSS feed" /></a>{/if}</li>
{else}
<li>
{assign var="truncitem" value=$listitem.name|truncate:70}
{link href="`$listitem.url`" text="`$truncitem`"}
{if $listitem.notes}<a href="{$listitem.url}" title="{$listitem.notes}">&nbsp;[?]&nbsp;</a>
{else}{/if}</li>
{/if}
{if $listitem.last} </ul>{/if}
{/bloglist}
<!-- /liste de liens personnalisée -->

Copier puis coller intégralement dans l'un élément personnalisé de colonne fera afficher MA liste de liens de test. Ce qui n'a aucun intérêt.
Vous devez donc récupérer les valeurs pour folder et pour id de votre liste.

- Repérez la colonne qui contient la liste de liens qui vous intéresse.
- Passez en configuration avancée
- En face du modèle de page de la colonne concernée, cliquez sur "Modifier le modèle"
- Cherchez "bloglist" et relevez les valeurs de folder et id, pour la liste qui vous intéresse
- Dans le code ci-dessous, remplacez les valeurs surlignées, par les votres

Il vous reste à réviser le méthode de création d'un élément de colonne personnalisé. Ah oui, la mauvaise nouvelle, c'est qu'il faudra le faire pour chaque liste de liens.

Bientôt nous verrons comment mettre une liste de liens dans un menu déroulant.
(Quoi "Encore ?!...").

Rappel : Cette note a été initialement publiée le 29/01/2009 sous le titre "Afficher la description d'un lien issu d'une liste dans une info-bulle"

Commentaires

Bonsoir Gee Mee,

Bien vu l'allusion au "fil rouge du fromage fondu du bovin souriant" !!!!

C'est vrai que c'est un peu énervant !!!!

La marque est tellement connue que l'on sait tout de suite de quoi il s'agit, sans la nommer ouvertement !!!!

Quand au reste de votre note (le plus intéressant), c'est toujours aussi complet, même si je m'abstiens de pratiquer vos conseils (du moins pour l'instant) car je suis un peu comme notre confrère "Lecomte"...

Cela ne m'empêche pas de trouver vos conseils et vos explications très utiles.

Bravo Gee Mee !!!!

Bon week-end

Écrit par : Gilles | 31.01.2009

Répondre à ce commentaire

@Gilles : Pour être tout à fait honnête, c'est un emprunt à la prose de Desproges.
Très bizarrement cette "Chronique de la haine ordinaire" est disponible sur Deezer, tiens là : http://www.deezer.com/track/2568720

Quant au reste de votre commentaire, je vous remercie de l'intérêt qu'il contient pour mes notes... qui vous sont utiles, théoriquement ;-)

Écrit par : Gee Mee | 01.02.2009

Répondre à ce commentaire

Je ne connaissais pas, Merci du lien, Gee Mee.

Peut-être qu'il me serait utile que je mette en ligne un blog "fictif", uniquement réservé à des tests que je pourrai faire en suivant vos conseils...

Dans le cas où je me planterai.

Pourquoi pas.

Écrit par : Gilles | 03.02.2009

Répondre à ce commentaire

@ Gilles : Effectivement, je ne saurais trop vous conseiller de disposer d'un blog "fictif", d'un "brouillon", d'un "labo"... En développement de projet informatique on parle aussi de "bac à sable".

Je vous soupçonne d'avoir trouvé le mien dans vos référents ;-)

Écrit par : Gee Mee | 03.02.2009

Répondre à ce commentaire

Bonsoir Gee Mee,

Merci pour l'information, je ne connaissais pas non plus !!!!

Quand je vous disais que mes connaissances techniques étaient et sont toujours limitées...

Dites-moi, tant que vous y êtes, je ne comprends pas votre phrase : "Je vous soupçonne d'avoir trouvé le mien dans vos référents."

J'ai regardé la définition du mot référent, mais je ne comprends pas le sens de votre phrase.

Ce n'est pas une plaisanterie, Gee Mee, pouvez-vous éclairer ma lanterne car la nuit vient de tomber et je suis "largué" !!!!

Merci d'avance !!!!

Bonne continuation

Écrit par : Gilles | 03.02.2009

Répondre à ce commentaire

@Gilles : Je pensais que vous aviez trouvé l'adresse de mon labo dans les "origines de vos visiteurs" des statistiques détaillées de votre propre blog. Puisque j'y fais des essais, et puisque j'ai mis à jour la description du lien vers votre blog, c'était plausible.
Le "référent", dans le fichier de log, est l'adresse de la page d'origine de la requête arrivant sur un serveur... C'est lumineux non ? Je ferai une note à propos des statistiques ;-)

Écrit par : Gee Mee | 04.02.2009

Répondre à ce commentaire

Gee Mee,

Je comprends mieux maintenant, merci !!!!

Non, je ne suis pas venu chez vous par ce moyen mais en compulsant, par hasard, à un moment donné, la liste des dernières notes publiées sur la plateforme haut et fort, tout simplement....

Une de vos notes m'a "attiré" chez vous et j'y suis resté.

Je pratique plus souvent de cette façon, comme quoi, la manière de rédiger les premières phrases d'une note sont importantes car elles "attirent" une partie des lecteurs.

Le choix de visiter un blog reste de toutes façons subjectif.

J'attends avec une certaine impatience, Gee Mee, la note ayant pour sujet les statistiques !!!!

Car, alors, la pénombre deviendra vraiment éclairage et lumière.

Bonne soirée !!!!

Écrit par : Gilles | 04.02.2009

Répondre à ce commentaire

Les commentaires sont fermés.