MIGX - multiItemsGridTv for MODX - Revolution

5,888 Posts

Bruno17 Reply #1, 15 years, 5 months ago

Support Forum-Thread for MIGX

modx-Revo custom-Tv-input-type for muliple records in one TV.
Configurable tabbed form-window for record-fields.
You can use most tv-input-types in the form.
Add multiple records in one TV, stored in json-format.
drag/drop-sortable grid.
Imagerenderer on grid with image-TV possible.

configurable form-window and grid-columns per TV-property-set.

example-input-properties included.

Install via Package Management.

Note: Make sure to remove older versions of multiItemsGridTv and the multiitemsgridTv-namespace, if you had them tried from Github.

Note: Input Options for the MIGX only work for Revolution 2.1.0-rc2 and later.

Github:
https://github.com/Bruno17/multiItemsGridTV

how you can use it for changing blocks:
http://modxcms.com/forums/index.php/topic,58731.msg334909.html#msg334909

MIGX is official released now.
The old Thread: http://modxcms.com/forums/index.php/topic,58511.msg333779.html#msg333779

Documentation:
http://rtfm.modx.com/display/ADDON/MIGX [ed. note: Bruno17 last edited this post 14 years, 7 months ago.]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
350 Posts

Menno Pietersen Reply #2, 15 years, 5 months ago

It works, but now I need to call 2 images (a big version and a small version) in one <li> item.
My call is like this:

<ul class="ps_nav">[[!getImageList? &tvname=`multiItemsGrid`&tpl=`@CODE:<li><a href="[[++site_url]][[+image]]" rel="[[++site_url]][[+image_small]]"/></a></li>`]]</ul>

The +image_small is the only images that is rendered on the front-end, if I only call the [[+image]] then this one is rendered correctly.

Could you help me some more with getting the two images rendered?

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

5,888 Posts

Bruno17 Reply #3, 15 years, 5 months ago

what is your output with

[[*multiItemsGrid]]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
350 Posts

Menno Pietersen Reply #4, 15 years, 5 months ago

Hey Bruno,

With

[[*multiItemsGrid]]

I get:

[{"title":"Test","description":"

hkhjlkh
","image":"beeld/portret/sjors6.jpg"},{"title":"Test 2","description":"

ghnvgmjghb
","image":"beeld/portret/sjors7.jpg"},{"title":"fdgfh","description":"

gfjghjm
","image":"beeld/portret/sjors7.jpg"}]

I think the image_small is not working.

My Form Tabs code:

[
{"caption":"Info", "fields": [
    {"field":"title","caption":"Title"}, 
    {"field":"description","caption":"Description","inputTV":"richtext"}
]}, 
{"caption":"Image", "fields":[
    {"field":"image","caption":"Image","inputTV":"image"},
	{"field":"image","caption":"Image small","inputTV":"image_small"}
]}
]

My Grid Columns code:

[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"}, 
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

What I need is a big image and a thumbnail inside a <li> item....

Thanks a lot for your help!

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

5,888 Posts

Bruno17 Reply #5, 15 years, 5 months ago

you need a field for both, but you can use the same Tv for your image-input-field.
try this:

[
{"caption":"Info", "fields": [
    {"field":"title","caption":"Title"}, 
    {"field":"description","caption":"Description","inputTV":"richtext"}
]}, 
{"caption":"Image", "fields":[
    {"field":"image","caption":"Image","inputTV":"image"},
	{"field":"image_small","caption":"Image small","inputTV":"image"}
]}
]

but its also possible to use phpthumbof, which generates thumbs, when you need them.
The Phpthumbof-output-filter does not work with the inline chunk with @CODE, use a chunk for your tpl when you want to try that.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
350 Posts

Menno Pietersen Reply #6, 15 years, 5 months ago

Thank alot for your help! It works perfectly now and the client can add/remove as many slider images as she wants..

Preview here (Design is not finished but it works great)
http://lonneketheelen.nl/index.php?id=11

My final code:

[[!getImageList? &tvname=`multiItemsGrid`&tpl=`@CODE:<li><a href="[[++site_url]][[+image]]" rel="[[++site_url]][[+image_small]]">Image 2</a></li>`]]

Form Tabs:

[
{"caption":"Info", "fields": [
    {"field":"title","caption":"Title"}, 
    {"field":"description","caption":"Description","inputTV":"richtext"}
]}, 
{"caption":"Image", "fields":[
    {"field":"image","caption":"Image","inputTV":"image"},
	{"field":"image_small","caption":"Image small","inputTV":"image_small"}
]}
]

Grid Columns:

[
{"header": "Title", "width": "160", "sortable": "true", "dataIndex": "title"}, 
{"header": "Image", "width": "50", "sortable": "false", "dataIndex": "image","renderer": "this.renderImage"}
]

Get the fantastic slider I used here:
http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/

MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub

116 Posts

chr.s Reply #7, 15 years, 4 months ago

Firstly, thanks so much for this tool, it’s exactly what I’ve been looking for for quite a while, but I’m having some difficulty getting this to work. I’m on revo 2.0.7 pl - if that makes any difference.

I followed the wiki instructions as follows:

Created the multiItemsGrid-TV, assigning it to the relevant template, also adding it to the MIGX category - otherwise whenever I try to use it the pop-up immediately disappears (in fact it seems to disappear quite randomly).
Created two properties in the TV - "columns" and "tabs" - and pasted the example texts in both.
Created the image-TV and richtext-TV, not assigning them to any templates, but also adding them to the MIGX category.

The multiItemsGrid-TV appears in the template variable section as expected, but I can only seem to add a non-richtext title (see attached image) and even then, only when the pop-up doesn’t immediately close.

Any ideas as to what I may have done wrong?

5,888 Posts

Bruno17 Reply #8, 15 years, 4 months ago

this add-on works best on 2.1. I think I need to try it again on a fresh 2.0.8 to see what eventually goes wrong.
Or do you have it running online, where you can give me access to the manager?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

116 Posts

chr.s Reply #9, 15 years, 4 months ago

Thanks for the speedy response!

But... sadly it’s on my localhost.
I tried 2.1 rc4 earlier today but got a horrible and seemingly fairly common error when trying to upgrade, so I’m holding off for a while.

I guess I’ll just have to use some sort of work-around for now until they’ve ironed out the bugs in 2.1. I’m something of a betaphobe.

2 Posts

smanu85 Reply #10, 15 years, 4 months ago

Hi Bruno.
I’ve noticed that in the json object for the FORM TABS it’s possible to specify a CAPTION for the default textfield, but not a description unless you don’t specify an input TV.

I’ve modified field.php adding this line:

$tv->set(’value’, $fieldvalue);
$tv->set(’caption’, htmlentities($field[’caption’], ENT_QUOTES));
$tv->set(’description’, htmlentities($field[’description’], ENT_QUOTES));

So I can use this json object:

[
{"caption":"Select image", "fields":[
{"field":"image", "caption":"File", "inputTV":"image_browser"},
{"field":"title", "caption":"Title"},
{"field":"alt", "caption":"Description","description":"Alternative text for the image."}
]}
]

Could you add this feature?
Anyway, thanks for your work, MIGX is very very useful!