Show Posts
1
HFS ~ HTTP File Server / how to inline images in folder view
« on: April 16, 2022, 07:34:01 AM »
i was initially going to ask the forum how to inline images, but i figured it out before completing my post 
but because i didn't find a solution while searching the forum, here's how i did it:
go menu -> HTML Template -> Edit
then find
and replace it with
before:
after:
but because i didn't find a solution while searching the forum, here's how i did it:
go menu -> HTML Template -> Edit
then find
Code: [Select]
[box folder]
<fieldset id='folder'>
and replace it with
Code: [Select]
[box folder]
<fieldset id='folder'>
<script>
// the DOMContentLoaded is only needed because im too lazy to figure out how to add the script to the end of the pageload
document.addEventListener("DOMContentLoaded",function(){
//return;
// ??? is it 42 or 43 or both?
$("#files img[src='/~img43'],#files img[src='/~img42']").parent().each(function(){
let preview_size = "250px";
let inline_image = document.createElement("img");
inline_image.name="inline_image";
inline_image.style = "max-width: "+preview_size+";"
inline_image.src = this.href;
inline_image.addEventListener("click",function(ev){
if(ev.target.style["max-width"]){
ev.target.style["max-width"]="";
} else{
ev.target.style["max-width"]=preview_size;
}
});
this.parentNode.appendChild(document.createElement("br"));
this.parentNode.appendChild(inline_image);
});
});
</script>
and all the images in folders will be inlined before:
after: