Hi there,

adding an unlimited amount of images to a resource via (one) Template Variable has been a long requested feature for MODx Evolution, so i was very happy to find this little jewel by Temus on MODx-CMS.ru.

"MultiPhotos" is a plugin which transforms a textarea TV in the MODx-Manager to an image uploading & handling tool for an unlimited amount of items → see screnshot:

by clicking on "+" you'll add another item, clicking "-" will remove. You can rearrange the items by drad & drop.

The output on the Website is handled by a Snippet which you can configure with custom Template-Chunks. The default is a list of images with links to a bigger version:

Installation

1. Download the english version of MultiPhotos (Snippet & Plugin)

2. Create a new TV "photos". Input type "Textarea" and give it access to the Template in use.

3. Create a new Plugin "MultiPhotos" and copy the code from the file "MultiPhotos.plugin.php" into the Plugin-Code field.
In the Plugin-Tab "configuration" you add the following line to "Plugin configuration" and click on "Update parameter display":

&tvid=TV Id;text;&templ=Template;text;&role=Role;text;&thumbUrl=PHPThumb URL;text;&w=Width;text;&h=Height;text;

now you'll see this:

Enter the ID of the TV from step 2 in "TV Id". (to get the TV-ID you can go to Plugins → "ManagerManager" → "Tab Templates, TVs & Roles". Same for Template-ID).
Enter the ID of the Template in use in the Field "Template".
By entering an ID to "Role" you can restrict access to the TV (i guess).
By entering the path to PHPthumb in your installation (optional, if you got it installed), you can cache the thumbnails in the Manager.
Width & Height of the thumbnails in the manager.

Tab "System Events" check "OnDocFormRender"

4. Create a new Snippet "MultiPhotos" with the content of "MultiPhotos.snippet.php".

5. Place the Snippet call in your Template: 

[!MultiPhotos!]

additional Parameters for the Snippet-Call are:

&tvname
name of the TV, default "photos"

&outerTpl
outer Template, default (check available placeholders)

<div class="thumbs">[+photos+]</div>

&rowTpl
inner Template, default (check available placeholders)

<a id="thumb_[+num+]" href="[+link+]"><img title="[+title+]" src="[+url+]" alt="" /></a>

&fid
e.g. &fid=`2` - show single image number 2 (from 1 to all)

&random
&random=`1` - show random single image

now you're ready to go - add, delete & rearrange you Images.
*All credit & huge "Thank You" to Temus from the Russian MODx-Community!*

Tipp: you can use PHPthumb for the image output on the frontend, so you just need one image to upload. Add a lightbox of your choice - happy MODx'ing :)

p.s. apparently Temus is working on another plugin version, which will handle tabular data as well!

Update - MultiPhotos Version 1.1

here's an updated Plugin version of MultiPhotos which allows automatic resizing of uploadet images without the use of phpThumb. Download it here.

Installation is basically the same as version one, but you need to check one more system event for the plugin "OnBeforeDocFormSave" as well as a different "Plugin configuration":

&tvid=TV Id;text;&templ=Template;text;&role=Role;text;&resize=Resize: enable;list;true,false;false;&crop=Resize: cropping;list;true,false;true;&prefix=Resize: prefix;text;s_;&th_width=Resize: width;text;&th_height=Resize: height;text;&auto_big=Resize: auto big img;list;true,false;false;&auto_small=Resize: auto small img;list;true,false;false;&w=Preview: width;text;&h=Preview: height;text;&thumbUrl=PHPThumb URL;text;

this will give you the following configuration mask (well some of the values in the screenshot are from my installation e.g. TV Id, Template Id, width & height):

new parameters are:

  • Resize: enable - turn on/off auto resizing.
  • Resize: cropping - if enabled, the image will fit exactly to the size of the smaller side and the excess will be clipped. If not - the image is reduced on the larger side.
  • Resize: prefix - prefix that will be used for the generated smaller image (it will be saved in the same folder from where you are inserting the image).
  • Resize: width and Resize: height - dimensions for resizing.
  • Resize: auto big img - if enabled, and the field for the big picture is not filled, it will automatically use (and fill in) the path to the original image you've uploaded.
  • Resize: auto small img - if enabled, a small image will be created from the second field (big image) and the first field will be atomatically filled. If it is disabled, a small image is created from the first field (not created if it already exists).
  • the other parameters remain the same.

so now you only need to upload & insert one image, the thumbnail will be automatically created (with the prefix "s_" if you use the standard config) and the second (or first) field of the upload/insert mask will be atomatically be filled.

Nice! :) btw. a version for uploading files is on the way

Tipp: you can use the MultiPhoto thumbnail in your Ditto-template as well, just create a PHX-modifier ( Snippet → name it "phx:mphoto" ) with the following content:

<?php
$fotoArr=json_decode($output);
if ($fotoArr) return $fotoArr[0][0];
?>

and in your Ditto-template:

<img src="[+photos:mphoto+]" alt="teaser img" />

Update - MultiPhotos Version 1.2

updated Version of MultiPhotos which allows multiple instances of a MultiPhoto TV per resource. The Plugin configuration-parameter "tvid" changed to "TV Ids" where you can add a comma-separated list of TV ids. You can download it here.

plugin installation is the same as for version 1.1 + this configuration: 

