Replace avatar with topic image to recent topic widget

Hello,

I want the avatar on my recent topic widget to be replaced by the image of the specific post.
If it is possible, my forum is PunBB and this is my Forum Link!

I use for the recent topic widget this template:

Code:

<!-- BEGIN scrolling_row -->
<div class="module main1">
  <div class="main-head1"><div class="h3">Πρόσφατα Θέματα</div></div>
  <div class="main-content" id="comments_scroll_div">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" 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}
    <!-- BEGIN switch_poster -->
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" 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 -->
      <!--
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
  </div>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
  div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
});
//]]>
</script>
<!-- END scrolling_row -->
<!-- BEGIN classical_row -->
<div class="module main">
  <div class="main-head1"><h3>Πρόσφατα Θέματα</h3></div>
  <div class="main-content">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
                <a href="{classical_row.recent_topic_row.U_TITLE}" class="bottooom"><font style="font-size: 11px;">{classical_row.recent_topic_row.L_TITLE}</font></a><br />
      <!-- BEGIN switch_poster -->
                <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-size: 11px;">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
      <!-- END switch_poster -->
      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->
                {ON} <font style="font-size: 11px;" class="bottooom">- {classical_row.recent_topic_row.S_POSTTIME}</font><br /><br />
      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
        -->
            </div>
          </div><br/>
    <!-- END recent_topic_row -->
  </div>
</div>
<!-- END classical_row -->

Thanks in advance,
MrMind

.avt_recent img{background-image: url(linktoimage)}

Hello Mr.Mind,
Try to use this variable

Code:

<img src="{post_row.switch_attachments.switch_post_attachments.U_IMG}" />

instead of avatar variable in your code or if its not working try to add the hanckidesc variable.

To make the avatars display on the widget i am currently using this javascript:

Code:

$(function(){
   
      if(!window.localStorage) return;
   
      // Avatar por defecto
        var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
   
      // Tiempo de cache, aqui 24 h * 60 m * 60 s * 1000 ms entonces un día
        var caching_time= 24*60*60*1000;
   
      // Tiempo de cache de un error, ici 60 s * 1000 ms entonces un minuto
        var caching_error= 60*1000;
   
      var set_avatar= function(id) {
            $('.mini_ava2.member'+id).html('<img src="'+get_avatar(id)+'" />');
        };
   
      var get_avatar= function(id) {
            if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
            {
                localStorage.setItem('d_ava'+id, default_avatar);
                $.get('/u'+id, function (d){
                    localStorage.setItem('t_ava'+id,+new Date);
                    localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                    set_avatar(id);
                });
            }
            return localStorage.getItem('d_ava'+id);
        };
   
      var to_replace= {};
   
    $('.module.main:has(a[href^="/t"]) a[href^="/u"]').each(function(){
            to_replace[$(this).attr('href').substr(2)]= 1;
            $(this).before('<span class="mini_ava2 member'+$(this).attr('href').substr(2)+'"></span>');
        });
   
      for(i in to_replace)
        {
            set_avatar(i);
        };
   
  });

I need the avatars to go and them to be replaced by' as far as i'm concerned a different javascript which will grab the description of the post in the recent topic widget.

Hello Mr. Mind,
Do you have the hancki's code and/ or js which you have for image preview in topics_list box?
We need it to adapt the widget code.

Bump!

Bump again!

Hello MrMind,

Replace your mod_recent_topics template by :

Code:

<!-- BEGIN scrolling_row -->
<div id="recentTopics" class="module main1">
  <div class="main-head1"><div class="h3">Πρόσφατα Θέματα</div></div>
  <div class="main-content" id="comments_scroll_div">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" 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}
    <!-- BEGIN switch_poster -->
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" 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 -->
      <!--
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
  </div>
</div>
<script type="text/javascript">
//<![CDATA[
$(function(){
  div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
});
//]]>
</script>
<!-- END scrolling_row -->
<!-- BEGIN classical_row -->
<div id="recentTopics" class="module main1">
  <div class="main-head1"><h3>Πρόσφατα Θέματα</h3></div>
  <div class="main-content">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
                <a href="{classical_row.recent_topic_row.U_TITLE}" class="bottooom"><font style="font-size: 11px;">{classical_row.recent_topic_row.L_TITLE}</font></a><br />
      <!-- BEGIN switch_poster -->
                <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-size: 11px;">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
      <!-- END switch_poster -->
      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->
                {ON} <font style="font-size: 11px;" class="bottooom">- {classical_row.recent_topic_row.S_POSTTIME}</font><br /><br />
      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
        -->
            </div>
          </div><br/>
    <!-- END recent_topic_row -->
  </div>
</div>
<!-- END classical_row -->

Add this to your CSS :
Display > Colors > CSS

Code:

.prevImg {
  background:url(http://2img.net/i/fa/prosilver_grey/subforum_read.gif) no-repeat;
  background-size:100% 100%;
  display:block;
  width:25px;
  height:25px;
  margin:3px;
  float:left;
  overflow:hidden;
}

.prevImg img {
  width:25px;
  height:25px;
}

and create a new script :
Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In all the pages

Code:

$(function() {
  var cacheTime = 1*60*1000; // mm * ss * ms

  if (!document.getElementById('recentTopics')) return;
  if (localStorage.recentExp > +new Date - cacheTime) return $('#recentTopics').html(localStorage.recentHTML);
  $('#recentTopics a.bottooom').each(function() {
    $(this).before('<span class="prevImg"></span>');
    $(this).prev().load($(this).attr('href') + ' .post:first .entry-content img:first', function() {
      setTimeout(function() {
        if (window.localStorage) {
          localStorage.recentHTML = $('#recentTopics').html();
          localStorage.recentExp = +new Date;
        }
      },1000);
    });
  });
});

If there is a large amount of recent topics the data needs to be cached to prevent you from exceeding the request limit. At the top of the script you can adjust the cache time.

How does the cashe works? If i leave it to 1 what does it do?

It will cache the topics and loaded images for 1m60s.

Solved thanks!

You're welcome ^^

Topic archived