Lol, just fiddling around…
I wanted to see image-previews in the file-panel, like WordPress does (you can toggle between list and image display there).
$(".nav-list.sidebar-list li:first-of-type a.option").trigger("click");
var keyword = "/content/";
setTimeout(function() {
image_source = $("nav.contextmenu ul.nav-list li a").attr("href");
page_index = image_source.substring(image_source.indexOf(keyword) + keyword.length);
page_index = page_index.substring(0,page_index.indexOf("-"));
console.log("[index] : " + page_index);
$(".nav-list.sidebar-list:last-of-type > li").css({"float":"left","text-align":"center"});
$(".nav-list.sidebar-list li a.option").each(function(index) {
image_source = $(this).data("context").replace("/panel/pages/", "/content/" + page_index + "-").replace("/file/", "/").replace("/context", "");
console.log("[image] : " + image_source );
$(this).parent().find("a:eq(0) > i").removeClass("fa fa-file-image-o").css({"background":"#fafafa url('" + image_source + "')","display":"block","width":"5em","height":"5em","position":"relative","background-size":"cover"});
});
}, 2000);
I know this code is bad… but I will fine-tune it, so you can toggle the image-list by image or text -> reference Panel image preview
3 Likes
+1
I hope we at some point can have sidebar widgets, installed as plugins. That way we would have complete control over the sidebar.
Nice start!
I’d keep the files as a vertical list, because if you have other types of file it will look weird 
There are many ways to display thumbnails: to the left or bottom of the file name, when the mouse is over…
1 Like
I will fine-tune the script; for now it’s really a proof of concept.
You can copy/paste the code and run it in the developers console;
Images in the file-list will get a thumbnail then…
I can’t access the files by .php - because I can only implement this add-on as a field; so it’s javascript all the way
When it’s done, I will publish the code here.
That’s true; ideally, however, it would be helpful to have different file categories, so that would not matter anymore.
2 Likes
I will build in a catch / fall-back;
When the script discovers a non-image file, it will simply show a file-icon with the same dimensions.
That way the lay-out is consistent, even when it encounters ‘broken’ images.
Nice way of the current implementation is that the context-menu remains intact…
quote : The A-Team … “I like it, when a plan comes together!”
Please, mention - it’s a draft and 100% done with plain-vanilla Javascript.
I was able to compress the initial script by 50% - because I really, really think this feature is soon natively supported by Kirby itself (hint, check the data-attr of each link…).
