Module: TemplatePreviewImages

[bernhard]

hi everyone,

i'm happy to share my first little module that could have broader use...

use at your own risk! i'm quite new to module development

Usage

Just install the module and place your preview images in the folder /site/templates/TemplatePreviewImages

• filename = template-name.png

Github

https://github.com/BernhardBaumrock/TemplatePreviewImages

Notes

• jquery image picker used in this module (MIT license): http://rvera.github.io/image-picker/

Room for improvement / roadmap:

• Images are resized via CSS (height: 200px)
• Images could be placed via masonry or the like
• create image-field to upload preview images directly to the template

looking forward to hearing your feedback

ps: is it intentional that i am only allowed to choose from 2 templates when adding the page and have more options available when editing the template settings of the page like you can see in the video? i'm wondering why this should be like this?!

[teppo]

ps: is it intentional that i am only allowed to choose from 2 templates when adding the page and have more options available when editing the template settings of the page like you can see in the video? i'm wondering why this should be like this?!

Superusers can use Page Edit to select templates that are otherwise not available. It's a feature, though admittedly a weird one

[LostKobrakai]

Some enhancements could be:

- A setting to chose thumbnail size, maybe even giving the users the option to choose by themselves.

- Moving the images folder out of the module's folder. It should rather be part of the assets or templates folder.

[bernhard]

update version 2

Some enhancements could be:

- A setting to chose thumbnail size, maybe even giving the users the option to choose by themselves.

- Moving the images folder out of the module's folder. It should rather be part of the assets or templates folder.

i was not sure where to put the images folder to be honest. changed it to /site/templates/TemplatePreviewImages

- added 2 fields to configure width + height

resizeing is done via jquery because i did not know how i would change the CSS dynamically based on module configuration. i tried to create a style.php instead of custom.css but that one was blocked (i guess by the pw htaccess?).

thank you for your suggestions lostkobrakai

[Mike Rockett]

I like this little module - very cool. Thanks for sharing

[bernhard]

thank you mike!

does anyone know how i can define the minimum processwire version? is it possible? i used the new config method from pw 2.5.5 https://processwire.com/blog/posts/new-module-configuration-options/ so i guess it's only compatible for PW2.5.5+ and i would like to add this information somewhere...

[Mike Rockett]

You can define the PW minimum in the module info:
 
"requires" => "ProcessWire>=2.5.5"

By the way, you can also separate your info into a JSON file named <ModuleName>.info.json, like this.

[bernhard]

thank you mike! where would i find this info on my own? i looked into several modules on github but didn't find it anywhere... i knew i've read it somewhere but couldn't remember... are there any docs? or in which file would i have had to look into to find all available options?

or could i've done a var_dump() or something?

[Mike Rockett]

• Module Creation: http://wiki.processwire.com/index.php/Module_Creation#Properties_to_return_from_getModuleInfo.28.29 (old wiki, but important stuff is there)
• Module Dependencies: https://processwire.com/talk/topic/778-module-dependencies/
• Module.php (line 67)

Not sure of any official [updated] module docs, actually. But haven't needed to look for them before.

[bernhard]

Thank you!

1) thanks, did read it and together with the blog post it was very helpful: https://processwire.com/blog/posts/new-module-configuration-options/

2) thank you!

3) damn... i looked at this file but didn't see the info in the comments 

[Roman Schmitz]

Great module - I love it!

 

But I had difficulties at the beginning display to the images.
When I looked into the source code, i noticed that you are looking at line 69 in the folder /site/templates for the preview images and not as stated in the description in the module folder /site/modules/TemplatePreviewImages.

 

I changed the code line in 69

$src = $this->config->urls->templates . $this->className . '/' . $tpl->name . '.png';

to

$src = $this->config->urls->templates . 'img/preview/' . $tpl->name . '.png';

and now i can store the images in the folder templates/img/preview.

[bernhard]

hi roman, welcome to the forum

sorry i forgot to update the description after updating the module to version 2!

update version 2

i was not sure where to put the images folder to be honest. changed it to /site/templates/TemplatePreviewImages

[OLSA]

Hello for all,

but first thanks to Bernhard for this module!

I also created something for similar usage (layout switcher, first image), but also do some additions to this nice module (second image).

Here in attachment is TemplatePreviewImages module version where I added some options:

• thumbnails creation (before usage need to create "thumbs" folder eg: "template/images/TemplatePreviewImages/thumbs)
• can use any kind of image extension (jpg, jpeg, gif, png)
• zoom option to preview (using PW integrated jQuery UI )
• can restrict module to works only inside desired page tree

Regards.

TemplatePreviewImages.zip

[ngrmm]

i installed the module and its working fine! thanks @bernhard

the module uses the pw-InputfieldSelect output. is this the reason why the current template is always at top/first place?
is there a way to change that?
i just want to keep the sorting.

[bernhard]

Hi ngrmm, I haven't used this module for years (wow, time flies ? ). I don't know what causes the reorder. May I ask why this is important for you?

[Soma]

There's a weird message on that module page? Anybody noticed?

https://processwire.com/modules/template-preview-images/

[maximus]

54 minutes ago, Soma said:

There's a weird message on that module page? Anybody noticed?

https://processwire.com/modules/template-preview-images/

this message from repo https://github.com/BernhardBaumrock/TemplatePreviewImages

[bernhard]

Hey @Soma this message was intentionally put on all my open source modules by me back then when Russia invaded Ukraine and tried to make people believe it is just a three day special operation and not a war. I've had this on all my modules and this is one of the few where it is still visible. But yeah... unfortunately it is still true 😞 

[szabesz]

Removed as per @bernhard request.

[bernhard]

@szabesz would you mind removing your statement from my modules thread please? As it has nothing to do neither with the module nor with the question that soma asked, which I simply responded to. Also your post is IMHO violating forum rules and while I could respond I respect those rules and will not respond to what you wrote. But I'm happy to discuss what you wrote in a PM.

Thanks!

[szabesz]

44 minutes ago, bernhard said:

Also your post is IMHO violating forum rules

You are right.

44 minutes ago, bernhard said:

I respect those rules and will not respond to what you wrote.

Ok.

On 4/22/2026 at 5:36 PM, bernhard said:

when Russia invaded Ukraine and tried to make people believe it is just a three day special operation and not a war.

You are violating forum rules with this one too.
 

46 minutes ago, bernhard said:

would you mind removing your statement from my modules thread please?

"modules thread" Have you missed an apostrophe perhaps? I am asking this because "module's thread" would make more sense to me. Am I missing something perhaps?

Anyway, I deleted my comment above. Cheers.