Collections View: display first image of MIGX TV

[vibedesign]

I would like to display the first of however many images of my MIGX TV in the Collections View Columns. I know how to do it with a single image TV by using simply tv_NAME but is there a way to do this with a MIGX TV?

[halftrainedharry]

I assume you have to write your own custom renderer as described in this article.
In the case of a MIGX TV the value of the function-call will be a json-string, so you then have to parse the json to read the path of the first image.

[ulrichsoh]

Hi, guy i hope you are fine. By looking for solution of how to display the image of my blog post in a summary i found this thread. When i try the tutorial on the post, my collection children disappear. and all the ressouce page become blank. thank for any ideas.

[ulrichsoh]

I found a solution. i think this article is a bit older. You don’t need to set the renderer fonction “myimagerenderer” end the Js file. There is already the " Collections.renderer.image" in the Collection snippet. You also do not need to set User’s JS file in the system setting. And at the and if your Tv is well configured, you don’t have to set the “collections.renderer_image_path” and the image will dispay well in the collection view.

Now i want to retrieve the that image or the first from the article post to display it in the sumary of the blog post listing. I still needing help. thank

[vibedesign]

@halftrainedharry I was afraid, that would be the solution, because I’m not too comfortable with coding stuff like that (yet), but I guess I’ll have to look into it at some point. (If there’s a ready solution somebody has out there, I’ll be happy to try that of course )

@ulrichsoh I think your issue is another topic. I’m trying to retrieve the first image from a MIGX TV so I can’t go with the default renderer Collections.renderer.image as that is just for a single image TV. It would be helpful to see some of your code on what you’re trying to achieve exactly (but probably best in its own thread)

[halftrainedharry]

@vibedesign The problem is, that every MIGX configuration is a little bit different so there is no real generic solution for your problem. But if you post your MIGX configuration I can give it a try.

@ulrichsoh It seems that the JS-file with the custom renderer has to be in the manager-folder (or a subfolder). So the cause of your blank page probably was, that the JS-file couldn’t be found.

[vibedesign]

@halftrainedharry I really don’t like to ask for something like this because it feels like I just beg for a finished solution without putting my own work into it, but if you would like to spend a minute on this, I would highly appreciate it of course!

Like I said, I use a very simple MIGX TV item-images with this Form Tabs config:

[
  {
    "caption": "Image",
    "fields": [{
      "field": "title",
      "caption": "Title"
    },
    {
      "field": "img",
      "caption": "Image",
      "inputTVtype": "image"
    }]
  }
]

Like I said, I would like to always get the first image within that TV.

Or would you need a full configuration like made with the actual MIGX DB Menu?

[halftrainedharry]

So here is some code:

var mymigxrenderer = function(value, metaData, record, rowIndex, colIndex, store) {
    if (value != '' && value != null) {
        var arr = JSON.parse(value);
		if (Array.isArray(arr) && arr.length > 0){
			var imgPath = MODx.config['collections.renderer_image_path'];
			return '<img src="' + MODx.config.base_url + imgPath + arr[0]['img'] + '" width="64">';
		}
        
    }
}

Put it in a *.js file in the folder manager and set the system setting collections.user_js to the name of the file.
In the collection view for the column set the field ‘renderer’ to mymigxrenderer.
Maybe you have to clear the cache too.

[vibedesign]

You are a legend! Thank you so much for your efforts, works like a charm!