Visually linked

Installation pour Dotclear

l'nstallation des Liens visuels dans Dotclear est très simple.
Il suffit d'ajouter les lignes plus bas dans le fichier 'smilies.txt' qui se trouve dans le dossier '/themes/default/smilies/'

;a; a.png
;w; w.png
;v; v.png
;p; p.png

Et n'oubliez pas d'ajouter les images correspondantes dans le même dossier.

Exemple

Voici une phrase illustrant l'utilisation des liens visuels dans un environment web riche en media.

Faites le test dans une pleine page textuelle et ajouter des liens visuels pour vraiment voir l'impact de l'information visuelle y découlant.
D'un coup d'oeil on peut facilemnt avoir l'information sur la nature des liens et ceci avant de cliquer dessus.

Liens visuels

lien à d'autre siteweb
lien à une photo ou image
lien à un fichier audio
lien à un fichier vidéo

Une petite image (icon) signaletique qui nous renseigne visuellement sur la nature d'un lien si c'est un lien vers un siteweb (ou tout autre texte), vers une image, un fichier audio ou vidéo.

La manière de l'implanter est de la même façon qu'on installe des smilies et puis il suffit d'ajouter les images dans le même dossier.

Install in B2 evolution

Installing the Visually Linked icons to B2evolution is really easy.
You need to open the file '_formatting.php' in your favorite editor and add those lines just after this '$b2smilies = array('

';a;' => 'a.png',
';w;' => 'w.png',
';v;' => 'v.png',
';p;' => 'p.png',

And don't forget to add the corresponding images to the 'similies' folder 'img/smilies''.
That's it , your site is now Visullay Linked.

Install in Wordpress

Installing the Visually Linked icons to Word Press is really easy.
You need to open the file 'wp-config-extra.php' in your favorite editor and add those lines just after this '$wpsmiliestrans = array('

';a;' => 'a.png',
';w;' => 'w.png',
';v;' => 'v.png',
';p;' => 'p.png',

And don't forget to add the corresponding images to the 'similies' folder inside 'wp-images' folder.
That's it , your site is now Visullay Linked.

The MT mod Zipped

Download the how to be visually linked for Movable Type including the images and logo in a zipped file.

Install in Movable Type

Implementing the visually linked icons is practically the same as implementing smileys in Movable Type , it can be done in different ways just choose the one that suites you.
I opted here to a mod (hack). I can use ";w;" next to a link to other web site and it will get automatically replaced by the corresponding little image next to the link.

I've adapted the code from here passing by there :

Open The file in MTdirectory/lib/MT/Util.pm

After making a backup for your file, look for:

"sub html_text_transform {
my $str = shift;
$str ||= '';"

and add those lines

• $str =~s/\;a;/<img src=\"http:\/\/YOURSITE.com\/FOLDER\/a.png\" width=\"20\" height=\"16\"border=\"0\" alt=\"Audio\"\/>/g;
• $str =~s/\;v;/<img src=\"http:\/\/YOURSITE.com\/FOLDER\/v.png\" width=\"20\" height=\"16\" border=\"0\" alt=\"Video\"\/>/g;
• $str =~s/\;p;/<img src=\"http:\/\/YOURSITE.com\/FOLDER\/p.png\" width=\"20\" height=\"16\" border=\"0\" alt=\"Photo\"\/>/g;
• $str =~s/\;w;/<img src=\"http:\/\/YOURSITE.com\/FOLDER\/w.png\" width=\"20\" height=\"16\" border=\"0\" alt=\"Website\"\/>/g;

Watch the escape "\" and don't forget to change "YOURSITE.com" "FOLDER" to their corresponding values or the image name if you're using your own images.

And now when typing ";a;" it get replaced by

• ";v;" by


• ":p;" by


• ";w;" by

Here is some other ways to get visuallly linked :
You can use MTinclude tag (to include a file that you created before where there is the img tag and the url for your images) with the aid of the ProcessTags so you can use MT tags inside posts.
Otherwise get the help of bradchoate MTMacro. And if you need a solution for Greymatter if not try javascript's .

Example

Here is a sentence to illustrate the use of the visual links in a rich web media environment .

Try to put some visual links in a full text page to really see the visual impact when you do a fast scroll and can clearly see links and know exactly where or what they lead to before clicking on them.