avatar du dernier inscrit.

[d-elirium]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://test-delirium-mv.forumactif.com/

Description du problème

rebonsoir, décidemment oups. j'ai un soucis concernant l'avatar du dernier membre inscrit qui ne s'affiche pas dans le qeel. j'ignore d'où cela peut venir?
merci d'avance.

[Toryudo]

Bonjour !

Est-ce que vous pourriez nous donner le code qui est supposé l'afficher ?
J'ai un peu regardé dans la page et dans les scripts actifs sur la page d'accueil, je n'ai rien vu qui agissait sur l'élément .avqeelio du premier coup d'œil.

[d-elirium]

Alors, voici le code JavaScript :

Code:

// PLACEMENT : Sur l'index

// [FRENCH] by No_way and optimized by Monomer
// https://forum.forumactif.com/t379011-avatar-du-dernier-membre-inscrit-dans-le-qui-est-en-ligne#3196239

$(function () {
  try {
    $.get($('#newest_user a[href^=\'/u\']') [0].href, function (d) {
        (a = $('#user_avatar img', $(d))).length && $('#lastuser_avatar').html(a)
    })
  } catch(e) {}
});

Le code html pour le qeel (entier) dans le cas où j'aurai fait une erreur :

Code:

<!-- BEGIN disable_viewonline -->

<div class="io_qeel_total">
 
 
    <div class="qeel_c">
    <div class="avqio">
    <div class="wellio">der trépas : <span id="dernier_membre">{NEWEST_USER}</span></div>

    <div class="avqeelio">
    <!-- BEGIN avatar --><span id="avatar_dernier_membre"></span><!-- END avatar --></div>
     
    <div id="io_qeel_stats"><div id="qstats2">griffent la sorgue les <span class="total_post" style="font: 12px 'EB Garamond', serif; font-weight: 900;">{TOTAL_POSTS}</span> de la big easy corrompue, elle s'écharpe au poids d'agonie sur <span class="ioef73">{TOTAL_USERS}</span>. beffroi s'agace au geint de disgrâce, y a {TOTAL_USERS_ONLINE} c'est qu'à l'horreur paroxystique s'alignent les {RECORD_USERS} où se sont moqués les détracteurs.</div>
   
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ messages/g," murmures");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ message/g," murmure");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/Nos membres ont posté un total de /g,"");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/Nous avons /g,"");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ membre enregistré/g," squelette distordu");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ membres enregistrés/g," squelettes distordus");</script>

<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/Il y a en tout /g,"");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ utilisateur en ligne :: /g," métacarpe brisée frappant la cippe :: ");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ utilisateurs en ligne :: /g," métacarpes brisées frappant la cippe :: ");</script> 
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ Enregistré/g," condamné");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ Enregistrés/g," condamnés");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ Invisible /g," nécrosé ");</script> 
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ Invisibles /g," nécrosés ");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ Invité /g," nématode vilipendé. ");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/Le record du nombre d'utilisateurs /g,"");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ Invités /g," nématodes vilipendés. ");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ - /g," à ");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ en ligne est de /g," ");</script>
<script type="text/javascript">document.getElementById('io_qeel_stats').innerHTML=document.getElementById('io_qeel_stats').innerHTML.replace(/ le /g," cercueils. un noir ");</script>
 
  </div>
    </div>
 
   
    <script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est /g,"");</script>
 
    <div id="io_qeel_lastco">
      <div id="lastcoio2">
        {LOGGED_IN_USER_LIST}</div></div>
    <script type="text/javascript">document.getElementById('io_qeel_lastco').innerHTML=document.getElementById('io_qeel_lastco').innerHTML.replace(/Utilisateurs enregistrés : /g,"RÔDEURS D'COUPE-GORGES; ");
      </script>
          <br />
    </div>

  <div class="qimgio">
  <div class="io_qeel_ima"><img src="https://zupimages.net/up/22/52/dv2t.png"/></div>
 
                  <div class="io_qeel_grps">
                  <div class="grpone"><span class="grio1" style="font-size:10px; color:#3B0000;">■</span> CITIZEN EXTREMIST</div>
    <div class="grpone"><span class="grio1" style="font-size:10px; color:#7A735D;">■</span> GOOD SAMARITAN</div>
    <div class="grpone"><span class="grio1" style="font-size:10px; color:#574832;">■</span> APATHETIC NATIVE</div>
    </div></div>
 

  <div id="io_qeel_co"><div class="qeelco2">{L_CONNECTED_MEMBERS}</div></div>
  <script type="text/javascript">document.getElementById('io_qeel_co').innerHTML=document.getElementById('io_qeel_co').innerHTML.replace(/Membres connectés au cours des 48 dernières heures : /g,"SE SONT ÉTEINTS; ");
  </script>
   
  </div>


<!-- END disable_viewonline -->

Puis le CSS :

Code:

