Custom folder previews

[D]

Let's say I have following folders

New folder
New folder 2
New folder 3

Each contains a "p.jpg", I want to use these as folder preview.

The code for diff template I'm currently using:

Code: [Select]

[+]
<script>
var list=document.querySelectorAll("table#files>tbody>tr");
function changepic(a1)
{
  var alink=a1.querySelector("a");
  var adress=alink.getAttribute("href");
  if(adress.endsWith("/"))
  {
  adress+="p.jpg";
  var img=document.createElement("img");
  img.setAttribute("src",adress);
  img.setAttribute("onerror","this.style.display='none'");
  a1.children[3].appendChild(img);
  }
}
list.forEach(changepic);
</script>eats too much cpu if there are too many folders. Because script doesn't check if p.jpg is actually present in folder

How can I fix it? Thanks in advance.

[D]

Okay, variant with images behind buttons:

Code: [Select]

[+]
<script>
var list=document.querySelectorAll("table#files>tbody>tr");
function changepic(a1)
{
  var alink=a1.querySelector("a");
  var adress=alink.getAttribute("href");
  if(adress.endsWith("/"))
  {
  adress+="p.jpg";
  var button=document.createElement("button");
  button.setAttribute("onclick","showPreview(this)");
  button.setAttribute("link",adress);
  button.setAttribute("type","button");
  a1.children[3].setAttribute("style","text-align:center");
  a1.children[3].appendChild(button);
  button.appendChild(document.createTextNode("Preview"));
  } 
}
list.forEach(changepic);
function showPreview(butt)
{
  butt.setAttribute("style","display:none");
  var par=butt.parentElement;
  var img=document.createElement("img");
  img.setAttribute("src",butt.getAttribute("link"));
  par.appendChild(img);
}
</script>

[dj]

for hfs2.4

Code: [Select]

[+]
<script>
function folderth(){
 [...document.querySelectorAll('#files a[href$="/"]')].forEach(item =>
 item.insertAdjacentHTML('afterend', '<img loading=lazy height=128 src='+item.href+'folder.jpg>')  //p.jpg
 )
}

if(!document.querySelector('main')) folderth()  //hfs2.4
else document.addEventListener('render', folderth)  //mobil-light_V5.6
</script>


[D]

for hfs2.4

Thanks. How can I move these images into Hits column?

[D]

The question is still relevant, can someone help, please?

[Owais Baloch]

Thanks. How can I move these images into Hits column?

[folder]
<div class="item folder {.if not|{.or|{.get|can archive.}|{.get|can delete.}.}| off .}"
    item-access="{.if|{.get|can access.}| You can access this item! | This item is protected. .}"
    item-added="%item-added%"
    item-dl-count="%item-dl-count%"
    item-comment="{.replace|>| &gt; |<| &lt; |"|"|%item-comment%.}">
   <a href="%item-url%" title="Click to Enter">

      <p align="center">

      <img src="%item-url%folder.png" style="width:256px;height:258px"/>
      </p>


      {.if|{.get|is new.}|<img class="new" src="/template/{.!theme.}/images/new.png" alt=""/>.}
   </a>
      <div><a href="%item-url%" title="Click to Enter"># %item-name% #</a>
<address>
&nbsp; </address>


   <address>Hit Count:<font color="#00bcd4"><b> %item-dl-count%  </b></font></address>


   Added: <span>
<font color="#FFF"><b> %item-modified% </b></font></span>


</div>
</div>

[Owais Baloch]

The question is still relevant, can someone help, please?

https://rejetto.com/forum/index.php?topic=13485.0