Changer la pdp en version mobile et changement de pdp sur PC

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Mar 10 Oct 2017 - 14:17

Bonjour Visage souriant,

Je voudrais savoir si quelqu'un n'aurait pas un code pour changer de photo de profil en version mobile Visage souriant

Et je voudrais savoir aussi, si il n'existe pas de code pour changer ça photo de profil en version PC en passant sa souris par dessus l'avatar  Visage tirant la lan
Un peu comme sur Facebook par exemple Yeux au ciel


Merci d'avance Visage souriant


Dernière édition par Mat le Lun 13 Nov 2017 - 21:17, édité 1 fois
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Mer 11 Oct 2017 - 15:06

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Jeu 12 Oct 2017 - 20:18

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Sam 14 Oct 2017 - 10:12

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Dim 15 Oct 2017 - 13:35

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Lun 16 Oct 2017 - 15:00

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Mar 17 Oct 2017 - 21:18

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Jeu 19 Oct 2017 - 13:15

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Sam 21 Oct 2017 - 15:01

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Mer 25 Oct 2017 - 19:20

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Sam 28 Oct 2017 - 22:13

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Dim 29 Oct 2017 - 22:35

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Mar 31 Oct 2017 - 18:08

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Jeu 2 Nov 2017 - 14:36

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Dim 5 Nov 2017 - 12:37

Et un up Wink
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Walt le Dim 5 Nov 2017 - 12:51

Bonjour,

@Mat a écrit:Et je voudrais savoir aussi, si il n'existe pas de code pour changer ça photo de profil en version PC en passant sa souris par dessus l'avatar  Visage tirant la lan
Un peu comme sur Facebook par exemple Yeux au ciel

Le problème est que les forums offrent trois choix pour mettre un avatar, notamment le bouton "parcourir" ou les URL copiées ou non sur le site.
Donc deux hypothèses pour votre demande : soit au clic sur l'avatar on ouvre un menu qui permet toujours les trois choix, soit au clic on ouvre la fenêtre "Parcourir" (comme sur Facebook) et on abandonne l'hypothèse des liens.

Que souhaitez-vous faire ?

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3738
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Dim 5 Nov 2017 - 13:02

Bonjour Visage souriant
Il y à déjà quelques mois que j'ai supprimé la méthode "des liens" pour changer d'avatar, il ne me reste donc plus que la méthode "parcourir"
Je préfère donc la deuxième méthode qui, je trouve, est plus "moderne"

Merci à vous Visage souriant
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Walt le Dim 5 Nov 2017 - 13:59

C'est une idée intéressante, je n'exclue donc pas d'en faire un tutoriel... Voici ce à quoi je suis parvenu :