&tvIds=TV Ids;text;&templ=Template;text;&role=Role;text;&resize=Resize: enable;list;true,false;false;&crop=Resize: cropping;list;true,false;true;&prefix=Resize: prefix;text;s_;&th_width=Resize: width;text;&th_height=Resize: height;text;&auto_big=Resize: auto big img;list;true,false;false;&auto_small=Resize: auto small img;list;true,false;false;&w=Preview: width;text;&h=Preview: height;text;&thumbUrl=PHPThumb URL;text;

call the Snippet in your template like this:

[[MultiPhotos? &tvname=`photos1` ]]
[[MultiPhotos? &tvname=`photos2` ]]

the updated version also fixes a bug for resizing without cropping.

Showing comments 1 to 16 of 41 | Next | Last
admin
Gravatar Image
Reply #41 on : Wed April 18, 2012, 14:02:44
Hi Nick,

check this out: https://github.com/Jako/multiTV

cheers, j
Nick
Gravatar Image
Reply #40 on : Fri April 13, 2012, 08:59:34
This is wonderful.
What a great improvement to Evo - its perfect for per page photo galleries.
Thanks so much for sharing and explaining.
I can't wait to see the MultiFile TV for use with pdfs. Is that far away?
admin
Gravatar Image
Reply #39 on : Sat April 07, 2012, 06:00:33
Hi Maja,

yes, the main functionality is to have the option of adding a random amount of image/big image/caption-items. If you fill in the "Link to big image" field first, then save, you'll see that a thumbnail will be automatically created. add a lightbox script or similar to the snippet on the frontend and you got a nice little gallery :)

I haven't worked with the plugin/snippet in a long time, so maybe I'm missing some new functionality that has been integrated in the newer versions provided by the russian community (will check these sooon)

cheers, j
Last Edit: April 07, 2012, 06:01:19 by admin  
Maja
Gravatar Image
Reply #38 on : Fri April 06, 2012, 22:49:31
I have tried to install the snippet and TV´s following your guide. Unfortunately I have a few problems. I assume it´s something I am missing. I do get the parameters shown in the template, when I create a new page - but it looks as if it does not get the snippet functionality working. (it does not scale the images - on click on an image it just directs to the big image - in the same window).

So what it does is really just the same as if I had made a regular image TV - just now I can have multiple images in the same TV. Perhaps somebody can help? I have installed it in a test environment on: http://seomodx.dk Username: **** Password: *******
Last Edit: April 07, 2012, 05:39:59 by admin  
Noah Learner
Gravatar Image
Reply #37 on : Tue December 13, 2011, 06:04:26
Hey There,

I finally got to use this on a project. Sick!

-Noah
admin
Gravatar Image
Reply #36 on : Thu March 10, 2011, 16:52:37
Hi Pixxje,

actually i don't use phpThumb together with the plugin. as far as i know, the option to add the URL to phpThumb in the configuration is to create & cache thumbnails in the manager. This might be useful if you got lots of images, not sure if you need that.

creation of thumbs for the frontend works without an additional phpThumb-installation

j
Pixxje
Gravatar Image
Reply #35 on : Thu March 10, 2011, 16:42:40
Can you give an example on how to integrate phpThumb? I'm completely stuck!
admin
Gravatar Image
Reply #34 on : Fri March 04, 2011, 05:28:17
Hi eric,

i assume your Server hasn't GD lib enabled. Check 'Reports' → 'System Info' → 'phpinfo()' → 'View'
eric
Gravatar Image
Reply #33 on : Fri March 04, 2011, 00:21:38
Has anyone had a problem like this?

Evo 1.0.5

Fatal error: Call to undefined function ImageCreateFromJpeg() in /usr/home/iz10033/public_html/greenlife/manager/includes/document.parser.class.inc.php(790) : eval()'d code on line 200
Cipa
Gravatar Image
Reply #32 on : Fri February 25, 2011, 20:31:01
I have an idea for this extremely useful plug-in.

I think you can add something like this to the configuration part of the plugin:

field_1=text
field_1_desc=Image Title
field_2=img
field_2_desc=100x100 Image
field_3=file
field_3_desc=Pdf file

Some code can be created to generate the above. This will help a lot of beginners

Thanks
admin
Gravatar Image
Reply #31 on : Fri February 25, 2011, 18:26:57
Hi Cipa,

glad you got it sorted! :) guess i need to restructure my post & reference the latest release further up

j
Cipa
Gravatar Image
Reply #30 on : Fri February 25, 2011, 18:17:54
I think I fixed it. It had to do with this
this.OrigSetUrl = SetUrl

this. was not present in the old versions. Thanks for your help. You can delete my comments as they don't add much value to this page :)
Cipa
Gravatar Image
Reply #29 on : Fri February 25, 2011, 15:27:37
I discovered I am using 1.01 versions. I will update them. Thanks
Cipa
Gravatar Image
Reply #28 on : Fri February 25, 2011, 15:19:44
I think I use the last one but mine are slightly modified versions. I will take a look at the original and try to find the problem
admin
Gravatar Image
Reply #27 on : Fri February 25, 2011, 12:04:11
Hi Cipa,

weird. it's working for me ...you are using Version 1.2?

j
Cipa
Gravatar Image
Reply #26 on : Thu February 24, 2011, 21:24:06
I want to add that both work fine individually but when combined the pop-up does not close and the field is not populated with the new path.

If I write the file path by hand everything is fine. I can sort I can see the thumb but I can't select a new item from the popup.

I am crrently looking for the code that closes the pop-up(I did a search on window.close or self close but without luck)

PS: I use different Object names and variable.
  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.