[Tutorial] Avatar Postator in ultimele s

[Tutorial] Avatar Postator in ultimele subiecte

Salut,
Astazi am sa va prezentam ceva nou, cum putem pune avatarul celui care a postat ultimul subiect in widget ? Usor ne vom folosi de cateva functii, iata ceva nou pentru forumurile voastre.

Pasul 1:
Panou de administrare > Afisare > Template-uri > Portal > mod_recent_topics
Inlocuim continutul widget-ului cu acest cod:

Cod:

<div class="module">
   <div class="inner"><span class="corners-top"><span></span></span>

      <div class="h3">Subiecte Recente</div>

<!-- BEGIN scrolling_row -->
    {MARQUEE_JS_SRC}
    <div id="comments_scroll_div">
        <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
            <!-- BEGIN recent_topic_row -->
            &raquo;&nbsp;<a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />
            <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}&nbsp;

            <!-- BEGIN switch_poster -->
            <a href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
            <!-- END switch_poster -->

            <!-- BEGIN switch_poster_guest -->
            {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
            <!-- END switch_poster_guest -->
            <!-- END recent_topic_row -->
        </div>
    </div>
    <script>
        $(".marquee").marquee();
    </script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
   <!-- BEGIN recent_topic_row -->
          <div id="_widget">
          <span class="user-avatar">
            <!-- BEGIN switch_poster -->
            <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}" class="misc-avatar">
              <img src=" #" class="short_avatar" />
            </a>
            <!-- END switch_poster -->
          </span>
      <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;
         
      <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
          </div>
   <!-- END recent_topic_row -->
<!-- END classical_row -->

   <span class="corners-bottom"><span></span></span></div>
</div>

Pasul 2:
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Cod:

img.short_avatar {
  width: 30px;
  height: 30px;
  margin: 2px 5px -5px 0px;
  border: 1px solid #ddd;
  padding: 1px;
}

span.user-avatar {
  float: left;
}

Pasul 3:
Panou de administrare > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript

Cod:

function getUserAvatars(id, img) {
    $.get('/memberlist', function(a) {
        var usx = $('.forumbg table#memberlist tbody tr', a),
        i;
        for(i = 0; i < usx.length; i++) {
            id = $('td.avatar-mini a', usx[i]).attr('href');
            img = $('td.avatar-mini a img', usx[i]).attr('src');
            localStorage.setItem('user-'+id, img);
        }
    });
    console.log("Execute code ...");
};

function recentTopics() {
   $('div#_widget').each(function() {
        var id = $(this).find('a.misc-avatar:eq(0)').attr('href').match(/\w*\d+/),
      img = localStorage.getItem('user-/'+id);
      $(this).find('a.misc-avatar:eq(0) img').attr('src',''+ img +'');
        if($(this).find('a.misc-avatar:eq(0) img').attr('src') == "null") return $(this).find('a.misc-avatar:eq(0) img').attr('src','https://2img.net/u/1117/47/88/98/avatars/gallery/defaul10.png');
   });
   console.log("Execute code ...");
};

$(function() {
getUserAvatars();
recentTopics();
setTimeout(function(){
     getUserAvatars();
}, 60000);
});

Acum ca am instalat toate codurile, vom da un refresh pagini si vom observa o incarcare foarte rapida a codului, folosind doar javascript. Atentie codul javascript isi face reload la fiecare 6 minute.

Demonstratie:


Cu stima Staark,
#OldSchoolCoding.