Migx Varying Layout Boxes

Hi there.
I created a multi-Column Migx layout using the following tutorial:

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:


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!

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

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?

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.

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:

and I have an image I have created which represents each of the above, called

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

try something like that:

"renderchunktpl":"<img src=\"..\/assets\/layoutimages\/[[+MIGX_formname]].png\" width=\"100px\" \/>"}
1 Like

Yes! That works - perfect. Thanks so much!

1 Like

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

Ah right ok. Understood!

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.