Migx Varying Layout Boxes

[tm2000]

Hi there.
I created a multi-Column Migx layout using the following tutorial:
https://docs.modx.com/3.x/en/extras/migx/migx.tutorials/varying-layout-boxes

It works really well, but one problem I have is in the back end.
I want to show a thumbnail of each layout, so the user can choose the correct one.
For example, I have one layout which outputs a large image on the left, with a column of text on the right, and another which has an image either side of the text.

In the form tabs I have this:

{
            "field":"cell_1_image"
            ,"caption":"Image"
            ,"inputTVtype":"image"
        },

But this doesn’t mean anything much to the user, so I’d like to replace this with a thumbnail image (which I have created) just for use in the backend, to show which layout/chunk I’m using.

I just can’t figure out how to include this in the config for each layout/chunk.

Any ideas?

Thanks so much!

[halftrainedharry]

@tm2000

I want to show a thumbnail of each layout, so the user can choose the correct one.

Where exactly do you want to show this thumbnail?
In the dropdown where the layout is selected?

[tm2000]

Sorry for being unclear - I want to show them in the migx Backend Columns.
So for each migx entry, it shows a thumbnail of the layout/chunk that was selected.

Does that make sense?

[halftrainedharry]

So you want to show an image in the column of the grid.

This should be possible with a custom renderer (similar to this.renderCrossTick) or maybe with the this.renderChunk renderer.

[tm2000]

Thanks Harry - I’m not really sure how to use this.renderChunk properly - I’ve tried adding this, but Not sure what to use for the Dataindex?

{"header":"Layout","width":"120","sortable":"false","dataIndex": "layout_1","renderer": "this.renderChunk","renderchunktpl":"layout_1"},

All this outputs is the name of the chunk.

so I have three layouts to choose from:
layout_1
layout_2
layout_3

and I have an image I have created which represents each of the above, called
layout_1.png
layout_2.png
layout_3.png

I thought maybe I could use the filename to tie up which images to use for each chunk but I’ve got tied up in knots instead!!

[bruno17]

try something like that:

{
"header":"Layoutimage",
"dataIndex":"layoutimage",
"renderer":"this.renderChunk",
"renderchunktpl":"<img src=\"..\/assets\/layoutimages\/[[+MIGX_formname]].png\" width=\"100px\" \/>"}

[tm2000]

Yes! That works - perfect. Thanks so much!

[bruno17]

great!
for the dataIndex use anything, but not an otherwise used fieldname!

[tm2000]

Ah right ok. Understood!