The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Thumbnail system for searches

+3
poesia-verses
Niko
perlesias
7 posters

Page 1 of 2 1, 2  Next

Go down

Solved Thumbnail system for searches

Post by perlesias January 19th 2024, 3:27 pm

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Other
Screenshot of problem : https://i.servimg.com/u/f72/20/03/34/28/5454510.jpg
Who the problem concerns : All members
When the problem appeared : Today
Forum link : https://musicollection.foroactivo.com/

Description of problem

A few years ago I got a JS from another support forum that does the job of putting thumbnail images in the searches. When I put FLAC in the search engine, for example, 20 results per page appear and it slows down the loading of the images. When I click on page 2 I get an error that says ''too many queries'' and it does not load. I don't know if the error is in the JS. @Niko , can you take a look? If the JS has no errors, can the search be limited to 10 topics per page?

Thumbnail system for searches Tttt10



Last edited by perlesias on February 26th 2024, 5:10 pm; edited 3 times in total
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 3:31 pm

Coucou @perlesias

the page and the script work fine on my side (on your forum) Embarassed

Please note that the error 429 is returned when your browser loads too many pages in a too short period of time from your forum. Consider that if you have 20 search results, you are opening 21 pages at the same (the main page + the 20 pages from which the images are taken). Let's say it is not really efficient Embarassed

My suggestion can be to consider a more "native" solution, have a look at the new update of forumotion (New variable in topics_list_box template, which returns the image URL "og:image" for each topic.)
=> https://help.forumotion.com/t162851-recent-forumotion-updates-access-to-the-forum-under-construction-2-new-widgets-new-variable

Maybe you can use that variable to retrieve the topic image instead, it would be served "server-side" and it would be much more efficient Wink
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

SarkZKalie and perlesias like this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 3:50 pm

I don't know where to put this code to test:

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" />

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

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 4:16 pm

@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 Wink

perlesias wrote:Anyway, can you limit the search to a maximum of 10 results per page?
I'm not sure, but I think it the option to change that is the same that defines how many topics to show per page Wink
ACP > General > Messages and emails >Configuration > Topics (last box) > Topics per page

Thumbnail system for searches Scree243
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 4:37 pm

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 Wink

If it is the default, never edit it before..

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 -->
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 5:00 pm

  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;}
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 5:16 pm

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

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 5:22 pm

No image appears in this post, why is this?

Thumbnail system for searches 57454510
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 5:25 pm

perlesias wrote: @Niko Now it loads like lightning, but no image appears in searches, can it also be adapted for searches?
Edit the template General/search_results_topics and do the same (add that code before
Code:
<div class="topic-title-container">
)

perlesias wrote:No image appears in this post, why is this?
Thumbnail system for searches 57454510

Can you provide me the topic link? It is probably because no image is available in that topic Neutral
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 5:27 pm

perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 5:29 pm

Try to edit the post and check in edition page if this part is filled in (the last two fields, about the images link)

Thumbnail system for searches Scree244

If not, try to simply save the post without doing anything. If you re-edit the post, the two fields should be filled automatically with the image link Wink
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 5:32 pm

Image does not appear in searches

Thumbnail system for searches 454510
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 5:33 pm

@perlesias so i am afraid this native solution is not available for that template, and can only be used in the other template Embarassed

So I think there isn't a native solution to do that, and @Luzz may confirm that :rose:
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 6:25 pm

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

Thumbnail system for searches Hhh10

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

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 6:40 pm

@perlesias if you want you can add this javascript to remove the box whenever there isn't a valid image:
Code:
$(function() {
$('.bim_img_container img.bim_mainThumb[src="https://2img.net/i/empty.gif"]').parent().parent().parent().parent().remove();
});

If you want to remove it on all section, but on section 4 to keep it - use this script instead:
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();
    }
});
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

perlesias likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 19th 2024, 6:48 pm

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.
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 19th 2024, 6:52 pm

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.

I think in the searches the only way is to keep using the script you had Embarassed
But let's see if @Luzz confirms or not that the variable cannot be used in that template Wink
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

