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

[Mat]

Bonjour ,

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

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 
Un peu comme sur Facebook par exemple


Merci d'avance

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Mat]

Et un up

[Walt]

Bonjour,

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 
Un peu comme sur Facebook par exemple

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

[Mat]

Bonjour 
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 

[Walt]

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://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

[demeter1]

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 ?

[Mat]

Un grand merci Walt
Ca marche parfaitement sur Google Chrome 

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

Merci d'avance

[Mat]

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

PS : désolé pour le double post

[Walt]

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

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.

Si on n'a pas encore d'avatar, rien ne s'affiche ^^

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

Cordialement,
Walt

[Mat]

Bonsoir
J'ai besoin de faire un up ?

[Walt]

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

[Adam_sfp]

Bien vu @Walt

[Mat]

Parfait un grand merci tout fonctionne