How to define custom image thumb filenames?

Kirby 3 Solved ✅
1

I’m using a javascript library which requires me to name the thumb images like {{ filename }}_thumb.{{extension}}. How can i specify the output filename with the ->thumb method? Or is there another workaround?

2

I don’t think you can tamper with the filenames… Isn’t there a possibility to add a data-attribute or something instead?

3

No, it’s not. That plugin expects the thumb file name exactly to be like the original filename, followed by a _thumb prefix. The plugin expects that the developer has control over naming the thumb files. To my mind, we should have that control. I’d expect a ->filename() method in the thumb()function, but looks like there is no … I’m looking for a workaround.

4

I haven’t really looked closely, but I see two options:

Using a custom thumb generator or using the fileversion component.

Which JS library are you using?

5

I suspect the filename is actually the “thing” that binds the original image (in the content folder) with the generated image (in the media folder). If you tamper with the filenames, Kirby might get confused and generated images don’t get flushed upon edits (update / delete) of the original. Be sure to test that!

6

@texnixe would it be possible to use htaccess rules to create alias with _thumb for all image files in the media folder? pretty much like fingerprinting of css/js files?

7

@bnomei Since the filename is needed client-side, just re-routing from .htaccess probably doesn’t make sense? Or am I missing something?

8

I need to get this output from the template:

  <a href="1.jpg"><img src="1_thumb.jpg"></a>
  <a href="2.jpg"><img src="2_thumb.jpg"></a>

@texnixe: it’s for an image gallery script which we have to use.

9

@andio:

Please offer a link to download that library free of charge!

10

Thank you so much for your support. I found out about a data-attribute, like @bvdputte mentioned at first. Its not documented, but i found out about it while studying the code. Everything works now as expected. I can use the $img->thumb() method with the data-thumb="" attribute.

Btw, the particular javascript image gallery is called fotorama.

11

Great you worked it out.

FYI (and totally opinionated), I like to use https://photoswipe.com for this. It’s small, has a good API and no jQuery dependency.