Personnaliser les champs de contact dans le profil des messages

Présentation

Sur Forumactif, on peut rajouter des champs de contact aux profils des utilisateurs. Parfois c'est pour les réseaux sociaux, parfois c'est pour faire un lien vers une fiche de personnage, un sujet de présentation, etc. Mais lorsqu'il s'agit d'afficher ces liens dans le profil des messages, les possibilités de personnalisation sont limitées. Et en plus, au survol, tous ces champs de contact ont la même infobulle "Voir le site de l'utilisateur". Pas forcément très parlant !

Dans ce tutoriel, on va s'attaquer au problème pour élargir vos possibilités de personnalisation du champ dans le profil des messages.

Installation  

Les champs de contact
Pour rappel, les champs de contacts se customisent dans le panneau d'administration, rubrique Utilisateurs & Groupes, dans Utilisateurs → Profils → Champs contact. Lorsque vous définissez vos champs, remplissez le champ URL de l'icône avec le lien d'une image (le nom doit être unique !) et veillez à ce que l'affichage soit bien actif dans les messages.

Ce tutoriel a été testé en priorité avec les champs de contact de type adresse internet. Il ne marche pas pour les numéros de téléphone, mais a l'air de fonctionner pour la plupart des réseaux sociaux.

Au moment de l'affichage dans votre profil, chacun des champs de contact (s'il est rempli) s'affichera en principe avec le code suivant :

Code:

<a href="LIEN INDIQUE PAR LE MEMBRE" title="Visiter le site web de l'utilisateur" target="_blank" rel="nofollow"><img src="URL ICONE DE CONTACT" alt="LIEN INDIQUE PAR LE MEMBRE"></a>

Même s'il est possible de déjà faire quelque chose avec un peu de CSS, l'attribut title n'est pas aussi facile à modifier, on va donc passer par du Javascript. Mais avant ça, vous allez faire un petit tour côté template de la force.

Du repérage dans le template
En principe, vous ne devriez pas avoir quoi que ce soit à modifier, mais tout dépend de si vos templates sont déjà modifiés ou pas ! Du coup, rendez-vous dans votre panneau d'administration, rubrique Affichage, dans Templates → Général et allez éditer le template viewtopic_body.

Cherchez la section correspondant à l'affichage des champs de contact supplémentaires :

Code:

<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field -->

Regardez un peu autour pour voir si cette partie est incluse dans un conteneur (généralement un <div></div>) avec une classe unique.

Par exemple, sur ModernBB, cette partie est incluse dans un conteneur ayant la classe .postprofile-contact, et sur le Blank Theme, c'est la classe .profil_contact.

S'il n'y a pas de classe unique pour cette partie du code dans votre version du template, englobez cette partie du code dans un conteneur avec un nom de classe de votre choix.

Le javascript
Pour commencer, dans votre panneau d'administration, rendez-vous cette fois-ci dans l'onglet Modules, dans HTML & Javascript → Gestion des codes Javascript. Vérifiez bien que l'option Activer la gestion des codes Javascript est bien réglée sur Oui, puis créez un nouveau javascript avec un titre explicite, que vous activerez sur les sujets.

Mettez-y le code suivant :

Code:

/**
 * Script de personnalisation des champs de contact dans les messages
 * Par 'Christa Lostmindy
 */

document.addEventListener('DOMContentLoaded', () => {

    /* Vos réglages se feront ici */
    const SELECTEUR_CHAMPS_CONTACT = '.postprofile-contact'; /* sélecteur CSS qui permet d'identifier la zone où le script trouvera les champs de contact */  
    const CHAMPS_CONTACT = {
        /* Liste des champs de contact à modifier, suivez l'exemple et faites attention à l'emplacement des virgules et crochets */
        '9yh6.png': ['<strong>Fiche</strong>', 'Voir la fiche du personnage'],
        'image_champ2.png': ['code HTML de remplacement', 'texte au survol'],
        'image_champ3.png': ['code HTML de remplacement', 'texte au survol']
    };

    /* Le script */
    const LST_IMAGES_CONTACT = Object.keys(CHAMPS_CONTACT);
    let icones_a_remplacer = document.querySelectorAll(SELECTEUR_CHAMPS_CONTACT + ' img');
    icones_a_remplacer.forEach(image => {
        let path = image.src.substring(image.src.lastIndexOf('/') + 1);
        if (LST_IMAGES_CONTACT.includes(path)) {
            if (CHAMPS_CONTACT[path][1].trim().length) image.parentElement.setAttribute('title', CHAMPS_CONTACT[path][1]);
            if (CHAMPS_CONTACT[path][0].trim().length) image.parentElement.innerHTML = CHAMPS_CONTACT[path][0];
        }
    });

});

Vous n'avez que deux sections à modifier :

La variable SELECTEUR_CHAMPS_CONTACT a besoin d'avoir pour valeur le sélecteur des champs de contact dans votre template, que vous aurez pu définir à l'étape précédente.

La variable CHAMPS_CONTACT est une liste d'éléments à modifier, identifiés par le nom de l'image attribuée à votre champ de contact. Entre crochets, vous avez d'abord le code HTML qui remplacera l'image, puis le texte qui apparaitra au survol. Vous pouvez laisser ces champs vides sous la forme '', si vous ne souhaitez pas retirer l'image par exemple.

En indiquant les différents textes de remplacement, faites attention à précéder les apostrophes dans le texte par un anti-slash \, par exemple :

Code:

const CHAMPS_CONTACT = {
    'image1.png': ['<strong>L\'attrappe-rêves</strong>', 'Accéder à l\'attrappe-rêves'],
    /* etc */
};

Trucs et astuces
Pas envie de créer une image pour chacun de vos champs de contact ? (Merci à Kim pour l'astuce !)
Vous pouvez utiliser un faux lien d'image tant qu'il est "valide". Par exemple https://fausseimage.com/fiche.png passera très bien.
Au moment de l'exécution du script, même si l'image n'existe pas, il trouvera bien le nom d'image fiche.png. Pensez juste à utiliser un nom d'image différent pour chaque bouton de contact et voilà !
Notez cependant que le rendu final risque d'être imbuvable si vous avez des utilisateurs dont le javascript est désactivé (une piste à explorer si on vous remonte des bugs).

La variable CHAMPS_CONTACT vous fait peur ? Décortiquons un peu son fonctionnement.
- Il s'agit d'un groupe d'objets, donc il faut l'encadrer par des accolades : { ... };
- A l'intérieur, chaque ligne correspond à un champ de contact à modifier, et après chaque ligne vous devez mettre une virgule (sauf pour la dernière de la liste)
- Une ligne peut être "décomposée" comme ceci :

Code:

'icon_user_profile.png': // nom de l'image qui identifie le champ
  [
    '<strong>Fiche</strong>', // texte, icône ou image de remplacement
    'Voir la fiche du personnage' // texte au survol
  ],

Vous pouvez utiliser cette mise en page du code si vous préférez, tant que vous n'oubliez pas la virgule en fin de "ligne" (Javascript aime se plaindre de l'oubli de la ponctuation).

Conclusion
Si tout s'est bien passé, le script devrait modifier le code final à l'affichage des messages, sous la forme suivante :

Code:

<a href="LIEN INDIQUE PAR LE MEMBRE" title="TEXTE DE REMPLACEMENT DE L'INFOBULLE" target="_blank" rel="nofollow">HTML DE REMPLACEMENT DE L'IMAGE</a>

Vous devriez désormais avoir un rendu qui colle à vos préférences !