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?