Create & associate content folder with image

Hey there! So, I’m working on a site which includes a “deep zoom” image gallery, behind each image of which will be a folder including many small tiles that make up the high res image. I’m using leaflet.js, something like this:

What I’m wondering, is if I can set up the panel such that when a panel user uploads a low-res image, a new content folder in which to put the hi res tiles can be automatically created. The only solution I can think of is to instruct the user to make new folders for each image and make sure the low-res image and the folder have the same filename (without extension). I want the ordering of the low-res images to match the content folders also…

I hope this all makes sense. I’m working on it now and I’ll post updates. Any help would be appreciated! Thank you.

Edit: I’m realizing an easier arrangement might be to have the low-res versions in the folder along with the hi-res tiles…

You could use a hook that auto-creates a new folder when a user uploads a file.

1 Like

The example you shared only uses one image. Can you share the code you are using, as It sounds like you have deviated from that tutorial… and you don’t mention wether you are using Kirby 2 or 3.

Using Kirby 3. I apologize, that tutorial isn’t the method I’m going to be using exactly, I just know I’m using leaflet. Anyway, it’s not the focus of my question, which is more panel specific.

The total dimensions of the zoomable image will be something like 30,000px square, which is why the tile method will be used. Here is a fully functioning example:

and more info about slicing: