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.

En seconde partie, on s'attaquera aux champs de contacts dans la page de profil membre, parce que ce n'est pas pareil.

Historique des mise à jour du tutoriel

- 19 Juillet 2024 : réécriture du script pour rendre les réglages plus faciles

Fonctionnement des champs de contact

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 ! voyez l'astuce ci-dessous) et veillez à ce que l'affichage soit bien actif dans les messages.





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>

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.

Installation  

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
 * Emplacement : sur les sujets
 * @author 'Christa Lostmindy
 */

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

    /* Vos réglages se feront ici */
    const SELECTEUR_CHAMPS_CONTACT = '.postprofile-contact img'; /* sélecteur CSS qui permet d'identifier l'image d'un champ de contact */  
    const LISTE_CHAMPS_CONTACT = [ /* Liste des champs de contact à modifier, suivez l'exemple et faites attention à l'emplacement des virgules et crochets */
        {
            urlImg : '9yh6.png',
            replacementCode : '<i class="ion-ios-flame"></i>',
            title : 'Voir la fiche du personnage'
        },
        {
            urlImg : 'image_champ2.jpg',
            replacementCode : 'Texte de remplacement',
            title : 'Texte au survol'
        },
        {
            urlImg : 'image_champ3.png',
            replacementCode : 'Texte de remplacement',
            title : 'Texte au survol'
        }
    ];

    /* Le script */
    let mapChampsParUrl = {};
    LISTE_CHAMPS_CONTACT.forEach( champ => { mapChampsParUrl[champ.urlImg] = champ});

    document.querySelectorAll(SELECTEUR_CHAMPS_CONTACT)?.forEach(image => {
        let definitionContact = mapChampsParUrl[image.src.substring(image.src.lastIndexOf('/') + 1)];
        if(definitionContact) {
            if (definitionContact.title?.trim().length) image.parentElement.setAttribute('title', definitionContact.title);
            if (definitionContact.replacementCode?.trim().length) image.parentElement.innerHTML = definitionContact.replacementCode;
        }
    });

});

Vous n'avez que deux sections à modifier :

La variable SELECTEUR_CHAMPS_CONTACT a besoin d'avoir pour valeur le sélecteur CSS des images des champs de contact.



La variable LISTE_CHAMPS_CONTACT est une liste d'éléments à modifier, chaque élément (entre accolades) comprenant trois informations : l'url de l'image (urlImg), le code de remplacement (remplacementCode) et le texte qui apparaitra au survol (title). Vous pouvez laisser ces deux derniers champs vides sous la forme '', si vous ne souhaitez pas retirer l'image par exemple.

Concusion

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 !

Fonctionnement dans la page de profil

Le cas du profil des membres

A la différence du profil dans les messages, les champs de contact dans la page de profil d'un membre possèdent un identifiant (à deux exceptions près parce que FA fait n'importe quoi). Il est plus facile de les personnaliser via CSS, mais ça ne change rien au problème du texte qui apparait au survol.

Le template du profil est profile_view_body, que vous pourrez aller éditer en allant dans votre panneau d'administration, onglet Affichage, section Templates → Profil. La partie qui nous préoccupe est la suivante (sur modernBB) :

Code:

<!-- BEGIN contact_field -->
  <dl id="field_id{contact_field.ID}" class="left-box details" style="width: 80%;">
    <dt>{contact_field.LABEL}</dt> <dd>{contact_field.CONTENT}</dd>
  </dl>
<!-- END contact_field -->

Pas de panique si c'est différent pour vous, vérifiez simplement la présence de la boucle contact_field (une boucle est définie par les commentaires BEGIN/END) et des variables {contact_field.CONTENT} et {contact_field.ID}, qui sont nécessaires au script. Vous pourriez totalement coder cette partie comme ceci :

Code:

<!-- BEGIN contact_field -->
<div class="champ_contact contact{contact_field.ID}">{contact_field.CONTENT}</div>
<!-- END contact_field -->

Grâce à la variable {contact_field.ID}, les champs se voient attribuer un identifiant numérique unique que vous pouvez facilement vérifier avec votre inspecteur de code dans le profil. Une observation attentive vous permettra également de découvrir où ForumActif a fait n'importe quoi : apparemment, cette variable ne contient rien du tout pour le champ des MPs et celui de l'email. Fort heureusement, on a quand même moyen de les isoler des autres pour les modifier individuellement.

Les sélecteurs

Au lieu d'utiliser le lien de l'image, le nouveau script va utiliser des sélecteurs traditionnels pour cibler l'image du champ de contact que vous souhaitez modifier.

• Pour l'image des MP, le sélecteur sera #i_icon_pm


• Pour l'image des emails, le sélecteur sera #i_icon_email


• Pour l'image des autres champs de contact, le sélecteur sera :
  
  • #field_idXXX .field_uneditable img si vous gardez le template par défaut
    
  • .contactXXX .field_uneditable img avec la version alternative que j'ai proposée.
  XXX est l'identifiant unique du champ.

Installation  

Le javascript

Dans votre panneau d'administration, direction 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 toutes les pages.

Code:

/**
 * Script de personnalisation des champs de contact dans la page de profil
 * Emplacement : toutes les pages
 * @author 'Christa Lostmindy
 */
const LISTE_CHAMPS_CONTACT = [ /* Liste des champs de contact à modifier, suivez l'exemple et faites attention à l'emplacement des virgules et crochets */
    {
        selector : '#field_id6 .field_uneditable img',
        replacementCode : '<i class="ion-ios-flame"></i> Fiche',
        title : 'Voir la fiche du personnage'
    },
    {
        selector : '#i_icon_pm',
        replacementCode : 'Texte de remplacement',
        title : 'Texte au survol'
    },
    {
        selector : '#i_icon_email',
        replacementCode : 'Texte de remplacement',
        title : 'Texte au survol'
    }
];

function customChampContact(liste) {
    liste.forEach(replacement => {
        const targetElement = document.querySelector(replacement.selector);
        if (targetElement) {
            if(replacement.title?.trim().length) targetElement.closest('a')?.setAttribute('title', replacement.title);
            if(replacement.replacementCode?.trim().length) targetElement.parentElement.innerHTML = replacement.replacementCode;
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    customChampContact(LISTE_CHAMPS_CONTACT);
});



Ca ne marche pas avec Wombat !

Mais si, mais si ! Il suffit juste d'en informer Wombat via son script d'initialisation, qui se trouve dans votre template overall_footer_end et devrait ressembler à ceci :

Code:

(function() {
 new Wombat({
        /* plein d'options ici */
  });
})();

Wombat permet de rajouter une option afterLoad qui chargera un script après avoir affiché le profil. On va l'ajouter comme ceci :

Code:

(function() {
 new Wombat({
        afterLoad: function(aside, overlay) {
          /* Personnalisation des champs de contact du profil */
          try { customChampContact(LISTE_CHAMPS_CONTACT); }
          catch { console.log("Erreur profils Wombat : Il manque le script de personnalisation des champs de contact dans la page de profil")};

          /* D'autres scripts peuvent être ajoutés en plus de celui là !*/

        }
  });
})();


Ce script utilise le script précédemment ajouté, donc si jamais vous l'avez sauté en vous disant que ça ne vous concernait pas parce que Wombat est activé sur votre forum, remontez d'un cran et suivez les instructions concernant la page de profil.

Et avec ça, vous avez tous les outils pour personnaliser vos champs de contact aussi bien dans les messages que dans la page de profil !