# Create & associate content folder with image

**URL:** <https://forum.getkirby.com/t/create-associate-content-folder-with-image/12291>\
**Category:** Questions\
**Tags:** v3\
**Created:** [January 20, 2019, 5:42pm UTC](https://forum.getkirby.com/t/create-associate-content-folder-with-image/12291 "2019-01-20T17:42:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ar\_xiv](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/ar_xiv/32/13527_2.png) [@ar\_xiv](https://forum.getkirby.com/u/ar_xiv)\
**Post date:** [January 20, 2019, 5:42pm UTC](https://forum.getkirby.com/t/create-associate-content-folder-with-image/12291/1 "2019-01-20T17:42:57Z")

</div>

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:  
[http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html](http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html)

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…

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 20, 2019, 5:52pm UTC](https://forum.getkirby.com/t/create-associate-content-folder-with-image/12291/2 "2019-01-20T17:52:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [January 20, 2019, 5:53pm UTC](https://forum.getkirby.com/t/create-associate-content-folder-with-image/12291/3 "2019-01-20T17:53:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ar\_xiv](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/ar_xiv/32/13527_2.png) [@ar\_xiv](https://forum.getkirby.com/u/ar_xiv)\
**Post date:** [January 20, 2019, 6:28pm UTC](https://forum.getkirby.com/t/create-associate-content-folder-with-image/12291/4 "2019-01-20T18:28:31Z")

</div>

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:

> **[Microsculpture - Splendid-necked Dung Beetle](http://microsculpture.net/splendid-necked-dung-beetle.html)**
>
> Explore the beauty of the Splendid-necked Dung Beetle in astonishing detail. Created from around 8000 photographs taken by Levon Biss as part of the Microsculpture project.

  
and more info about slicing:  

> <https://gis.stackexchange.com/questions/285483/how-can-i-convert-an-image-into-map-tiles-for-leafletjs>