MODx | MODx (Evolution) Multi-Image TV

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 37 | Next | Last

Noah Learner

Reply #37 on : Tue December 13, 2011, 06:04:26

Hey There,

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

-Noah

admin

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

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

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

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

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

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

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

Reply #29 on : Fri February 25, 2011, 15:27:37

I discovered I am using 1.01 versions. I will update them. Thanks

Cipa

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

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

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.

admin

Reply #25 on : Thu February 24, 2011, 17:00:56

@spacefish guess it's easier to make a forum post with your code
@Cipa i'll look into that

Cipa

Reply #24 on : Thu February 24, 2011, 16:17:09

Hi,

I am trying to use 2 of these multi items solution on the same page. But I get an Error when I select the image in the popup.

Th js error says "too much recursion". Any ideas on what could cause the problem?

Thanks

spacefish

Reply #23 on : Tue February 22, 2011, 10:20:07

Oops - that should have been $v[3] and $v[4],

Cheers! :-)

spacefish

Reply #22 on : Tue February 22, 2011, 10:18:51

Hiya, I've edited the snippet/plugin in order to add some extra formatting and a couple of extra fields naming them $v[3] (item) and $v[3] (description). It works great, the only minor niggle is when adding a new block for another image the 2 new fields have "undefined" auto placed there. Once I add the real "item" and "description" data all is good, but I was just hoping to tidy it up a bit so those fields are blank when the block is first created.

Cheers for any help!

Required fields are marked with *.