.io_qeel_total {width:820px; padding:10px; background:#f5f5f5; display:flex; flex-wrap:wrap; -webkit-box-pack:justify; justify-content:space-between;}
.qeel_c {flex-wrap: wrap; width: 250px; height:280px; margin:0 10px 0 0;}
#io_qeel_co {border:1px solid #ebebeb; width:230px; height: 280px; padding:5px; font:9px 'Archivo Narrow'; letter-spacing:1px; color:#000; text-align:justify;}
.qeelco2 {height:137px; padding:0 5px 0 5px; overflow:auto;}
#io_qeel_co a {text-transform:lowercase; font:11px 'Open Sans'; letter-spacing:normal;}
#io_qeel_lastco {width:250px; background:#f9f9f9; border:1px solid #ebebeb; font:9px 'Archivo Narrow'; letter-spacing:1px; margin:10px 0 0 0; padding:5px; color:#000; text-align:justify;}
#lastcoio2 {height:112px; padding:0 5px 0 5px; overflow:auto;}
#io_qeel_lastco a {text-transform:lowercase; font:11px 'Open Sans'; letter-spacing:normal;}
#io_qeel_lastco br {display:none;}
#io_qeel_stats {width:150px; margin:0 0 0 10px; font: 11px 'Open Sans'; color: #2a2c2f; text-transform: lowercase; text-align: justify;}
#qstats2 stong {font: 12px 'EB Garamond', serif !important; font-weight: 900 !important;}
#qstats2 {height:120px; overflow:auto; padding:0 5px 0 0;}
.io_qeel_ima {width:300px; height:250px; overflow:hidden; margin-right:10px;}
.io_qeel_ima img {width:100%; object-fit:cover;}
.qimgio {height:280px;}
.io_qeel_grps {width:300px; margin:10px 0 0 0; display:flex; flex-wrap:wrap; -webkit-box-pack:justify; justify-content:space-between;}
.grpone {background:#ebebeb; width:95px; height:20px; padding:3px 0 0 0; text-align:center; font:7px 'Archivo Narrow'; letter-spacing:1px; color:#2a2c2f;}
#avatar_dernier_membre img {height: 112px; object-fit: cover; width: 70px; filter:grayscale(100%); margin:3px 0 0 0;}
#dernier_membre {}
#dernier_membre a {color: #fff; font-weight:normal;}
#dernier_membre a:hover {color:#fff;}
.avqio {background:#f9f9f9; border:1px solid #ebebeb; padding:5px; width:250px; display: flex; flex-wrap: wrap; -webkit-box-pack: justify; text-align:center;}
.wellio {width:250px;}
.avqeelio {border:1px solid #ebebeb; height:120px; width:78px;}

S'il manque quelque chose, n'hésitez pas. Et merci pour votre aide.

[Toryudo]

Bonjour !

Alors, il y a 3 raisons pour lesquelles ça ne fonctionne pas :

• $('#newest_user a[href^=\'/u\']') [0].href doit récupérer le lien du profil de l'utilisateur le plus récent, sauf que sur votre forum, l'information n'est pas dans #newest_user mais dans #dernier_membre
  
  
• $('#lastuser_avatar').html(a) doit mettre à jour le HTML de la page index pour afficher l'avatar trouvé dans la page profil de l'utilisateur le plus récent, sauf que sur votre forum, vous ne voulez pas l'afficher dans #lastuser_avatar mais plutôt dans .avqeelio
  
  
• $('#user_avatar img', $(d)) fait référence à l'avatar sur la page des profils. Pour pouvoir le trouver, il faudrait ajouter une balise avec un id unique dans le Template profile_view_body (Page d'affichage du profil simple) au niveau de l'affichage de l'image {AVATAR_IMG}. Par exemple : <div id="user_avatar">{AVATAR_IMG}</div>

Avec ces trois modifications, le script devrait fonctionner (pas besoin de try catch non plus) :

Code:

$(function () {
  $.get($('#dernier_membre a[href^=\'/u\']') [0].href, function (d) {
    (a = $('#user_avatar img', $(d))).length && $('.avqeelio').html(a)
  })
});

[d-elirium]

C'est super, l'avatar s'affiche de nouveau, merci beaucoup! Il me reste néanmoins une question car ce dernier redimensionné perd en qualité et je ne sais pas comment m'y prendre après quelques tests pour obtenir le même résultat de netteté que les avatars affichés dans les catégories "dernier posteur" ou encore les avatars dans la liste des membres. Même redimensionnés ils n'ont pas perdu de leur qualité graphique.

[d-elirium]

Update : je crois remarquer que ça ne fonctionne peut-être uniquement que si l'image est un carré?

[Toryudo]

Bonjour !

Hm, de mon point de vue, puisque le CSS utilisé dans les deux cas est le même, normalement, il n'y a pas de différence. Peut-être une question de proportions :

L'image de base fait 400 x 640.
Les avatars sur votre forum sont redimensionnés en 200 x 320 (donc parfaitement divisé par 2).
Les avatars carrés sont redimensionnés en 50 x * (donc parfaitement divisé par 8 pour le width)
L'avatar de la dernière personne inscrite est redimensionné en 70 x 112 (donc divisé par 5,714285714285714 un nombre qui n'est pas entier).

Le fait que ce ne soit pas un nombre précis empêche peut-être d'avoir quelque chose d'ultra propre, ce serait mon hypothèse.

[d-elirium]

bonjour! oh ça doit être ça oui je pense, je vais régler ce hic avec de meilleurs proportions. en tout cas, un énorme merci pour votre aide, elle me permet de mieux comprendre mes erreurs et contribue grandement à l'avancée de mon forum. je mets comme résolu, bonne journée à vous.