The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Replace avatar with topic image to recent topic widget

View previous topic View next topic Go down

Solved Replace avatar with topic image to recent topic widget

Post by Luffy on October 22nd 2014, 1:20 am

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

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by _Twisted_Mods_ on October 22nd 2014, 1:36 am

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

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Van-Helsing on October 22nd 2014, 2:20 am

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.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Luffy on October 22nd 2014, 12:10 pm

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://illiweb.com/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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Van-Helsing on October 22nd 2014, 12:19 pm

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.

Van-Helsing
Hyperactive

Male Posts : 2198
Reputation : 82
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Luffy on October 23rd 2014, 1:20 am

java:

Code:
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});
$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Το πεδίο υποστηρίζει μόνο αρχεία μορφής: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

CSS:

Code:
img.hanckidesc{float:left !important}
img.hanckidesc{-moz-box-shadow:0 0 5px 0 rgba(50,50,50,0.75);-webkit-box-shadow:0 0 5px 0 rgba(50,50,50,0.75);box-shadow:0 0 5px 0 rgba(50,50,50,0.75);float:left!important;margin-top:-36px!important;height:50px!important;width:50px!important;padding:1px!important;z-index:10!important;margin-left:-75px}
a#hanckidescpopup img{transition:all 800ms ease 0!important}
a#hanckidescpopup img:hover{height:38px!important;position:relative;margin-top:0 !important;margin-bottom:14px;border-radius:8px !important;margin-left:-25px;transform:scale(1.85,1.97);transition:all 800ms ease 0!important;width:100px!important;z-index:999!important}

posting_body (template):

Code:
<!-- BEGIN switch_description -->
      <dl>
         <dt><label>Εικόνα Θέματος</label></dt>
         <dd class="frm-input">
            <input type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
         </dd>
      </dl>
      <!-- END switch_description -->






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Luffy on October 24th 2014, 2:31 pm

Bump!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Luffy on October 25th 2014, 3:48 pm

Bump again!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Ange Tuteur on October 25th 2014, 4:38 pm

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://illiweb.com/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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Luffy on October 26th 2014, 1:41 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Ange Tuteur on October 26th 2014, 9:12 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Luffy on October 27th 2014, 1:50 am

Solved thanks!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Replace avatar with topic image to recent topic widget

Post by Ange Tuteur on October 27th 2014, 4:17 am

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum