Thumbnail system for searches
+3
poesia-verses
Niko
perlesias
7 posters
Page 1 of 2
Page 1 of 2 • 1, 2
Thumbnail system for searches
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?Last edited by perlesias on 26/2/2024, 17:10; edited 3 times in total
perlesias- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
Coucou @perlesias
the page and the script work fine on my side (on your forum)
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
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
the page and the script work fine on my side (on your forum)
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
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
SarkZKalie and perlesias like this post
Re: Thumbnail system for searches
I don't know where to put this code to test:
Anyway, can you limit the search to a maximum of 10 results per page?
- 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- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
@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
ACP > General > Messages and emails >Configuration > Topics (last box) > Topics per page
only if it's edited, otherwise just tell me if it's the default one because you never customized it
I'm not sure, but I think it the option to change that is the same that defines how many topics to show per pageperlesias wrote:Anyway, can you limit the search to a maximum of 10 results per page?
ACP > General > Messages and emails >Configuration > Topics (last box) > Topics per page
Re: Thumbnail system for searches
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
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}
{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} <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- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
- 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>
- then try to disable the javascript code you used previously
- 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;}
Re: Thumbnail system for searches
@Niko Now it loads like lightning, but no image appears in searches, can it also be adapted for searches?
perlesias- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
Edit the template General/search_results_topics and do the same (add that code beforeperlesias wrote: @Niko Now it loads like lightning, but no image appears in searches, can it also be adapted for searches?
|
Can you provide me the topic link? It is probably because no image is available in that topic
Re: Thumbnail system for searches
@perlesias so i am afraid this native solution is not available for that template, and can only be used in the other template
So I think there isn't a native solution to do that, and @Luzz may confirm that
So I think there isn't a native solution to do that, and @Luzz may confirm that
Re: Thumbnail system for searches
@perlesias if you want you can add this javascript to remove the box whenever there isn't a valid image:
If you want to remove it on all section, but on section 4 to keep it - use this script instead:
- 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();
}
});
perlesias likes this post
Re: Thumbnail system for searches
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- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
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
But let's see if @Luzz confirms or not that the variable cannot be used in that template
perlesias likes this post
Re: Thumbnail system for searches
if the images are not uploaded TO THE FORUM but are inserted from other sites, this may happen
Re: Thumbnail system for searches
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
The image appears even if it is another website
poesia-verses likes this post
Re: Thumbnail system for searches
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- Forumember
- Posts : 48
Reputation : 0
Language : Portuguese
Re: Thumbnail system for searches
I also see your images without problems
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
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
TonnyKamper likes this post
Re: Thumbnail system for searches
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.
perlesias- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
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
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
Niko, TonnyKamper and perlesias like this post
Re: Thumbnail system for searches
Thank you very much @Luzz. Greetings
perlesias- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Niko likes this post
Re: Thumbnail system for searches
Thanks @Razor12345 for reopening the topic!. @Niko You can now make the update for this request!
perlesias- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Niko likes this post
Re: Thumbnail system for searches
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
You can thank @Luzz and the technical team for this latest update and feature for your forum
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
- In the template topics_list_box (template for the topics view) you can use the variable
to show the main image of the topic- Code:
{topics_list_box.row.U_FB_IMAGE}
- In the template search_results_topics (template for search results in topics mode) you can use the variable
to show the main image of the topic- Code:
{searchresults.U_FB_IMAGE}
- In the template topic_blog_box (template for blog posts view) you can use the variable
to show the main image of the topic- Code:
{topics_blog_box.row.U_FB_IMAGE}
You can thank @Luzz and the technical team for this latest update and feature for your forum
TonnyKamper and poesia-verses like this post
Re: Thumbnail system for searches
Last edited by perlesias on 26/2/2024, 17:09; edited 1 time in total
perlesias- Forumember
- Posts : 197
Reputation : 4
Language : spanish
Re: Thumbnail system for searches
@perlesias I think it has not been released publicly yet, give it a few days
My bad, I think I spoilered it ahah
My bad, I think I spoilered it ahah
TonnyKamper and poesia-verses like this post
Page 1 of 2 • 1, 2
Similar topics
» Ip searches
» Related searches bar???
» Search only searches Topic Title??
» Did anyone notice post searches won't go past the first page?
» How do I add thumbnail?
» Related searches bar???
» Search only searches Topic Title??
» Did anyone notice post searches won't go past the first page?
» How do I add thumbnail?
Page 1 of 2
Permissions in this forum:
You cannot reply to topics in this forum