perlesias likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by poesia-verses January 20th 2024, 6:22 am

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

Male Posts : 531
Reputation : 21
Language : and small english

https://stihi-podval.forumotion.com/

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko January 20th 2024, 12:08 pm

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

There are other criteria for which the image may not appear, but the site on which they are hosted is not one of them Wink
The image appears even if it is another website Thumbnail system for searches Naughty Thumbnail system for searches Naughty
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

poesia-verses likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Hancki January 22nd 2024, 11:18 pm

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

Thumbnail system for searches Hhh10

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

Hello!

I think the problem is with your computer/cache/internet, or anything similar.

I have tried 2 search terms and the images are showing even on searches:
- https://prnt.sc/6e0UjvapOJWp
- https://prnt.sc/tDO_KLqNUNuG

Clear you web browser cache and cookies. Or try another browser (like Edge, Firefox, Chrome, etc.).

It should work normally.

Hancki
Hancki
Hancki
Forumember

Posts : 48
Reputation : 0
Language : Portuguese

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Luzz January 23rd 2024, 11:09 am

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

Thumbnail system for searches 22-01-10
Luzz
Luzz
Administrator
Administrator

Posts : 1922
Reputation : 359
Language : French, English, Russian

http://forum.forumactif.com/

poesia-verses likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by jucarese January 23rd 2024, 1:48 pm

I also see your images without problems

Thumbnail system for searches 23-01-10
It could be a cache problem with your browser.

https://help.forumotion.com/t145185-how-to-clear-the-cache-cookies-in-your-browsers?highlight=clear+cookies++cache
jucarese
jucarese
Hyperactive

Male Posts : 2460
Reputation : 116
Language : spanish
Location : SSF Admin

http://asistencia.foroactivo.com/u23082

TonnyKamper likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 23rd 2024, 3:44 pm

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 ?


Hello Luzz, it is not because of the variable, it is because of JS. I was testing with the variable but the images did not appear in the searches natively. That is why we were wondering that the template I was using was not compatible with the new variable. The fact is that it does work on forum topics, but not on searches. Thumbnail system for searches Mouais
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Luzz January 25th 2024, 3:14 pm

Hello @perlesias ,

Yes, thank you very much for this clarification, this is exactly what I wanted to check. I will see with the technical team if can change anything in this behavior.

Regards
Luzz
Luzz
Administrator
Administrator

Posts : 1922
Reputation : 359
Language : French, English, Russian

http://forum.forumactif.com/

Niko, TonnyKamper and perlesias like this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias January 25th 2024, 3:17 pm

Thank you very much @Luzz. Greetings Hello
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Niko likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias February 22nd 2024, 12:09 pm

Thanks @Razor12345 for reopening the topic!. @Niko You can now make the update for this request!
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Niko likes this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko February 22nd 2024, 12:14 pm

Coucou @perlesias

following the same modifications I mentioned you before for the viewtopic_body template, now you can also do that for the blog and the search topics templates Wink

  • 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


You can thank @Luzz and the technical team for this latest update and feature for your forum Mr. Green
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

TonnyKamper and poesia-verses like this post

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias February 22nd 2024, 12:24 pm

@Niko I attached the modified search_results_topics spreadsheet, but it doesn't work for me



Last edited by perlesias on February 26th 2024, 5:09 pm; edited 1 time in total
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by perlesias February 22nd 2024, 12:30 pm

For now I did as he told me on the previous occasion, but it doesn't work

Thumbnail system for searches 11111
perlesias
perlesias
Forumember

Posts : 201
Reputation : 4
Language : spanish

Back to top Go down

Solved Re: Thumbnail system for searches

Post by Niko February 22nd 2024, 12:49 pm

@perlesias I think it has not been released publicly yet, give it a few days Embarassed

My bad, I think I spoilered it ahah ouou ouou
Niko
Niko
Helper
Helper

Male Posts : 3110
Reputation : 245
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

TonnyKamper and poesia-verses like this post

Back to top Go down

Page 1 of 2 1, 2  Next

Back to top

- Similar topics

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