Pour faire cela, il faut modifier le template profile_add_body (le code indiqué ci-dessous ne vaut que pour phpBB2) et faire les modifications suivantes :

  • Trouver cette ligne (l.1 dans le template par défaut) :
    Code:
    <script type="text/javascript" src="{JSPWD}"></script>

    Et ajouter ceci juste après :
    Code:
    <script type="text/javascript">
    //<![CDATA[
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
          $('#chavatar img:not(.image-upload-icon)')
            .attr('src', e.target.result)
            .css('max-width', '200px');
        };

        reader.readAsDataURL(input.files[0]);
      }
    }
    $(function() {
      if( $('#chavatar span.current-avatar img').length < 1 ) {
          $('#chavatar span.current-avatar').html('<img src="https://illiweb.com/fa/invision/pp-blank-thumb.png" alt="" />')
      }
    });
    //]]>
    </script>

  • Remplacer l'intégralité de ce bloc (lignes 290 à 351 dans le template par défaut) :
    Code:
    <!-- BEGIN switch_avatar_block -->
       <tr>
          <th class="thSides" colspan="2" valign="middle" height="12">{L_AVATAR_PANEL}</th>
       </tr>
       <tr>
                <td class="row1"><span class="gensmall">{L_AVATAR_EXPLAIN}</span></td>
                <td class="row2">
                    <span class="gensmall">{L_CURRENT_IMAGE}</span><br />
                    {AVATAR}<br />
                    <input type="checkbox" name="avatardel" />&nbsp;<span class="gensmall">{L_DELETE_AVATAR}</span>
                </td>      
       </tr>
           
           
            <!-- BEGIN switch_avatar_faceyourmanga -->
            <tr>
                <td class="row1"><span class="gen">{L_FACEYOURMANGA_BUTTON_LABEL}</span></td>
                <td class="row2">
                    <img src="{L_FACEYOURMANGA_LINK_IMG}" onclick="$('#fym_avatar_form').submit()" class="fontbutton" id="fym_banner" style="cursor:pointer;cursor:hand;" />
                    <br />
                    <input type="button" onclick="$('#fym_avatar_form').submit()" value="{L_FACEYOURMANGA_BUTTON_LABEL}" class="button" />
                </td>
            </tr>
            <!-- END switch_avatar_faceyourmanga -->

            <!-- BEGIN switch_avatar_faceyourmanga_alternate -->
            <tr>
                <td class="row1"><span class="gen">{L_FACEYOURMANGA_BUTTON_LABEL}</span></td>
                <td class="row2">
                    <img src="{L_FACEYOURMANGA_LINK_IMG}" onclick="{switch_avatar_block.switch_avatar_faceyourmanga_alternate.ONCLICK_FYM}" class="fontbutton" id="fym_banner" style="cursor:pointer;cursor:hand;" />
                    <br />
                    <input type="button" onclick="{switch_avatar_block.switch_avatar_faceyourmanga_alternate.ONCLICK_FYM}" value="{L_FACEYOURMANGA_BUTTON_LABEL}" class="button" />
                </td>
            </tr>
            <!-- END switch_avatar_faceyourmanga_alternate -->


        <!-- BEGIN switch_avatar_local_upload -->
       <tr>
          <td class="row1"><span class="gen">{L_UPLOAD_AVATAR_FILE}&nbsp;:</span></td>
          <td class="row2"><input class="post" type="file" name="avatar" /></td>
       </tr>
       <!-- END switch_avatar_local_upload -->
       <!-- BEGIN switch_avatar_remote_upload -->
       <tr>
          <td class="row1"><span class="gen">{L_UPLOAD_AVATAR_URL}&nbsp;:</span><br /><span class="gensmall">{L_UPLOAD_AVATAR_URL_EXPLAIN}</span></td>
          <td class="row2"><input class="post" type="text" name="avatarurl" size="40" maxlength="100" /></td>
       </tr>
       <!-- END switch_avatar_remote_upload -->
       <!-- BEGIN switch_avatar_remote_link -->
       <tr>
          <td class="row1"><span class="gen">{L_LINK_REMOTE_AVATAR}&nbsp;:</span><br /><span class="gensmall">{L_LINK_REMOTE_AVATAR_EXPLAIN}</span></td>
          <td class="row2"><input class="post" type="text" name="avatarremoteurl" size="40" maxlength="100" /></td>
       </tr>
       <!-- END switch_avatar_remote_link -->
       <!-- BEGIN switch_avatar_local_gallery -->
       <tr>
          <td class="row1"><span class="gen">{L_AVATAR_GALLERY}&nbsp;:</span></td>
          <td class="row2"><input class="liteoption" type="submit" name="avatargallery" value="{L_SHOW_GALLERY}" /></td>
       </tr>
       <!-- END switch_avatar_local_gallery -->
    <!-- END switch_avatar_block -->

    par :
    Code:
    <!-- BEGIN switch_avatar_block -->
       <tr>
          <th class="thSides" colspan="2" valign="middle" height="12">{L_AVATAR_PANEL}</th>
       </tr>
       <tr>
                <td class="row2" colspan="2" style="padding:15px;">
                     <!-- BEGIN switch_avatar_local_upload -->
                     <div class="image-upload">
                        <label for="file-input" id="chavatar">
                          <span class="current-avatar">{AVATAR}</span>
                          <span class="image-upload-legend">Modifier l'avatar</span>
                          <img class="image-upload-icon" src="https://i.imgur.com/LvXNVIV.png" alt="" />
                        </label>
                        <input id="file-input" class="post" type="file" name="avatar" onchange="readURL(this);" />
                    </div>
                     <!-- END switch_avatar_local_upload -->
                    <br /><input type="checkbox" name="avatardel" />&nbsp;<span class="gensmall">{L_DELETE_AVATAR}</span>
                </td>      
       </tr>
    <!-- END switch_avatar_block -->

