Jump to content

Module: TemplatePreviewImages


bernhard
 Share

Recommended Posts

hi everyone,

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

post-2137-0-66299800-1445416231_thumb.gi

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

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?!

  • Like 24
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.
  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

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).

layout-switcher-3.jpg

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

template-preview-1.jpg

Regards.

TemplatePreviewImages.zip

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...