how to inline images in folder view

[hanshenrik]

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

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:

[hanshenrik]

what the heck? i have hfs on different computers, both are 2.3m, but on the first computer the generic image thumbnail is /~img43 and on the 2nd computer the image thumbnail is /~img42  , what gives?   idk how it happened, but that breaks my "#files img[src*='img42']" selector "on some computers"

using the alternative selector "#files img[src='/~img43'],#files img[src='/~img42']" works on both computers, but i'm still confused

[LeoNeeson]

what the heck? i have hfs on different computers, both are 2.3m, but on the first computer the generic image thumbnail is /~img43 and on the 2nd computer the image thumbnail is /~img42  , what gives?   idk how it happened, but that breaks my "#files img[src*='img42']" selector "on some computers"

Rejetto could give you a much better answer than mine, but AFAIK this is a normal behavior, since thumbnail icons are automatically generated by HFS (following a numerical order), based on the registered file extensions found on a Windows system. For example, on one Windows computer, you could have installed VideoLAN (VLC), which registers *.webm file extension (along with other file formats), and on another Windows perhaps you don't have VLC installed (or another software that associates a file extension with an existing application). It's hard to explain, but that should be the reason of the numerical change of order on the image thumbnails, from /~img42 to /~img43. Someone please correct me if I'm mistaken.

By the way, I'm happy to see someone still using HFS2.
 

[NaitLee]

Hi,

Great DIY job

To ignore the dynamic icon problem, in your code replace the selector-parent-each line with this:

Code: [Select]

document.querySelectorAll('a[href$=".jpg"i],a[href$=".png"i],a[href$=".gif"i],a[href$=".webp"i]').forEach(function(e) {

And replace all "this" as "e". Well done.

This seems straightforward to you and no need to explain


Yes, I still love the HFS 2 philosophy, and in my own view things like Electron and React have ruined everything JavaScript brought to us.

Actually it's so glad that rejetto tried to make HFS 3 without too much (compared to other), and in fact we can directly change the (even after compilation) server code.
(I know rejetto may feel it inappropriate, but I found and reported some bugs in a way of tracing the compiled code)
In contract the react frontend have no such luck, though we have plugins.

I don't know when I'll actually make "template in HFS 3" be real (planned far ago). I'm busy on other things these days to obtain some inspiration.
Another previously untold idea is a native UI with something like tcl/tk, to mimic HFS 2

[hanshenrik]

Rejetto could give you a much better answer than mine, but AFAIK this is a normal behavior, since thumbnail icons are automatically generated by HFS (following a numerical order), based on the registered file extensions found on a Windows system

i think i get it, thanks!  and so far HFS2 has everything i need for a small photo gallery + file sharing among friends thing, and it is much easier to set up than.. idk, Apache+mysql+php whatever alternative ^^ (and i did briefly check out HFS3, and quickly determined that it's not nearly as user-friendly as HFS2 yet, and ignored it ^^)

Hi,

Great DIY job

To ignore the dynamic icon problem, in your code replace the selector-parent-each line with this:

Code: [Select]

document.querySelectorAll('a[href$=".jpg"i],a[href$=".png"i],a[href$=".gif"i],a[href$=".webp"i]').forEach(function(e) {


thanks, and thanks ^^ was kindof hoping to avoid needing a list of image formats filenames, given that HFS already seems to know what formats are images and what isn't... but since that info seemingly isn't added to the HTML, i guess it's nearly unavoidable also you forgot "jfif" and "bmp" and "ico" ! i don't know what jfif is exactly, but it's some kind of obscure image format, because HFS knew its an image (the screenshots in the top post actually contains a jfif ^^)

[NaitLee]

thanks, and thanks ^^ was kindof hoping to avoid needing a list of image formats filenames, given that HFS already seems to know what formats are images and what isn't... but since that info seemingly isn't added to the HTML, i guess it's nearly unavoidable also you forgot "jfif" and "bmp" and "ico" ! i don't know what jfif is exactly, but it's some kind of obscure image format, because HFS knew its an image (the screenshots in the top post actually contains a jfif ^^)

To tell truth, HFS doesn't know "much" -- it's because a Windows system applications have support, and associated to the file extension to open it directly. You can see the icon is from that application. HFS just see you're listing the file, then query Windows (just) for an icon.

The way Web (browser) know what's it is "MIME type". HFS have some common MIME types built in, but not eg. jfif.

I tried to make jfif image but both GIMP and ImageMagick didn't work. It's so rare...
(KDE desktop lists it as a kind of "JPEG image")

But since you already know the way, adding few more isn't a big deal, right?

... messy? try looping an array:

Code: [Select]

['.jpg', '.png', '.gif', '.webp', '.jfif', '.bmp', '.ico'].forEach(function(t) {

    document.querySelectorAll('a[href$="' + t + '"i]').forEach(function(e) {
        // ...
    });
});
(jfif not guaranteed to show in browser)

[hanshenrik]

Now I want to do the same on HFS3, anyone know how?

[hanshenrik]

Could try the thumbnails plugin: https://github.com/rejetto/thumbnails
But I don't really trust the author, looks like a shady fellow.
So I wrote this custom-html-footer code:

Code: [Select]

(function () {
    // todo: is there an event fired by HFS when all elements are loaded? that would be better than this retry approach.
    let retryUntilSuccessFunction;
    retryUntilSuccessFunction = function () {
        let images = document.querySelectorAll('span[role="img"].fa-image');
        if (images.length === 0) {
            setTimeout(retryUntilSuccessFunction, 100);
            return;
        }
        document.querySelectorAll('span[role="img"].fa-image').forEach(function (el) {
            let span = el;
            while (el.tagName.toLocaleLowerCase() !== 'a') {
                el = el.parentNode;
            }
            let url = el.href;
            let imageElement = document.createElement('img');
            imageElement.src = url;
            imageElement.style['max-width'] = '500px';
            span.appendChild(imageElement);
        });
    };
    retryUntilSuccessFunction();
})();

- half-joking, I need to be able to specify max-width, made a feature request here https://github.com/rejetto/thumbnails/issues/3