Thumbnail system for searches

Technical Details

Description of problem

Code:

<img style="max-width: 50%;margin-top: 15px;" src="{topics_list_box.row.U_FB_IMAGE}" alt="{topics_list_box.row.TOPIC_TITLE}" loading="lazy" />

perlesias wrote:Anyway, can you limit the search to a maximum of 10 results per page?

Niko wrote:@perlesias can you share me the content of your topics_list_box template?
only if it's edited, otherwise just tell me if it's the default one because you never customized it

Code:


<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">

      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
      {
         alert('MAIN');

         var all_checked = true;

         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
         {
            if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
            {
               all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
            }
         }

         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }

      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
      {
         alert('ALL');

         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
         {
            if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
            {
               document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
            }
         }
      }

      </script>
   <!-- END multi_selection -->

   <div class="forumbg announcement">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_list_box.row.L_TITLE}
               </dt>
               <dd class="posts">{topics_list_box.row.L_REPLIES}</dd>
               <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

<!-- BEGIN header_row -->
      <strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->

   <!-- BEGIN table_sticky -->
         </ul>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm" style="padding-left:0;">
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
               </dd>
               <dd class="posts" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
         <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>
               <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
               <!-- END single_selection -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_list_box.row.TOPIC_TYPE}
               <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

               <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
               {topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </dd>
            <!-- BEGIN multi_selection -->
               <input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            <!-- END multi_selection -->
         </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
   <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
   </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->


1. In the topics_list_box template, locate this line:
   

   Code:

   <div class="topic-title-container">

   
   and add this right before it:
   

   Code:

   <a class="bim_thumbPreview"><div style="padding: 1px; border: 1px solid #9a9a9a;"><div class="thumbIMG">
<div class="bim_img_container" style="overflow: hidden; background-image: none;">
<img src="{topics_list_box.row.U_FB_IMAGE}" class="bim_mainThumb"></div></div></div><span class="previewIMG"
<img src="{topics_list_box.row.U_FB_IMAGE}">
</span></a>

   
   
2. then try to disable the javascript code you used previously
   
   
3. add this CSS manually in the CSS style sheet
   

   Code:

   .bim_mainThumb {opacity: 1;visibility: visible;max-width: none;max-height: none;width: 100%;height: auto;display: block;image-rendering: auto}.bim_thumbPreview {float: left;position: relative;z-index: 0;}.bim_img_container {height: 85px;width: 85px;}.bim_thumbPreview span {box-shadow: 0 6px 6px rgba(0, 0, 0, 0.5);margin-left: 144px;margin-top: -68px;position: absolute;visibility: hidden;z-index: 100;}.bim_thumbPreview:hover span {visibility: none;}.bim_thumbPreview span img {border: 3px solid #9a9a9a;max-width: 300px;}

perlesias wrote: @Niko Now it loads like lightning, but no image appears in searches, can it also be adapted for searches?

perlesias wrote:No image appears in this post, why is this?

Code:

$(function() {
$('.bim_img_container img.bim_mainThumb[src="https://2img.net/i/empty.gif"]').parent().parent().parent().parent().remove();
});

Code:

$(function() {

    var allowed_forums = ['4'];
   
    var current_forum = $('.topic-actions p.path a.nav:last-child').attr('href');
    var forum_id = current_forum.split('/f')[1].split('-')[0];


    if (!allowed_forums.includes(forum_id)) {
        $('.bim_img_container img.bim_mainThumb').parent().parent().parent().parent().remove();
    }
});

perlesias wrote:Thank you @Niko , we are waiting to see what Luzz says, if there is no solution for the images in the searches I will close the topic.

poesia-verses wrote:if the images are not uploaded TO THE FORUM but are inserted from other sites, this may happen

perlesias wrote:I just saw that in other forums where there is no image, the box remains empty.



Can it be done so that the images are only seen in forum 4?

Luzz wrote:I also see your images on the search page. I don't know if finally you are using our variable or an other solution ?

• In the template topics_list_box (template for the topics view) you can use the variable

  Code: {topics_list_box.row.U_FB_IMAGE}

  to show the main image of the topic
  
  
• In the template search_results_topics (template for search results in topics mode) you can use the variable

  Code: {searchresults.U_FB_IMAGE}

  to show the main image of the topic
  
  
• In the template topic_blog_box (template for blog posts view) you can use the variable

  Code: {topics_blog_box.row.U_FB_IMAGE}

  to show the main image of the topic