Enregistrez et publiez le template.

Enfin, il ne reste qu'à ajouter le CSS :
Code:
.image-upload input,
.image-upload-icon,
.image-upload-legend  {
    display: none;
}
.image-upload {
  position: relative;
  display: inline-block;
}
.image-upload img:not(.image-upload-icon) {
    padding: 1px;
    transition-duration: 100ms;
}
.image-upload label:hover img:not(.image-upload-icon) {
    opacity:0.7;
    cursor:pointer;
}
.image-upload label:hover .image-upload-icon, .image-upload label:hover .image-upload-legend {
    color: #fff;
    display: block;
    position: absolute;
    top: 5px;
    right: 5Px;
}
.image-upload label:hover .image-upload-legend {
    display: block;
    font-size: 12px;
    top: 47%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
}

Et normalement, tout devrait fonctionner. Notez que je n'ai testé que sur Firefox, donc j'apprécierais un retour d'expérience si vous l'installez, pour savoir si ça fonctionne sur tous les navigateurs modernes (il va de soit que je ne m'attends pas à ce que ça fonctionne sur Internet Explorer).

Cordialement,
Walt


Dernière édition par Walt le Dim 12 Nov 2017 - 23:39, édité 1 fois
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3738
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par demeter1 le Dim 5 Nov 2017 - 14:36

Bonjour,
Idée intéressante Mat. je viens de tester les modifications suggérée par walt et cela fonctionne à la perfection sous version pc (testé sous chrome et opéra).

Une idée me vient à l'esprit : ne serait-il pas intéressant d'étendre cette fonctionnalité également à partir des avatars contenus dans les sujets ?
avatar

demeter1
Membre actif

Masculin
Messages : 8465
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Dim 5 Nov 2017 - 14:52

Un grand merci Walt Visage souriant
Ca marche parfaitement sur Google Chrome Visage souriant

Du coup, serait-il possible de le faire aussi sur la version mobile Clin d'oeil?
Comme ça vous pourrez l'ajouter aussi sur le tuto Visage tirant la lan

Merci d'avance Visage souriant
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Dim 5 Nov 2017 - 14:56

Je viens de découvrir un bug Visage neutre
Si on n'a pas encore d'avatar, rien ne s'affiche ^^

PS : désolé pour le double post Visage amusé
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Walt le Dim 5 Nov 2017 - 15:03

@Mat a écrit:Du coup, serait-il possible de le faire aussi sur la version mobile Clin d'oeil?
Comme ça vous pourrez l'ajouter aussi sur le tuto Visage tirant la lan

Impossible, tout simplement car la page d'édition du profil n'est pas accessible en version mobile, et n'est donc pas adaptée : c'est la version PC qui s'affiche si on y accède depuis un mobile.

@Mat a écrit:Si on n'a pas encore d'avatar, rien ne s'affiche ^^

Bien vu, je m'y penche bientôt.

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3738
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Sam 11 Nov 2017 - 17:52

Bonsoir Visage souriant
J'ai besoin de faire un up Visage souriant ?
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Walt le Dim 12 Nov 2017 - 23:40

Bonsoir,

Oui, il fallait effectivement faire un UP car ça m'était déjà sorti de la tête. J'ai modifié le message précédent avec les codes corrigés pour pallier ce problème de membre sans avatar.

Cordialement,
Walt
avatar

Walt
Modéractif
Modéractif

Masculin
Messages : 3738
Inscrit(e) le : 08/09/2015

Walt a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Adam_sfp le Dim 12 Nov 2017 - 23:52

Bien vu @Walt Yes
avatar

Adam_sfp
Membre actif

Masculin
Messages : 4254
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer la pdp en version mobile et changement de pdp sur PC

Message par Mat le Lun 13 Nov 2017 - 21:17

Parfait un grand merci tout fonctionne Visage souriant
avatar

Mat
*****

Messages : 816
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum