Show thumbnails in the preview pane

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



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 :slight_smile:
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 :slight_smile:

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.


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…

100% javascript :slight_smile:

1 Like

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…).