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

4 participants

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 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
Changer la pdp en version mobile et changement de pdp sur PC Change10

Merci d'avance Visage souriant


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

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Mer 11 Oct 2017 - 15:06

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Jeu 12 Oct 2017 - 20:18

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Sam 14 Oct 2017 - 10:12

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Dim 15 Oct 2017 - 13:35

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Lun 16 Oct 2017 - 15:00

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Mar 17 Oct 2017 - 21:18

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Jeu 19 Oct 2017 - 13:15

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Sam 21 Oct 2017 - 15:01

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Mer 25 Oct 2017 - 19:20

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Sam 28 Oct 2017 - 22:13

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Dim 29 Oct 2017 - 22:35

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Mar 31 Oct 2017 - 18:08

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Jeu 2 Nov 2017 - 14:36

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 Dim 5 Nov 2017 - 12:37

Et un up Wink
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 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
Changer la pdp en version mobile et changement de pdp sur PC Change10

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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
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 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
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 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 :

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

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://2img.net/i/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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
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 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 ?
demeter1

demeter1
Membre actif

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

https://altitudetropicale.forums-actifs.com/
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 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
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 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 ^^
Changer la pdp en version mobile et changement de pdp sur PC 5868510
PS : désolé pour le double post Visage amusé
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
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 Sam 11 Nov 2017 - 17:52

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

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
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 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
Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 6081
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 Dim 12 Nov 2017 - 23:52

Bien vu @Walt Yes
Adam_sfp

Adam_sfp
Membre actif

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

http://antonyadam.kanak.fr
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 Lun 13 Nov 2017 - 21:17

Parfait un grand merci tout fonctionne Visage souriant
Mat

Mat
Membre habitué

Masculin
Messages : 1555
Inscrit(e) le : 05/09/2015

http://www.dixily.fr
Mat a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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