Tutoriel Ajouter l'option vidéo de profil sur votre forum XenForo.

Kévin 🚀

Administrateur
Administrateur
Inscription
18 Décembre 2012
Messages
4 627
Réactions
5 161
Points
15 882
    Réponse de Kévin 🚀 Informatique ⌨️ Programmation Programmation web : Ajouter l'option vidéo de profil sur votre forum XenForo.
  • #1
Bonjour à tous :membre:,

Aujourd'hui on se retrouve pour un tutoriel court sur XenForo.
Le but du tutoriel d'aujourd'hui est d'intégrer la vidéo sur le profil des membres xenforo avec une option pour la lecture automatique ou non.

secpa.png


Sommaire :
  1. Création des champs personnalisés.
  2. Implantation du code dans la template member_view.
  3. Test du système.
secpa.png


Première partie : Création des champs personnalisés​

Pour créer un champ personnalisé il faut aller dans votre AdminCP, puis allez dans l'onglet utilisateur et dans la sidebar gauche cliquée sur Champs personnalisés.

Une fois sur la page des champs personnalisés cliquez sur le bouton en haut a droit qui se nomme Créer un nouveau champ.

Vous allez être redirigés vers la page de création du champ personnalisé et cette page va vous demander plusieurs informations

Mettez les paramètres suivants :
  • ID du champs : video_profil
  • Titre : Permet d'ajouter une vidéo sur votre profil.
  • Description : Pour ajouter une vidéo sur votre profil vous avez juste à indiquer l'id de la vidéo youtube.
  • Emplacement de l'affichage : Préférence
  • Ordre d'affichage : 1
  • Type de champ : Simple ligne de texte
Sauvegarder le champ

Voilà pour la récupération de l'id de la vidéo, maintenant nous allons créer le champ pour la lecture automatique ou non de la vidéo.

Pour cela il faut recréer un champ personnalisé donc ont re-clique sur le bouton créer un nouveau champ :
  • ID du champs : auto_play
  • Titre : Souhaitez-vous que la vidéo soit automatiquement lue ?
  • Description : Cette option permet de bloquer la lecture automatique de la vidéo lorsque l'on visite votre profil.
  • Emplacement de l'affichage : Préférence
  • Ordre d'affichage : 1
  • Type de champ : Menu déroulant de sélection.
Maintenant nous allons configurer les choix possibles donc pour ce faire allez dans l'onglet Options pour le choix du champ

Pour le première vous mettez :
  • Valeur de (A à Z ...) : off
  • Texte : Lecture automatique désactivée
Pour mettre un deuxième champ il faut cliquer sur le bouton ajouté un choix additionnel
Pour le deuxième vous mettez :
  • Valeur de (A à Z ...) : on
  • Texte : Lecture automatique activée
Une fois ceci fait vous sauvegarder le champ.

La création des champs est terminée :)

secpa.png


Deuxième partie : Intégration du code dans la template Member_view
Pour ce faire il faudra vous rendre dans vos templates de style et sélectionner la template member_view.
Une fois la template ouverte chercher ceci :
Code:
<xen:if is="{$followers}">
                <div class="section">
                    <h3 class="subHeading textWithCount" title="{xen:phrase x_is_being_followed_by_y_members, 'name={$user.username}', 'count={xen:number $followersCount}'}">
                        <span class="text">{xen:phrase followers}</span>
                        <a href="{xen:link 'members/followers', $user}" class="count OverlayTrigger">{xen:number $followersCount}</a>
                    </h3>
                    <div class="primaryContent avatarHeap">
                        <ol>
                        <xen:foreach loop="$followers" key="$followUserId" value="$followUser">
                            <li>
                                <xen:avatar user="$followUser" size="s" text="{$followUser.username}" class="Tooltip" title="{$followUser.username}" itemprop="contact" />
                            </li>
                        </xen:foreach>
                        </ol>
                    </div>
                    <xen:if is="{$followersCount} > {xen:count $followers, false}">
                        <div class="sectionFooter"><a href="{xen:link 'members/followers', $user}" class="OverlayTrigger">{xen:phrase show_all}</a></div>
                    </xen:if>
                </div>
            </xen:if>
Une fois que vous avez trouvez ceci vous pouvez ajouter ce code en dessous :
Code:
<xen:if is="{$user.customFields.auto_play} == 'on'">
            <div class="section">
                <h3 class="subHeading textWithCount" title="Média">
                    <span class="text"> Vidéo</span>
                </h3>
                <div class="primaryContent">
            
                        <iframe width="172" height="240" src="http://www.youtube.com/embed/{$user.customFields.video_profil}?rel=0;showinfo=0;controls=0;iv_load_policy=3;autoplay=1;" frameborder="0"></iframe>
        
                </div>
            </div>
            <xen:elseif is="{$user.customFields.auto_play} == 'off'" />
                <div class="section">
                <h3 class="subHeading textWithCount" title="Média">
                    <span class="text"> Vidéo</span>
                </h3>
                <div class="primaryContent">
            
                        <iframe width="172" height="240" src="http://www.youtube.com/embed/{$user.customFields.video_profil}?rel=0;showinfo=0;controls=0;iv_load_policy=3;autoplay=0;" frameborder="0"></iframe>
        
                </div>
                </div>
            <xen:else />
                <div class="section">
                <h3 class="subHeading textWithCount" title="Média">
                    <span class="text"> Vidéo</span>
                </h3>
                <div class="primaryContent avatarHeap">
            
                        <iframe width="172" height="240" src="http://www.youtube.com/embed/{$user.customFields.video_profil}?rel=0;showinfo=0;controls=0;iv_load_policy=3;autoplay=0;" frameborder="0"></iframe>
        
                </div>
                </div>
</xen:if>
La taille des iframe est complètement modifiable.

secpa.png


Troisième partie : Test du système.
Depuis votre compte allez dans les préférences et complétez les champs personnalisés créés plus haut.
Une fois ceci fait admirer le résultat sur votre profil.

secpa.png

Si vous avez des questions n'hésiter pas ;)
Tutoriel proposé par :
Faragnight SEC
Je n'autorise pas la reproduction de ce tutoriel sur d'autre forum/site
 

PriZ_

Membre
Inscription
2 Janvier 2015
Messages
308
Réactions
61
Points
5 726
    Réponse de PriZ_ Informatique ⌨️ Programmation Programmation web : Ajouter l'option vidéo de profil sur votre forum XenForo.
  • #2
Merci beaucoup pour ce tuto , sa va en aider plus d'un ! :)
 

LéoVie

Passionné jeux vidéos indépandants
Contributeur
Inscription
4 Mai 2013
Messages
1 506
Réactions
1 298
Points
11 721
    Réponse de LéoVie Informatique ⌨️ Programmation Programmation web : Ajouter l'option vidéo de profil sur votre forum XenForo.
  • #3
Good job ;)
 

Kévin 🚀

Administrateur
Administrateur
Inscription
18 Décembre 2012
Messages
4 627
Réactions
5 161
Points
15 882
    Réponse de Kévin 🚀 Informatique ⌨️ Programmation Programmation web : Ajouter l'option vidéo de profil sur votre forum XenForo.
  • #4

membre241969

Ancien staff RG
Inscription
9 Février 2013
Messages
33 810
Réactions
18 803
Points
18 800
    Réponse de membre241969 Informatique ⌨️ Programmation Programmation web : Ajouter l'option vidéo de profil sur votre forum XenForo.
  • #5
Continue tes tutos ;)
 

Haut Bas