- Inscription
- 18 Décembre 2012
- Messages
- 4 821
- Réactions
- 5 531
- Points
- 27 882
Bonjour à tous 
,
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.
Sommaire :
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 :
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 :
Pour le première vous mettez :
Pour le deuxième vous mettez :
La création des champs est terminée
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 :
Une fois que vous avez trouvez ceci vous pouvez ajouter ce code en dessous :
La taille des iframe est complètement modifiable.
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.
Si vous avez des questions n'hésiter pas
,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.
Sommaire :
- Création des champs personnalisés.
- Implantation du code dans la template member_view.
- Test du système.
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
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.
Pour le première vous mettez :
- Valeur de (A à Z ...) : off
- Texte : Lecture automatique désactivée
Pour le deuxième vous mettez :
- Valeur de (A à Z ...) : on
- Texte : Lecture automatique activée
La création des champs est terminée
Deuxième partie : Intégration du code dans 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.
Troisième partie : Test du système.
Une fois ceci fait admirer le résultat sur votre profil.
Tutoriel proposé par :
Faragnight SEC
Faragnight SEC
Je n'autorise pas la reproduction de ce tutoriel sur d'autre forum/site
