Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Ajouter l'option vidéo de profil sur votre forum XenForo.
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Kévin 🚀" data-source="post: 5212804" data-attributes="member: 210410"><p>Bonjour à tous <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite391" alt=":membre:" title="Membre :membre:" loading="lazy" data-shortname=":membre:" />,</p><p></p><p>Aujourd'hui on se retrouve pour un tutoriel court sur <strong><span style="color: #0080ff">XenForo</span></strong>.</p><p>Le but du tutoriel d'aujourd'hui est <strong><span style="color: #0080ff">d'intégrer la vidéo sur le profil des membres</span></strong> xenforo avec une option pour la <strong><span style="color: #0080ff">lecture automatique ou non</span></strong>.</p><p></p><p style="text-align: center">[ATTACH=full]54560[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center"><strong><u><span style="color: #0080ff">Sommaire :</span></u></strong></p> <ol> <li data-xf-list-type="ol">Création des champs personnalisés.</li> <li data-xf-list-type="ol">Implantation du code dans la template <strong><span style="color: #0080ff">member_view.</span></strong></li> <li data-xf-list-type="ol"><span style="color: #000000">Test du système.</span></li> </ol> <p style="text-align: center">[ATTACH=full]54560[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="color: #0080ff"><u>Première partie :</u></span></strong> Création des champs personnalisés</p><p></p><p>Pour créer un <strong><span style="color: #0080ff">champ personnalisé</span></strong> il faut aller dans votre <strong><span style="color: #0080ff">AdminCP</span></strong>, puis allez dans l'onglet utilisateur et dans la sidebar gauche cliquée sur <strong><span style="color: #0080ff">Champs personnalisés</span></strong>.</p><p></p><p>Une fois sur la page des champs personnalisés cliquez sur le bouton en haut a droit qui se nomme <strong><span style="color: #0080ff">Créer un nouveau champ</span></strong>.</p><p></p><p>Vous allez être redirigés vers la page de<strong><span style="color: #0080ff"> création du champ personnalisé</span></strong> et cette page va vous demander plusieurs informations</p><p></p><p>Mettez les paramètres suivants :</p><ul> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">ID du champs :</span></strong> video_profil</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Titre :</span></strong> Permet d'ajouter une vidéo sur votre profil.</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Description :</span></strong> Pour ajouter une vidéo sur votre profil vous avez juste à indiquer l'id de la vidéo youtube.</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Emplacement de l'affichage :</span></strong> Préférence</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Ordre d'affichage :</span></strong> 1</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Type de champ :</span></strong> Simple ligne de texte</li> </ul><p>Sauvegarder le champ</p><p></p><p>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.</p><p></p><p>Pour cela il faut recréer un champ personnalisé donc ont re-clique sur le bouton <strong><span style="color: #0080ff">créer un nouveau champ</span></strong> :</p><ul> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">ID du champs :</span></strong> auto_play</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Titre :</span></strong> Souhaitez-vous que la vidéo soit automatiquement lue ?</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Description :</span></strong> Cette option permet de bloquer la lecture automatique de la vidéo lorsque l'on visite votre profil.</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Emplacement de l'affichage :</span></strong> Préférence</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Ordre d'affichage :</span></strong> 1</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Type de champ :</span></strong> Menu déroulant de sélection.</li> </ul><p>Maintenant nous allons configurer les choix possibles donc pour ce faire allez dans l'onglet <strong><span style="color: #0080ff">Options pour le choix du champ</span></strong></p><p></p><p>Pour le première vous mettez :</p><ul> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Valeur de (A à Z ...) :</span></strong> off</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Texte :</span></strong> Lecture automatique désactivée</li> </ul><p>Pour mettre un deuxième champ il faut cliquer sur le bouton <strong><span style="color: #0080ff">ajouté un choix additionnel</span></strong></p><p>Pour le deuxième vous mettez :</p><ul> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Valeur de (A à Z ...) : </span></strong>on</li> <li data-xf-list-type="ul"><strong><span style="color: #0080ff">Texte :</span></strong> Lecture automatique activée</li> </ul><p>Une fois ceci fait vous sauvegarder le champ.</p><p></p><p>La création des champs est terminée <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></p><p></p><p style="text-align: center">[ATTACH=full]54560[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center"><strong><u><span style="color: #0080ff">Deuxième partie :</span></u></strong> Intégration du code dans la template Member_view</p> <p style="text-align: center"></p><p>Pour ce faire il faudra vous rendre dans vos <strong><span style="color: #0080ff">templates </span></strong>de style et sélectionner la template <strong><span style="color: #0080ff">member_view.</span></strong></p><p>Une fois la <strong><span style="color: #0080ff">template </span></strong>ouverte chercher ceci :</p><p>[CODE]<xen:if is="{$followers}"></p><p> <div class="section"></p><p> <h3 class="subHeading textWithCount" title="{xen:phrase x_is_being_followed_by_y_members, 'name={$user.username}', 'count={xen:number $followersCount}'}"></p><p> <span class="text">{xen:phrase followers}</span></p><p> <a href="{xen:link 'members/followers', $user}" class="count OverlayTrigger">{xen:number $followersCount}</a></p><p> </h3></p><p> <div class="primaryContent avatarHeap"></p><p> <ol></p><p> <xen:foreach loop="$followers" key="$followUserId" value="$followUser"></p><p> <li></p><p> <xen:avatar user="$followUser" size="s" text="{$followUser.username}" class="Tooltip" title="{$followUser.username}" itemprop="contact" /></p><p> </li></p><p> </xen:foreach></p><p> </ol></p><p> </div></p><p> <xen:if is="{$followersCount} > {xen:count $followers, false}"></p><p> <div class="sectionFooter"><a href="{xen:link 'members/followers', $user}" class="OverlayTrigger">{xen:phrase show_all}</a></div></p><p> </xen:if></p><p> </div></p><p> </xen:if>[/CODE]</p><p></p><p>Une fois que vous avez trouvez ceci <strong><span style="color: #0080ff">vous pouvez ajouter ce code en dessous :</span></strong></p><p>[CODE]<xen:if is="{$user.customFields.auto_play} == 'on'"></p><p> <div class="section"></p><p> <h3 class="subHeading textWithCount" title="Média"></p><p> <span class="text"> Vidéo</span></p><p> </h3></p><p> <div class="primaryContent"></p><p> </p><p> <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></p><p> </p><p> </div></p><p> </div></p><p> <xen:elseif is="{$user.customFields.auto_play} == 'off'" /></p><p> <div class="section"></p><p> <h3 class="subHeading textWithCount" title="Média"></p><p> <span class="text"> Vidéo</span></p><p> </h3></p><p> <div class="primaryContent"></p><p> </p><p> <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></p><p> </p><p> </div></p><p> </div></p><p> <xen:else /></p><p> <div class="section"></p><p> <h3 class="subHeading textWithCount" title="Média"></p><p> <span class="text"> Vidéo</span></p><p> </h3></p><p> <div class="primaryContent avatarHeap"></p><p> </p><p> <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></p><p> </p><p> </div></p><p> </div></p><p></xen:if></p><p>[/CODE]</p><p></p><p>La taille des iframe est <strong><span style="color: #0080ff">complètement modifiable.</span></strong></p><p></p><p style="text-align: center">[ATTACH=full]54560[/ATTACH] </p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="color: #0080ff"><u>Troisième partie :</u></span></strong> Test du système.</p> <p style="text-align: center"></p><p>Depuis votre compte allez dans les préférences et complétez les champs personnalisés créés plus haut.</p><p>Une fois ceci fait admirer le résultat sur votre profil.</p><p></p><p style="text-align: center">[ATTACH=full]54560[/ATTACH] </p> <p style="text-align: center"></p><p>Si vous avez des questions n'hésiter pas <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></p><p style="text-align: right">Tutoriel proposé par :</p> <p style="text-align: right"><strong><em><span style="color: #ffa64d">Faragnight SEC</span></em></strong></p> <p style="text-align: center"><strong><em><span style="font-size: 10px"><span style="color: rgb(191, 191, 191)">Je n'autorise pas la reproduction de ce tutoriel sur d'autre forum/site</span></span></em></strong></p></blockquote><p></p>
[QUOTE="Kévin 🚀, post: 5212804, member: 210410"] Bonjour à tous :membre:, Aujourd'hui on se retrouve pour un tutoriel court sur [B][COLOR=#0080ff]XenForo[/COLOR][/B]. Le but du tutoriel d'aujourd'hui est [B][COLOR=#0080ff]d'intégrer la vidéo sur le profil des membres[/COLOR][/B] xenforo avec une option pour la [B][COLOR=#0080ff]lecture automatique ou non[/COLOR][/B]. [CENTER][ATTACH=full]54560[/ATTACH] [B][U][COLOR=#0080ff]Sommaire :[/COLOR][/U][/B][/CENTER] [LIST=1] [*]Création des champs personnalisés. [*]Implantation du code dans la template [B][COLOR=#0080ff]member_view.[/COLOR][/B] [*][COLOR=#000000]Test du système.[/COLOR] [/LIST] [CENTER][ATTACH=full]54560[/ATTACH] [B][COLOR=#0080ff][U]Première partie :[/U][/COLOR][/B] Création des champs personnalisés[/CENTER] Pour créer un [B][COLOR=#0080ff]champ personnalisé[/COLOR][/B] il faut aller dans votre [B][COLOR=#0080ff]AdminCP[/COLOR][/B], puis allez dans l'onglet utilisateur et dans la sidebar gauche cliquée sur [B][COLOR=#0080ff]Champs personnalisés[/COLOR][/B]. Une fois sur la page des champs personnalisés cliquez sur le bouton en haut a droit qui se nomme [B][COLOR=#0080ff]Créer un nouveau champ[/COLOR][/B]. Vous allez être redirigés vers la page de[B][COLOR=#0080ff] création du champ personnalisé[/COLOR][/B] et cette page va vous demander plusieurs informations Mettez les paramètres suivants : [LIST] [*][B][COLOR=#0080ff]ID du champs :[/COLOR][/B] video_profil [*][B][COLOR=#0080ff]Titre :[/COLOR][/B] Permet d'ajouter une vidéo sur votre profil. [*][B][COLOR=#0080ff]Description :[/COLOR][/B] Pour ajouter une vidéo sur votre profil vous avez juste à indiquer l'id de la vidéo youtube. [*][B][COLOR=#0080ff]Emplacement de l'affichage :[/COLOR][/B] Préférence [*][B][COLOR=#0080ff]Ordre d'affichage :[/COLOR][/B] 1 [*][B][COLOR=#0080ff]Type de champ :[/COLOR][/B] Simple ligne de texte [/LIST] 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 [B][COLOR=#0080ff]créer un nouveau champ[/COLOR][/B] : [LIST] [*][B][COLOR=#0080ff]ID du champs :[/COLOR][/B] auto_play [*][B][COLOR=#0080ff]Titre :[/COLOR][/B] Souhaitez-vous que la vidéo soit automatiquement lue ? [*][B][COLOR=#0080ff]Description :[/COLOR][/B] Cette option permet de bloquer la lecture automatique de la vidéo lorsque l'on visite votre profil. [*][B][COLOR=#0080ff]Emplacement de l'affichage :[/COLOR][/B] Préférence [*][B][COLOR=#0080ff]Ordre d'affichage :[/COLOR][/B] 1 [*][B][COLOR=#0080ff]Type de champ :[/COLOR][/B] Menu déroulant de sélection. [/LIST] Maintenant nous allons configurer les choix possibles donc pour ce faire allez dans l'onglet [B][COLOR=#0080ff]Options pour le choix du champ[/COLOR][/B] Pour le première vous mettez : [LIST] [*][B][COLOR=#0080ff]Valeur de (A à Z ...) :[/COLOR][/B] off [*][B][COLOR=#0080ff]Texte :[/COLOR][/B] Lecture automatique désactivée [/LIST] Pour mettre un deuxième champ il faut cliquer sur le bouton [B][COLOR=#0080ff]ajouté un choix additionnel[/COLOR][/B] Pour le deuxième vous mettez : [LIST] [*][B][COLOR=#0080ff]Valeur de (A à Z ...) : [/COLOR][/B]on [*][B][COLOR=#0080ff]Texte :[/COLOR][/B] Lecture automatique activée [/LIST] Une fois ceci fait vous sauvegarder le champ. La création des champs est terminée :) [CENTER][ATTACH=full]54560[/ATTACH] [B][U][COLOR=#0080ff]Deuxième partie :[/COLOR][/U][/B] Intégration du code dans la template Member_view [/CENTER] Pour ce faire il faudra vous rendre dans vos [B][COLOR=#0080ff]templates [/COLOR][/B]de style et sélectionner la template [B][COLOR=#0080ff]member_view.[/COLOR][/B] Une fois la [B][COLOR=#0080ff]template [/COLOR][/B]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>[/CODE] Une fois que vous avez trouvez ceci [B][COLOR=#0080ff]vous pouvez ajouter ce code en dessous :[/COLOR][/B] [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> [/CODE] La taille des iframe est [B][COLOR=#0080ff]complètement modifiable.[/COLOR][/B] [CENTER][ATTACH=full]54560[/ATTACH] [B][COLOR=#0080ff][U]Troisième partie :[/U][/COLOR][/B] Test du système. [/CENTER] 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. [CENTER][ATTACH=full]54560[/ATTACH] [/CENTER] Si vous avez des questions n'hésiter pas ;) [RIGHT]Tutoriel proposé par : [B][I][COLOR=#ffa64d]Faragnight SEC[/COLOR][/I][/B][/RIGHT] [CENTER][B][I][SIZE=2][COLOR=rgb(191, 191, 191)]Je n'autorise pas la reproduction de ce tutoriel sur d'autre forum/site[/COLOR][/SIZE][/I][/B][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Ajouter l'option vidéo de profil sur votre forum XenForo.
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut